Introducción
Los formularios HTML son una parte fundamental de la web, permitiendo a los usuarios interactuar con los sitios web introduciendo información. Esto puede variar desde un simple cuadro de búsqueda hasta una página de registro compleja. En este laboratorio, aprenderá los conceptos básicos de la creación de un formulario HTML, incluyendo cómo añadir campos de texto, etiquetas y botones de envío. Crearemos un formulario de contacto sencillo paso a paso.
El entorno del laboratorio ya ha iniciado un servidor web para usted. Puede escribir su código HTML en el archivo index.html y ver la vista previa en vivo haciendo clic en la pestaña Web 8080 en la esquina superior izquierda.
Crear etiqueta form con atributo action
En este paso, comenzaremos creando el contenedor para nuestros elementos de formulario. La etiqueta <form> se utiliza para crear un formulario HTML para la entrada del usuario. Todos los elementos del formulario, como campos de texto, botones y casillas de verificación, deben colocarse dentro de una etiqueta <form>.
El atributo action especifica a dónde se enviarán los datos del formulario cuando este se envíe. Para este laboratorio, lo dejaremos vacío ya que nos estamos centrando en la estructura HTML, no en el procesamiento del lado del servidor (back-end).
Por favor, abra el archivo index.html desde el explorador de archivos de la izquierda y añada el siguiente código.
<form action=""></form>
Después de añadir el código, puede cambiar a la pestaña Web 8080 para previsualizar la página. Aún no verá nada, ya que el formulario está actualmente vacío.
Añadir etiqueta input con type text para campo de texto
En este paso, añadiremos un campo para que los usuarios introduzcan texto. La etiqueta <input> es uno de los elementos de formulario más utilizados. Puede mostrarse de muchas maneras, dependiendo del atributo type.
Para crear un campo de entrada de texto de una sola línea, usamos type="text". Esto es perfecto para cosas como nombres de usuario, nombres o direcciones de correo electrónico.
Ahora, añadamos un campo de entrada de texto dentro de las etiquetas <form> en su archivo index.html.
<form action="">
<input type="text" />
</form>
Guarde el archivo y cambie a la pestaña Web 8080. Ahora debería ver un pequeño cuadro de texto en la página donde puede escribir.
Insertar etiqueta input con type submit para botón
En este paso, añadiremos un botón para permitir a los usuarios enviar el formulario. Podemos crear un botón de envío utilizando de nuevo la etiqueta <input>, pero esta vez con type="submit".
Cuando un usuario hace clic en este botón, los datos del formulario se envían al servidor especificado en el atributo action de la etiqueta <form>. Puede establecer el texto que se muestra en el botón utilizando el atributo value.
Añadamos un botón de envío a nuestro formulario en index.html.
<form action="">
<input type="text" />
<br /><br />
<input type="submit" value="Submit" />
</form>
También hemos añadido etiquetas <br><br> para crear un espacio vertical entre el campo de texto y el botón para una mejor disposición. Guarde el archivo y compruebe la pestaña Web 8080 para ver el nuevo botón "Submit".
Usar etiqueta label con atributo for para etiquetar
En este paso, añadiremos una etiqueta a nuestro campo de texto. La etiqueta <label> define una etiqueta para muchos elementos de formulario. Mejora la usabilidad y la accesibilidad, ya que al hacer clic en la etiqueta se enfocará el campo de entrada correspondiente.
Para conectar una <label> con una <input>, el atributo for de la <label> debe ser el mismo que el atributo id de la <input>.
Añadamos un id a nuestra entrada de texto y una <label> correspondiente en index.html.
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<input type="submit" value="Submit" />
</form>
Hemos añadido una label para "Name:" y la hemos enlazado al campo de entrada usando id="username" y for="username". También hemos añadido un atributo name a la entrada, que es importante para identificar los datos cuando se envía el formulario.
Guarde el archivo y vea los cambios en la pestaña Web 8080. Ahora, si hace clic en el texto "Name:", el cursor se moverá automáticamente al cuadro de texto.
Añadir etiqueta textarea para entrada multilínea
En este paso, añadiremos un área de texto más grande para que los usuarios escriban un mensaje. Mientras que <input type="text"> es para una sola línea de texto, la etiqueta <textarea> se utiliza para la entrada multilínea.
Puede controlar el tamaño de un <textarea> con los atributos rows y cols, que especifican el número visible de líneas y caracteres por línea, respectivamente.
Añadamos un <textarea> para un mensaje a nuestro formulario, completo con su propia <label>. Actualice su archivo index.html con el código final a continuación.
<form action="">
<label for="username">Name:</label><br />
<input type="text" id="username" name="username" />
<br /><br />
<label for="message">Message:</label><br />
<textarea id="message" name="message" rows="4" cols="30"></textarea>
<br /><br />
<input type="submit" value="Submit" />
</form>
Ahora nuestro formulario tiene un campo de nombre y un área de mensaje. Guarde el archivo y eche un vistazo al formulario completado en la pestaña Web 8080. Ahora tiene un formulario HTML funcional y bien estructurado.
Resumen
¡Felicitaciones! Ha construido con éxito un formulario HTML básico. En este laboratorio, aprendió a:
- Usar la etiqueta
<form>como contenedor para los elementos del formulario. - Crear un campo de texto de una sola línea con
<input type="text">. - Crear un botón de envío con
<input type="submit">. - Mejorar la accesibilidad y la usabilidad asociando una
<label>con un campo de entrada utilizando los atributosforeid. - Añadir un área de texto multilínea con la etiqueta
<textarea>.
Estos son los bloques de construcción fundamentales para crear formularios interactivos en la web. Ahora puede explorar otros tipos de entrada y atributos de formulario para crear formularios más complejos y potentes.
