Formularios en HTML
Creado por Óscar y Xurxo
Cómo comenzar un formulario
Crear tu documento de texto y utilizar la etiqueta <form>
Esta etiqueta tiene que tener su cierre de </form>
Encontramos varios elementos estructurales dentro de estos:
● Action: Destino de los datos recopilados en el formulario
● Method: Como llegará el formulario “post” y “get”. Con el “get” se verían los datos en la URL
y con el “post” no.
ejemplo de etiqueta: <form action=”/my-handling-form-page” method=”post”></form>
Elementos principales: Label
<label> crea una interfaz para el usuario, va acompañado de atributos
como “for” que indica la utilidad de ese elemento del formulario y debe
coincidir con el atributo de “id” del input asociado
</label> cierra el label
EJ: <label for=”Nombre”> Nombre: </label>
Elementos principales: Inputs
<input> Elemento para crear los campos de entrada de datos:
● Texto: aparece como <input type=”text”> por defecto de una sola línea,
también <input maxlength=”5”> limita los caracteres a introducir, <input
size=”10”> para indicar el espacio del campo y <input “value”> para que
aparezca un texto por defecto en un campo
● Number: <input type=”number”> crea un campo para introducción de
números. (No usar para teléfonos, DNI…)
● Fecha: <input type=”date”> crea un campo de introducción de fechas
● Email : <input type=”email”> define un campo de entrada para emails
Inputs
● Caja de secciones: <input type=”checkbox”> crea una casilla de
verificación
● Marcar una opción: <input type=”radio” name=”Opciones”>
Todas tienen que tener el mismo name y cada respuesta su label.
● Contraseña: <input type=”password”> Abre un campo donde
oculta los caracteres
Ejemplos:
Botones
● Botón de envió: <button
type=”submit”>Enviar</button> opción para enviar el
form
● Botón de reseteo: <button type=
“reset”>Reiniciar</button> opción para restablecer
valores
Ejemplos:
Atributos
● for: Va dentro de label y debe coincidir con el atributo “id” de la etiqueta input para que vayan asociados
● name: Este atributo se utiliza para identificar el campo en el servidor que recibe los datos.
● id: Atributo que va dentro de <input> y debe coincidir con el “for” de <label> para asociarlos
<label for="Nombre">Nombre</label>
<input type="text" name="Nombre" id="Nombre">
● value: Atributo da sentido a <label> a la hora de enviar formulario, para ver qué opción se eligió en una opción mú
de “radio”.
También vale para crear un texto predeterminado en un campo
<input type=”submit” value=”Enviar”>
● Placeholder: Crea un texto predeterminado mientras no se rellena el campo
● required: Atributo que el campo de entrada es obligatorio para enviar el formulario.
<Label for="Fecha">Fecha</Label> <input type="date" name="Fecha" id="Fecha" Required>
Ejercicio
● Crea un formulario y pon una etiqueta con un campo de nombre y
su input.
● Pon una etiqueta con un campo de fecha y su input y que sea un
campo obligatorio de rellenar.
● Pon una etiqueta con una casilla de verificación que se llame
“Política de privacidad y Copyright”
Ejercicio
● Crea una etiqueta de contraseña que tenga de máximo 9
caracteres, sea obligatorio enviarlo y el tamaño de la caja sea 10.
● Haz una etiqueta de una pregunta con varias respuestas y que solo
puedas marcar una de ellas.
● Crea un botón para enviar el formulario que sea una imagen.