Los formularios HTML son esenciales para comunicarte con los usuarios y a pesar de que hoy existen muchas opciones para interactuar de diversas plataformas, el poseer tu propio método de comunicación adaptado a tus necesidades da un plus a tu web.
Existen formularios simples que solo tienen elementos para agregar el nombre, correo electrónico y mensaje propiamente tal, pero puedes encontrar otros que te pueden solicitar hasta “cuantas veces te lavas los dientes en el día”, desde mi experiencia recomiendo ofrecer un formulario lo más sencillo y menos invasivo posible.
Etiquetas para crear formularios
La etiqueta para decirle al navegador que estas presentado un formulario es <form> donde dentro de ella puedes agregar cualquier tipo de elemento en HTML como Hipervínculos, Tablas, Listas, Imágenes, entre muchas más, pero las más utilizadas las detallare a continuación:- <label> = Necesario para identificar el elemento solicitado en el formulario o “id” también “for”.
- <input> = Se usa para crear controles interactivos para formularios basados en la web que reciban datos del usuario.
- <textarea> = Representa un control para mostrar un texto.
<form>
<label>Nombre:</label>
<input>
<label>Correo electrónico:</label>
<input>
<label>Mensaje:</label>
<textarea></textarea>
<input value="Enviar">
</form>
Valores y atributos para etiquetas de los elementos <form>, <label>, <input> y <textarea>
Para que el formulario anterior funcione correctamente debemos agregar los valores y atributos adecuados a cada sección utilizando HTML. A continuación te detallo los necesarios para un formulario simple:Valores y atributos para <form>
Este elemento es un contenedor es decir define que la sección es un formulario y dispone de 9 atributos a utilizar siendo los más utilizados solamente los dos, pero con la llegada del HTML5 se agrego un valor que estoy utilizando en otra web.“autocomplete” que indica cuales de los controles en este formulario puede tener sus valores automáticamente completados por el navegador. Esta configuración puede ser sobreescrita por un atributo “off” o “on”.
Por otra parte los dos más utilizados son:
- action = Define la ubicación (URL) donde se envían los datos que el formulario ha recopilado cuando se validan, es decir el documento .php que mencione al inicio de la entrada.
- method = define con qué método HTTP se envían los datos (generalmente get o post).
Como en esta entrada no te enseñare a crear esta página .php te muestro como debería quedar la etiqueta form:
<form action="pagina.php" method="get" autocomplete="on"></form>
Valores y atributos para <label>
Siempre ha tenido un valor que es “for”, pero con HTML5 se agregaron dos más que a mí en lo personal no me llaman la atención, ya que no son indispensables para crear un label y tampoco hacen más fáciles las cosas para el usuario.- for = El ID del elemento de formulario etiquetable relacionado en el mismo documento que el elemento label. En palabras de simples mortales indica que label esta relacionado con un input del formulario mediante un ID.
<label for="nombre">Nombre:</label>
Valores y atributos para <input>
Aquí es donde esta el fuerte del formulario y es donde el usuario teclea la información que te enviara el formulario. Intentare no extenderme mucho acá y solo te enseñare lo esencial ya que lo valores y atributos para este elementos son muchos.- type = Es el tipo de control a mostrar. Su valor predeterminado es text, pero los otros son: button, checkbox, color, date, datetime, email, password, url y más. En un curso de HTML medio o avanzado los detallare todos.
- id = Es el texto que se asocia el input a otro elemento del formulario.
- name = El nombre del control, el cual es enviado con los datos del formulario.
- placeholder = Un texto de ayuda para el usuario dentro del input.
<form action="pagina.php" method="get" autocomplete="on">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="user_name" placeholder="tunombreaquí">
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="user_mail" placeholder="tucorreoaquí">
</form>
Valores y atributos para <textarea>
El elemento textarea son muy parecidos al input utilizando muchos valores parecidos. Para no extender tanto esta entrada dejo de inmediato el código HTML utilizando los mismos valores anteriores:<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="user_message"></textarea>
<input type="submit" value="Enviar">
Formulario completo
Para evitar la des-configuración del formulario siempre debes agregar saltos de linea y asegurarte de que todo este donde debe . El código del formulario completo seria el siguiente escrito normalmente y enchulado un poco más con html simple:<form action="pagina.php" method="get" autocomplete="on">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="user_name" placeholder="tunombreaquí">
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="user_mail" placeholder="tucorreoaquí">
<label for="mensaje">Mensaje:</label>
<textarea id="mensaje" name="user_message"></textarea>
<input type="submit" value="Enviar">
</form>
<form action="pagina.php" method="get" autocomplete="on"><fieldset>
<legend>Formulario en HTML</legend>
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="user_name" placeholder="tunombreaquí">
<br/><br/>
<label for="correo">Correo electrónico:</label>
<input type="email" id="correo" name="user_mail" placeholder="tucorreoaquí">
<br/><br/>
<label for="mensaje">Mensaje:</label><br/>
<textarea id="mensaje" name="user_message"></textarea>
<br/><br/>
<input type="submit" value="Enviar">
</fieldset>
</form>
Más del Curso de HTML:
- Introducción
- Enlaces
- Tablas
- Listas
- Imágenes
- Formularios (solo la arquitectura con HTML) (estás aquí)
- Layout
- Extra: Atributo HTML LazyLoading Nativo