Creando formularios, cajas de password, botones, etc

Continuamos con el modulo 3 del Curso de HTML5 desde 0, donde vamos a aprender a crear cajas de password, botones radiales o de radio, checkbox o casillas de verificación y botones de envío y de reseteo. Pero antes de meterte de lleno en esta clase, deberías dar un repaso, si no lo has hecho a la clase Estructura de los formularios. Es una clase imprescindible para entender lo que a continuación vamos a desarrollar.

Cajas de password

La caja de tipo contraseña es muy similar a la caja de tipo texto, simplemente a type="", se le da el valor "password".

¡¡RECUERDA!! Los atributos name="" y los id="" no pueden contener caracteres especiales, con lo cual no pueden contener la letra ñ.

Una practica muy recomendable es encerrar cada campo con una etiqueta <p>, seamos semánticos por favor.

<form action="nombre_del_archivo" method="post">
<p>
<label for="nombre">Ingrese su nombre:</label>
</p>
<input type="text" name="nombre" id="nombre" size="30" maxlength="20">
<p>
<label for="contraseña">Ingrese su contraseña:</label>
</p>
<input type="password" name="contrasena" id="contrasena" size="30" maxlength="10">
</form>

Vista en Google Chrome

Botones radiales o de radio

La caja de tipo radio es muy similar a la caja de tipo password, simplemente a type="", se le da el valor "radio". Este tipo de campos, nos permiten mostrar una serie de opciones donde podemos elegir solo una de ellas. Para que una de las opciones este seleccionada por defecto, solo tendríamos que incluir al final de <imput> el atributo checked.

<form action="nombre_del_archivo" method="post">
<p>
<input type="radio" name="genero" id="genero-hombre" value="Hombre">
<label for="genero-hombre">Hombre</label>
<input type="radio" name="genero" id="genero-mujer" value="Mujer" checked>
<label for="genero-mujer">Mujer</label>
</p>
</form>

Vista en Google Chrome

Creando checkbox o casillas de verificación

Vamos a usar este tipo de campo cuando queramos que el usuario pueda marcar más de una opción. Este campo es muy similar al anterior pero nos permite marcar diferentes opciones. Podemos marcar todas las opciones disponibles, una de ellas o incluso ninguna de ellas. En este caso al atributo type="" le damos el valor "checkbox".

<form action="nombre_del_archivo" method="post">
<p>
<input type="checkbox" name="dias" id="lunes" value="lunes">
<label for="lunes">Lunes</label>
<input type="checkbox" name="dias" id="martes" value="martes">
<label for="martes">Martes</label>
<input type="checkbox" name="dias" id="miercoles" value="miercoles">
<label for="miercoles">Miercoles</label>
<input type="checkbox" name="dias" id="jueves" value="jueves">
<label for="jueves">Jueves</label>
</p>
</form>

Vista en Google Chrome

Creando los botones de envío y de reseteo

El botón de envió también se genera usando <imput> y dando el valor "submit" al atributo type="". El segundo campo <imput> es el que nos va a generar la limpieza del formulario y siempre debe estar incluido en dichos formularios, para mayor comodidad del usuario.

<form action="nombre_del_archivo" method="post">
<p>
<input type="submit" value="Envia tus datos">
<input type="reset" value="Borrar datos">
</p>
</form>

Vista en Google Chrome

Como veis el código esta interrumpido por mis comentarios, pero era imprescindible ir explicando cada campo para entenderlo al 100%. Para que podáis copiar el código de manera mas sencilla os lo dejo completo a continuación para que lo probéis en el navegador.

Conclusiones

No hay muchas conclusiones que sacar, solo que hemos aprendido a crear un formulario de contacto bastante completo. En este caso lo hemos creado con casillas de nombre y contraseña, selección de genero, selección de días y botones de envió y reseteo de datos. No os preocupéis que esto no se queda aquí, este modulo va dedicado íntegramente a los formularios de contacto con HTML5.

No tengo nada más que añadir en esta clase así que os invito a continuar con la siguiente, va a ser muy interesante. Me gustaría pedirte que compartas esta clase con tus amigos, ya que de esa manera otras personas se beneficiaran de estos conocimientos al igual que lo has hecho tu. Si te apetece regalanos un me gusta en la página de Facebook y si te apetece únete a la comunidad de Facebook.

Prohibida la distribución de este articulo incluyendo las imágenes,
sin la autorización del autor. Todos los derechos reservados ©2018