Formularios en HTML – Cómo crear y personalizar

Exploremos cómo crear formularios en HTML, cuáles son las etiquetas para crear campos y los atributos correspondientes para agregar características y funcionalidad, además veremos ejemplos concretos de formularios hechos en html.

¡Perfecto! Ahora aprenderás a crear formularios, es tan sencillo ¡ya lo verás!

Los formularios son elementos de gran importancia y utilidad al momento de recopilar información de nuestros usuarios a través de una página web, es por ello que considero de gran importancia dedicar una lección exclusiva para su desarrollo ¡Empecemos!

Cómo crear Formularios en HTML

Crear un formulario en html implica construir los campos de información, estos pueden ser: campos de texto, de número, selectores, desplegables, casillas de verificación y entre otras más.

Como ya es sabido, en html se emplean etiquetas para crear los diversos elementos existentes, y el caso de los formularios no es la excepción, para crear los componentes del formulario HTML también haremos uso de una variedad de etiquetas y atributos, los mismos que conoceremos a continuación.

Etiqueta <form>

Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.

<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción, registro, login, encuesta, etc.

<form>
…Aquí irán los campos del formulario...
</form>

Etiqueta <input>

Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que deseas obtener. Por ejemplo:

<form> 
  Tu nombre: <input/> 
  Tu apellido: <input/> 
</form>

Resultado:

¡Ah! Espera, ¿pero si queremos que sea una casilla de verificación? O ¿un campo de número? O lo que sea, y además no siempre se utiliza la etiqueta  <input>… bueno no nos detengamos y sigamos aprendiendo.

Existen varios tipos campos para formularios HTML y también debemos especificar que tipo de campo es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE a continuación.

Atributo type

El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando. Veamos algunos valores que puede tomar el atributo type en un formulario HTML:

Ejemplo de formulario html con atributo type

En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta de salto de linea <br/>, veamos:

<form>
Nombre:<input type="text"/>  <br/><br/>
Apellidos:<input type="text"/>   <br/><br/>
Contraseña: <input type="password"/>  <br/><br/>
casilla de verificación: <input type="checkbox"/> <br/><br/>
casilla de selección: <input type="radio"/>  <br/><br/>
selección de archivo:  <input type="file">  <br/><br/>
botón de envio: <input type="submit"> 
</form>

Resultado:

Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la etiqueta html <input>. Pero existen otros campos que no utilizan <input>, sino etiquetas específicas como la etiqueta <select> y <textarea>, conozcamos de que se tratan.

Crear una desplegable con opciones HTML

Ahora aprenderemos a realizar desplegables en formularios, seguramente viste esos campos en las que existe un desplegable con varias opciones dentro para seleccionar una de ellas, pues ahora aprenderás a hacerlo.

Etiqueta <select>

Utilizaremos la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que buscamos buena presentación de espacio en el formulario.

Etiqueta <option>

Utilizaremos la etiqueta <option> dentro de la etiqueta <select>.  <option> contiene una opción del desplegable y podemos implementar la cantidad de opciones que deseemos.

Ejemplo de un campo desplegable en formularios HTML

El ejemplo a continuación trata de un desplegable con 5 opciones de colores para elegir, veamos:

<form>

ELIGE UN COLOR:<select>
<option>Blanco</option>
<option>Negro</option>
<option>Azul</option>
<option>Rojo</option>
<option>Verde</option>
</select>

</form>

Resultado:

Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la opción seleccionada.

Atributos para etiqueta <select> en formularios html

• Atributo size.- Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su valor en números.
• Atributo multiple.- Utiliza el atributo multiple con valor también multiple para permitir que el desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.

Crear un campo de texto grande en formularios HTML

Un campo de texto con varias lineas disponible en el formulario puede ser necesario para permitir a nuestros usuarios enviar extensos textos y para ello haremos uso de la etiqueta <textarea>.

Etiqueta <textarea>

La etiqueta <textarea> se utilizara para crear un área de texto de varias líneas, puede servirnos por ejemplo para un capo de mensaje, veamos un ejemplo concreto:

<form>
Nombre:
  <input type="text"/>  <br/><br/>
Correo electrónico:
  <input type="email"/>  <br/><br/>
Tu mensaje: 
  <textarea name="mensaje"> </textarea> <br/><br/>
  <input type="submit" value="Enviar ahora"/>
  
</form>

Resultado:

Si observamos, el campo de texto multilinea posee en la esquina inferior derecha un asistente que permite ampliar el campo con el cursor.

Atributo action

El valor del atributo action será la URL de la página que queremos que cargue después de que se envíe la información de un formulario. Este atributo va dentro de la etiqueta <form> y lo podemos utilizar si deseamos.

<form action="URL">

Atributo method       

El atributo method puede tomar como valores a GET o POST y esto indica el método http que será utilizado cuando se envíe la información.

Ejemplo:

<form action="URL" method="get">
<form action="URL" method="post">

• Cuando se usa el valor get, los datos del formulario podrán ser vistos en la dirección de la página.
• Cuando se usa el valor post los datos enviados no serán visibles en la dirección de la página.

Por seguridad se recomienda utilizar usar el valor post, para datos sensibles.

Atributo name

Utiliza el atributo name para ponerle un nombre al formulario

<form name="miformulario" action="URL" method="post">

Para que el formulario funcione correctamente utilizaremos el atributo name  para cada campo del formulario, así será posible recibir correctamente los datos enviados.

<form>
Nombre: <input name="nombre"  type="text"/>  <br/><br/>
Correo electrónico:   <input name="correo" type="email"/>  <br/><br/>
Tu mensaje:  <textarea name="mensaje"> </textarea> <br/><br/>
  <input type="submit" value="Enviar ahora"/>
  
</form>

El atributo name será necesario ara procesar la información de cada campo y que estas lleguen a su destino correctamente.

Hemos aprendidos a crear un formulario en html estático y ademas de muchos detalles, sin embargo aun no podemos enviar y recibir información a través de ella, para ello es necesario que los datos se envíen a un servidor y ser procesados por la misma, esto ocurre gracias a otro lenguaje de programación como puede ser PHP y eso aprenderemos en su respectivo curso, por ahora esto es más que suficiente.

¡Oye! debes crear varios formularios para no olvidar todo lo aprendido, ¡Vamos!

[popup_anything id=»4350″]