2.

HTML Y XHTML
(PARTE IV)
CARMEN MARTÍNEZ SÁNCHEZ
1. Formularios
 Se utiliza un formulario HTML para recopilar datos de entrada del usuario.
 Estos datos suelen enviarse a un servidor para su procesamiento.
 El elemento HTML <form> se utiliza para crear formularios HTML
<form>
Elementos del formulario
</form>

 El elemento <form> es un contenedor de diferentes tipos de elementos de

entradas como pueden ser: campos de texto, checkbox, botones, etc.
 A lo largo de los siguientes subapartados vamos a ver como se definen alguno
de los principales elementos y posteriormente haremos un estudio más
detallado de cada uno de estos elementos.
1.1. El elemento <label>

 Este elemento define una etiqueta para elementos del formulario.

 Es útil para los usuarios de lectores de pantalla, porque el lector de pantalla
leerá en voz alta la etiqueta cuando el usuario tenga el foco en el elemento
de entrada.
 También ayuda a los usuarios que tienen dificultades para hacer clic en
regiones muy pequeñas (como botones de radio o casillas de verificación),
porque cuando el usuario hace clic en el texto dentro del elemento <label>,
cambia el radio button/checkbox.
 El atributo for de la etiqueta <label> debe ser igual al atributo id del elemento
<input> para unirlos.
 Su uso se verá más claro cuando vayamos viendo los diferentes elementos de
los formularios.
1.2. Elemento <input>
 Es el más usado de los elementos de formulario.
 Este elemento puede ser mostrado de diferentes maneras, dependiendo del
valor del atributo type

 Algunos de los valores que puede tomar el atributo type son los siguientes
(aunque existen otros más que veremos en los siguientes subapartados)
Type Descripción
text Campo de texto de entrada de una sola línea
radio Botón de opciones (para seleccionar una de las muchas opciones)
Checkbox (casilla de verificación), para seleccionar cero o más de
checkbox
muchas opciones.
submit Botón de envío (para enviar el formulario)
button Botón para hacer clic.
1.2.1. Text Fields

 <input type="text"> Define un campo de texto de entrada de una sola línea.

 Ejemplo de uso de este elemento
1.2.2. Radio Buttons

 <input type="radio"> define un Radio button.

 Permiten al usuario seleccionar una de un número limitado de opciones.
1.2.3. Checkbox

 <input type="checkbox"> define un checkbox.

 Un checkbox permite al usuario definir cero o más opciones de un número
limitado de opciones.
1.2.4. Botón Submit

 <input type = "submit"> define un botón para enviar los datos del
formulario a un administrador de formularios.
 El gestor de formularios suele ser un archivo en el servidor con una
secuencia de comandos para procesar los datos de entrada.
 El controlador de formulario se especifica en el atributo de acción del
formulario.
1.2.5. Password

 <input type="password"> define un campo de contraseña (los caracteres que

se escriben, no tienen visible su significado)
1.2.6. Botón Reset

 Define un botón que reseteará todos los valores de un formulario a su valor

por defecto.
1.2.7. Button

 Define un botón que realiza una acción

1.2.8. Date
 <input type = "date"> se usa para campos de entrada que deben contener
una fecha.
 Dependiendo de la compatibilidad del navegador, puede aparecer un selector
de fecha en el campo de entrada u otro tipo de visualización.
 Es posible utilizar los atributos min y max para establecer restricciones en la
fecha
 Esta comprobación se hará a la hora de hacer el envío de los datos (botón
submit) y si se pulsa en el botón calendario ese será el rango de fechas que
nos mostrará
 Se puede utilizar el atributo min sin el max y viceversa.
1.2.9. E-mail

 <input type = "email"> se utiliza para los campos de entrada que deben
contener una dirección de correo electrónico.
 Dependiendo de la compatibilidad del navegador, la dirección de correo
electrónico (formato) se puede validar automáticamente cuando se envía.
1.2.10. Month

 <input type = "month"> permite al usuario seleccionar un mes y un año.

 Dependiendo de la compatibilidad del navegador, puede aparecer un selector
de fecha en el campo de entrada.
1.2.11. Number

 <Input type = "number"> define un campo de entrada numérico.

 También puede establecer restricciones sobre los números que se aceptan
(mínimo y máximo) utilizando para ellos los atributos min y max.
 Comprobará el valor en el momento de enviar los datos del formulario.
1.2.12. Time

 El <input type = "time"> permite al usuario seleccionar una hora (sin zona
horaria).
 Dependiendo de la compatibilidad del navegador, puede aparecer un selector
de tiempo en el campo de entrada.
1.3. Atributos de input

 A lo largo de este apartado vamos a ver diferentes atributos que pueden ser
aplicados a los diferentes elementos <input>
 value
 Especifica un valor inicial para un campo de entrada

 readonly
 Especifica que un campo de entrada es de solo lectura.
 Un campo de entrada de solo lectura no se puede modificar. Sin embargo, un usuario puede
visitarlo por ejemplo y copiar su texto.
 El valor de un campo de entrada de solo lectura se enviará al enviar el formulario.
 disabled
 Especifica que un campo de entrada debe estar deshabilitado.
 Un campo de entrada deshabilitado es inutilizable y no se puede hacer clic en dicho campo.
 OJO: El valor de un campo de entrada deshabilitado no se enviará al enviar el formulario (a
diferencia del readonly que sí es enviado)

 size
 Especifica el ancho visible, en caracteres, de un campo de entrada. Valor predeterminado es 20.
 Este atributo funciona con los siguientes tipos de entrada: texto, búsqueda, teléfono, url, correo
electrónico y contraseña.
 maxlength
 Especifica el número máximo de caracteres permitidos en un campo de entrada.
 Nota: Cuando se establece una longitud máxima, el campo de entrada no aceptará más del
número de caracteres especificado. Sin embargo, este atributo no proporciona ningún
comentario. Para mostrar mensajes de aviso al usuario se debe recurrir a JavaScript.

 min y max
 Especifica los valores mínimo y máximo para un campo de entrada.
 Los atributos min y max solamente funcionan con los siguientes tipos de entrada: número,
rango, fecha, fecha y hora local, mes, hora y semana.
 Se recomiendo usar los atributos máximo y mínimo juntos para crear un rango de valores
legales
 multiple
 Especifica que el usuario puede ingresar más de un valor en un campo de entrada.
 El atributo múltiple funciona con los siguientes tipos de entrada: correo electrónico y archivo.
 Dependiendo del tipo, tendrá una forma de funcionar diferente:
 En el tipo de entrada email, el usuario podrá incluir cero (salvo que sea required), una o más
direcciones separadas por comas (pero si no indica multiple no admitirá que sea una lista de
direcciones de correo electrónico separadas por comas).
 En el caso de un tipo file, el usuario podrá seleccionar uno o más archivos con el selector de
archivos (si se omite el atributo, el usuario solamente puede seleccionar un único archivo).
 El valor devuelvo por el file será un array y para el tipo email un string (a la hora de
gestionar este campo en el servidor)

 pattern
 Especifica una expresión regular con la que se verifica el valor del campo de entrada cuando
se envía el formulario.
 El atributo de patrón funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, url,
teléfono, correo electrónico y contraseña.
 Consejo: utilice el atributo de título global para describir el patrón para ayudar al usuario.
 Si queremos que solamente se insertan 4 dígitos y 3 letras en mayúsculas
como formato válido podemos definir el siguiente input (en caso de poner
otro en el momento de enviar los datos nos indicará error)
 placeholder
 Especifica una breve sugerencia que describe el valor esperado de un campo de entrada (un
valor de muestra o una breve descripción del formato esperado).
 La pequeña sugerencia se muestra en el campo de entrada antes de que el usuario ingrese
un valor.
 El atributo de marcador de posición funciona con los siguientes tipos de entrada: texto,
búsqueda, url, teléfono, correo electrónico y contraseña.
 required
 Especifica que se debe completar un campo de entrada antes de enviar el formulario (es
obligatorio su relleno)
 El atributo requerido funciona con los siguientes tipos de entrada: texto, búsqueda, url,
teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación,
radio y archivo.

 autofocus
 Especifica que un campo de entrada debe recibir el foco automáticamente cuando se carga
la página.

 autocomplete
 Especifica si un formulario o un campo de entrada debe tener el autocompletado activado o
desactivado.
 Autocompletar permite que el navegador prediga el valor. Cuando un usuario comienza a
escribir en un campo, el navegador debe mostrar opciones para completar el campo, según
los valores ingresados anteriormente.
 El atributo de autocompletar funciona con <form> y los siguientes tipos de <input>: texto,
búsqueda, url, teléfono, correo electrónico, contraseña, selectores de fechas, rango y color.
1.4. El elemento <select>

 Define una lista desplegable.

 Cada una de las opciones de la lista estará dentro de un elemento <option>
 Por defecto, el primer elemento de la lista desplegable está seleccionado
 Para definir otra opción preseleccionada se incluye el atributo selected (que no necesita
ningún valor) en el elemento <option>
 Es posible utilizar el atributo size para especificar el número de valores
visibles (por defecto muestra 1).

 Es posible usar el atributo multiple (sin valor) para indicar que es posible
seleccionar más de uno
1.5. El elemento <textarea>

 Define un campo de texto de entrada que permite más de una línea.

 El atributo rows especifica el número de líneas visibles del área de texto.
 El atributo cols especifica el ancho visible del área de texto.
 También es posible definir el tamaño del área de texto usando CSS.
 El texto que se incorpora entre <textarea> y </textarea> se muestra al cargar la página
 1.6. El elemento <button>
 Define un botón que realizará una acción al pulsar en él.
 Siempre se debe especificar el atributo type para el elemento button. Los
navegadores pueden usar diferentes tipos predeterminados para este elemento.
 Se diferencia es que button nos va a permitir ”incluir” html dentro, es decir, puedes
incluir iconos, imágenes, etc.
1.7. Elemento <fieldset> y <legend>

 El elemento <fieldset> se utiliza para agrupar datos relacionados en un

formulario.
 El elemento <legend> define una especie de título para los elementos del
<fieldset>
1.8. Elemento <datalist>

 Especifica una lista de opciones predefinidas para un elemento <input>

 Los usuarios verá una lista desplegable de las opciones predefinidas a
medidas que ingresan datos.
 Cada una de estas opciones se insertan dentro de un elemento <option>

 En el elemento <input> se deberá indicar en su atributo list, el atributo id del

elemento <datalist>
 2. Atributos del elemento <form>
 action
 El atributo define la acción que se realizará cuando se envíe el formulario.
 Por lo general, los datos del formulario se envían a un archivo en el servidor cuando el usuario
hace clic en el botón enviar.
 En el ejemplo visto anteriormente, los datos del formulario se envían a un archivo llamado
”pagina.php". Este archivo debe contener un script del lado del servidor que maneja los datos que
le llegan del formulario.
 NOTA: si se omite el atributo action, la acción se establece en la página actual.

 target
 Especifica dónde mostrar la respuesta que se recibe después de enviar el formulario.
 Puede tener uno de los siguientes valores
Valor Descripción
_blank Nueva ventana o pestaña
_self Ventana actual (valor por defecto)
_parent En el marco principal
_top En todo el cuerpo de la ventana
NombreFrame En un frame con dicho nombre
 method
 Especifica el método HTTP que se utilizará al enviar los datos del formulario.
 Los datos del formulario se pueden enviar en variables que se muestran a la URL (con
method= ”get") o como una transacción HTTP (con method= ”post”).
 El método por defecto es GET.
 GET:
 Agrega los datos del formulario a la URL, en pares de nombre/valor
 Nunca usarlo para enviar un GET para enviar datos confidenciales
 Los datos del formulario enviado son visibles en la URL
 La longitud de una URL es limitada (2048 caracteres) GET es bueno para datos no seguros, como
cadenas de consulta en Google
 POST:
 Agrega los datos del formulario dentro del cuerpo de la solicitud HTTP (los datos del formulario
enviado no se muestran en la URL)
 POST no tiene limitaciones de tamaño y se puede utilizar para enviar grandes cantidades de datos.
 Cómo y cuándo usar GET y POST: https://www.youtube.com/watch?v=640-EvTTl0Y
 autocomplete
 Especifica si un formulario debe tener autocompletado activado o desactivado.
 Cuando la función de autocompletar está activada, el navegador completa automáticamente
los valores en función de los valores que el usuario ha ingresado antes.
 Los valores que puede tener son on y off.
<form action=”pagina.php" autocomplete="on">

 novalidate
 Es un atributo booleano.
 Cuando está presente, especifica que los datos del formulario (entrada) no deben validarse
cuando se envían.
<form action=”pagina.php" novalidate>
3. Atributos del botón Submit (input)

 formaction
 Especifica la URL del archivo que procesará la entrada cuando se envíe el formulario.
 OJO: este atributo anula el atributo de acción del elemento <form>.
 El atributo formaction funciona también con el input image.
 En el siguiente ejemplo, /pagina2.php será el fichero encargado de procesar los datos que va a enviar
el formulario a pesar de estar indicado el action en el elemento form.

 Al igual que ocurre con formaction en el input submit que sobreescribe el action del
elemento form, los siguientes atributos tienen los mismos efectos: formmethod con
method, formtarget con target formnovalidate con novalidate y formenctype con
enctype