Scribd
Cargar
26 vistas11 páginas

Formularios HTML

Cargado por

ricardar.dev
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
26 vistas11 páginas

Formularios HTML

Cargado por

ricardar.dev
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 11

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.

También podría gustarte