Unidad02 Formularios 2

Tecnicatura en Desarrollo Web
Tecnicatura en Desarrollo de Aplicaciones Móviles

Departamento de Ingeniería e
Investigaciones Tecnológicas
HTML 5
Formularios
Programación Web I / Móvil I
Comisión Miércoles Noche Comisión Viernes Mañana
DIS. Alicia Rosenthal Ing. Gabriel Panik
Tec. Willian Dos Reis

Etiqueta FORM
Los formularios constituyen uno de los elementos

más importantes porque permiten el intercambio de
información. HTML5 incorpora nuevos atributos y
elementos.
<form></form>
ATRIBUTOS OBLIGATORIOS Etiqueta FORM
• action: Define la acción que se realiza cuando se envía un formulario.
Especifica una dirección URL dentro del servidor donde enviar el
formulario.
• method: define de que manera se van a transmitir los datos hacia el

archivo que se define en el action. Existen dos métodos :
get ( por defecto) cuando la información a enviar no es sensible;
los datos del formulario son visible en la dirección url de la
página. Recomendado para poca cantidad de texto;
post, cuando la información es sensible; ofrece mayor seguridad

dado que los datos no están visibles en la dirección de la página.
• enctype: Especifica cómo los datos serán codificados el enviarlos al

servidor. Sólo se puede aplicar si el método utilizado es post.
Las opciones son : application/x-www-form.urlencoded ( por defecto),
multipart/form-data y text/plain.
Etiqueta FORM
ATRIBUTOS OBLIGATORIOS
<form action="php/enviar.php"
method="get" enctype="multipart/form-data">
…CONTENIDO DEL FORMULARIO…
</form>
Etiqueta FORM
NUEVOS ATRIBUTOS
autocomplete:
Muestra las entradas previas como posibles valores. Puede aplicarse al form o a
alguna de sus elementos en particular. Sus valores posibles son on (por defecto) y
off.
novalidate:
los formularios en HTML5 presentan capacidad propia de validación. El atributo
novalidate es un atributo booleano, cuando está presente indica que los datos
enviados no deben ser validados
Ejemplo combinando todos los atributos:

<form action="php/enviar.php" method="get"
enctype="multipart/form-data" autocomplete="off" novalidate>
…CONTENIDO DEL FORMULARIO…
</form>
Campos de un formulario
Los formularios pueden contener los siguientes tipos de campos:
• Input
Campo de una sola línea, puede ser de tipo text, number, date, color,
radio, submit, reset, password, hidden, checkbox, file, email
• Textarea
Campo multilínea.
• Select
Combo desplegable que puede contener varias opciones(options)
• Button
Botón de envío de formulario
• Datalist
Sirve para asociar a un campo de tipo input una lista predefinida de
opciones. Es uno de los campos agregados en HTML5
Los campos de un formulario tienen varios atributos, dos de cuales son
obligatorios:
• Atributo id: permite identificar unívocamente un campo de un

formulario y sirve entre otras cosas para su validación
• Atributo name: atributo obligatorio para que el valor del campo se

envíe al enviar un formulario. Los campos sin el atributo name no son
enviados.
Adicionalmente a estos atributos, es conveniente asociar a cada campo a

una etiqueta label. La etiqueta label debe tener un atributo for con igual
valor que el id del campo para que ambos queden asociados:
<label for="nombre">Nombre: </label>

<input type="text" name="nombre" id="nombre">
Etiquetas(Ejemplo) Descripción
<textarea name="nombre" cols=30 rows=4></textarea> Crea una caja de texto, las columnas son el ancho y las
filas son la altura (cols y rows).
<select name="nombre"> Menú desplegable (combobox) con 1 ítem (“Valor 1”)
<option value=“valor1”> Valor 1 </option>
</select>
<input type=text name=“nombre" size=30> Crea una caja de texto para entrada de información (una
única línea)
<input type="checkbox" name=“trabaja"> Crea un checkbox que se puede seleccionar según
corresponda ( en este caso si trabaja o no)
<input type="radio" name=“sexo" value=“Femenino"> Crea un botón de radio que se puede seleccionar . Se
generan como grupos de botones excluyentes.
<input type="submit" value=“nombre"> Crea botón de envío de formulario (tipo submit)
<input type="reset"> Crea botón de reset (limpieza). Vacía el formulario
<input type=“button"> Crea botón
<input type="hidden"> Crea un campo de ingreso oculto
<input type="password"> Crea una caja de texto enmascarada
NUEVOS VALORES EN EL ATRIBUTO TYPE DE LA ETIQUETA INPUT (HTML5)
Tipo email <input type=“email” Permite ingresar un cuadro de texto para
name=“miemail” id=“miemail”> cargar un email que es validado(con HTML5)
Tipo dirección url <input type=“url”> Permite ingresar direcciones WEB absolutas,
retorna error si el formato no es válido.
Tipo teléfono <input type=“tel”> Permite ingresar números de teléfono, no
requiere sintaxis particular , es una
indicación para el navegador de acuerdo al
dispositivo en el cual la aplicación es
ejecutada.
Tipo número <input type=“number” Permite ingresar entradas numéricas. En el
min=“0” max=“10” step=“5”> ejemplo, si se declara un valor 5 para el
atributo step en un campo que tiene valor
mínimo de 0 y máximo de 10, el navegador
no permitirá especificar valores entre0 y 5 y
entre 5 y 10.
Tipo rango <input type=“range” min=“0” Es un nuevo control que permite al usuario
max=“10” step=“5”> elegir un valor a partir de un rango.
NUEVOS VALORES EN EL ATRIBUTO TYPE DE LA ETIQUETA INPUT (HTML5)
Tipo fecha <input type=“date” Es un nuevo control que muestra un
name=“fecha”> calendario cuando el usuario hace clic sobre
el campo. El valor generado y esperado tiene
la sintaxis año-mes-día.
Tipo semana <input type=“week” Es un nuevo control que permite seleccionar
name=“semana”> una semana en el año. Su sintaxis es
año-semana (2016-w50)
Tipo mes <input type=“month” Es un nuevo control que permite seleccionar
name=“mes”> un mes en el año. Su sintaxis es año-mes.
Tipo hora <input type=“time” name=“hora”> Es un nuevo control que permite seleccionar
una hora. Su sintaxis es
hora-minutos-segundos.
Tipo fecha/hora <input type=“datetime” Sirve para ingresar la fecha y hora completa,
name=“fechahora”> incluyendo la franja horaria.
Nuevos Atributos en HTML5
Requerido <input type=“email” required> Este atributo no permite que se envíe el
formulario si el campo se encuentra vacío
Multiple <input type=“email” multiple> En campos de tipo email, o url permite varias
entradas, las mismas deben ser separadas
por comas y se validan una a una.
Autofoco <input type=“datetime” Anteriormente el foco se ubicaba en los
name=“fechahora” autofocus> campos con el método focus() de JavaScript
para seleccionar un campo; pero no tenía en
cuenta si el usuario seleccionaba otro.
Actualmente autofocus toma el foco cuando
el usuario se posiciona sobre el elemento.
Patrón <input pattern=“[0-9]{4} Sirve para validar a través de expresiones
name=“codigopostal” title=“Inserte los cuatro regulares que permiten personalizar reglas
dígitos de su c&ocute;digo postal”> de validación, como por ejemplo validar el
código postal con 4 dígitos.

Unidad02 Formularios 2

Cargado por

Copyright:

Formatos disponibles

Unidad02 Formularios 2

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad02 Formularios 2

Cargado por

Copyright:

Formatos disponibles

Tecnicatura en Desarrollo Web

Tecnicatura en Desarrollo de Aplicaciones Móviles

Comisión Miércoles Noche Comisión Viernes Mañana

DIS. Alicia Rosenthal Ing. Gabriel Panik

Tec. Willian Dos Reis

Los formularios constituyen uno de los elementos

• method: define de que manera se van a transmitir los datos hacia el

post, cuando la información es sensible; ofrece mayor seguridad

• enctype: Especifica cómo los datos serán codificados el enviarlos al

…CONTENIDO DEL FORMULARIO…

Ejemplo combinando todos los atributos:

• Atributo id: permite identificar unívocamente un campo de un

• Atributo name: atributo obligatorio para que el valor del campo se

Adicionalmente a estos atributos, es conveniente asociar a cada campo a

<label for="nombre">Nombre: </label>

También podría gustarte