En este post mostraré cómo hacer un formulario en HTML (incluyendo alguna noverdad de HTML5). Los formularios son un conjunto controles de HTML que permiten recoger información de los que visitan la web. Esos controles son campos de texto, botones, etiquetas… En este post se tratarán los elementos más básicos.
El formulario que vamos a crear va a ser uno que recoja los datos de un trabajador, empezamos abriendo la etiqueta <form>:
|
1 |
<form id="formulario" action="#"> |
En un formulario en HTML el <form> recoge todos los widgets conocidos como controles o campos. El atributo action indica al navegador donde se procesarán los datos recogidos, en este caso pondremos como valor “#” ya que esto es solo un ejemplo y no va a ser necesario procesarlos.
Etiqueta fieldset
Un buen formulario en html divide los tipos de datos recogidos en <fieldset> y empezaremos por el contacto:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<fieldset> <legend>Contacto</legend> <label class="contacto" for="nombre">Nombre <em>*</em></label> <input id="nombre"><br> <label class="contacto" for="direccion">Dirección <em>*</em></label> <input id="direccion"><br> <label class="telefono" for="telefono">Teléfono</label> <input id="telefono" placeholder="xxx-xx-xx-xx"><br> <label class="contacto" for="email">Email <em>*</em></label> <input id="email" placeholder="ejemplo@correo.com"><br> </fieldset> |
El <legend> daría título al <fieldset>. Dentro de este están los campos de texto <input> con sus correspondientes etiquetas <label>.
Etiqueta select y textarea
Continuamos recogiendo los datos personales en nuestro formulario en HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<fieldset> <legend>Información personal</legend> <label class="personal" for="edad">Edad<em>*</em></label> <input id="edad"><br> <label class="personal" for="sexo">Sexo</label> <select id="sexo"> <option value="hembra">Mujer</option> <option value="macho">Hombre</option> </select><br> <label class="personal" for="comentarios">Que otros trabajos realizaste?</label><br> <textarea id="comments"></textarea> </fieldset> |
Aquí ya hay 2 nuevos elementos. El <select>, que contiene <option>, proporciona una lista de valores a escoger de los cuales solo puede seleccionar uno. El valor del <option> será dado por el atributo value. El texto que está entre <option> muestra lo que el usuario ve, pero no sería el valor escogido. En este caso el valor seleccionado no sería hombre o mujer sino hembra o macho.
El <textarea> es un campo de texto grande que permite al usuario introducir múltiples líneas de texto.
Los checkbox y radio buttons
Para terminar el formulario en HTML vamos agregar checkbox y radio buttons que recogerán los lenguajes de programación que usa y su área de trabajo.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<fieldset> <legend>Lenguajes de programación</legend> <label class="lenguaje" for="html"><input id="html" name="lenguaje[]" type="checkbox">HTML</label> <label class="lenguaje" for="css"><input id="css" name="lenguaje[]" type="checkbox">CSS</label> <label class="lenguaje" for="php"><input id="php" name="lenguaje[]" type="checkbox">PHP</label> <label class="lenguaje" for="asp"><input id="asp" name="lenguaje[]" type="checkbox">ASP.NET</label> <label class="lenguaje" for="java"><input id="java" name="lenguaje[]" type="checkbox">Java</label> <label class="lenguaje" for="ruby"><input id="ruby" name="lenguaje[]" type="checkbox">Ruby</label> </fieldset> <fieldset> <legend>Área de trabajo</legend> <label class="area" for="analista"> <input id="analista" name="puesto" type="radio">Analista </label> <label class="area" for="programador"> <input id="programador" name="puesto" type="radio">Programador </label> </fieldset> </form> |
El atributo type permite indicar que tipo de input es, si radio o checkbox. También está el valor text para indicar que el input es un campo de texto, pero en HTML5 no es necesario.
Si os fijáis tanto los checkbox y radios están dentro de <label>. Esto sirve para que a la hora de seleccionar uno de ellos baste con clicar en el nombre, facilitando la selección. Sin embargo, esto funciona si el valor de for del label coincide con el id del input.
En cuanto el atributo name actúa como una clase agrupador. A la hora de procesar los valores del formulario, en el caso del checkbox lenguaje podría devolver más de un valor (El name es un array), sin embargo, el radio puesto solo puede devolver 1.
Un poco de estilo
A continuación, vamos a darle un poco de vidilla al formulario en HTML agregando las siguientes reglas de estilo en <style>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.contacto, .personal { display: inline-block; width: 130px; margin-bottom: 8px; } label[for=comentarios] { width: auto; } em { color:red; } |
Las clases contacto y personal comparten las mismas reglas gracias a la coma. De no tenerla haría referencia a los elementos de la clase .personal dentro de .contacto.
Para cambiar el ancho de label hay que cambiar el display ya que un label es un objeto en línea (inline) y no permite cambiar el ancho. También hay un margen en la parte inferior para que los campos no estén pegados.
El selector label[for=comentarios] selecciona el label cuyo atributo for tenga el valor comentarios. El width:auto establece el ancho que ocupe el elemento.
Y por último los elementos <em> tendrán la letra de color rojo.
El formulario debería tener un aspecto como este:
Resultado final del formulario
Atributo placeholder
Ahora usaremos lo que se llama placeholder o marcador. Es un texto que se inserta dentro de los campos de texto, generalmente para indicar al usuario como es el formato de lo que debería escribir dentro. También es llamado watermark o marca de agua por tener un color muy ligero y grisáceo.
Para esta ocasión se usarán en los inputs email y teléfono.
|
1 2 3 4 5 |
<label class="contacto" for="telefono">Teléfono</label> <input id="telefono" placeholder="xxx-xx-xx-xx"><br> <label class="contacto" for="email">Email <em>*</em></label> <input id="email" placeholder="ejemplo@correo.com"><br> |
Y hasta aquí el tutorial de hoy en lo referido a formularios en HTML. Como siempre, espero que os haya servido de ayuda y mañana explicaré como validar este formulario. Saludos 😉