1. Formularios en HTML

Los formularios web son uno de los principales puntos de interacción entre un usuario y un sitio web o aplicación. Los formularios permiten a los usuarios la introducción de datos, que generalmente se envían a un servidor web para su procesamiento y almacenamiento.

Dentro de los campos que podemos incluir en formularios HTML encontramos los siguientes:

Campos de textos
Contraseñas
Checkbox
Radios
Botones de envío
Botones de borrado
Ficheros
Campos Ocultos
Combos de selección

2. Etiquetas para Formularios

Veamoslas etiquetas básicas para crear un formulario de la forma más completa posible:

Etiqueta	Descripción	Tipo
<form>	Etiqueta contenedora que define un formulario	Bloque
<label>	Indica la descripción de un campo	linea
<input>	Define un campo de entrada, acompañado con el atributo type=""	linea
<select>	Define una lista desplegable	linea
<option>	Define una opción de la lista desplegable	linea
<textarea>	Define un campo de varios lineas de texto	linea
<buttom>	Define un boton con una funcion propia	linea
<fieldset>	Permite agrupar los campos de un formulario	Bloque
<legend>	Crea un titulo para un grupo de campos	linea

3. Tipo de Campos en el Formularios

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:

Text

Campo para ingresar un texto corto

Nombre

<label>Nombre</label> <!--descripción del campo-->
<input type="text" placeholder="Escriba su Nombre"> <!--crea un campo de texto corto-->

Email

Campo para ingresar una dirección de correo electronico validado

<label>Email</label>
<input type="email" placeholder="nombre@empresa.com">

Password

Campo para ingresar una contraseña, cuyo valor permanece oculto. Se puede usar el atributo maxlength para especificar la longitud máxima del valor que se puede introducir

Contraseña

<label>Contraseña</label>
<input type="password" placeholder="*********">

Number

Campo para ingresar solo números

N° de Identificación

<label>N° de Identificación</label>
<input type="number" placeholder="Números sin espacios">

Tel

Campo para ingresar un número de telefono

N° de Telefono

<label>N° de Telefono</label>
<input type="tel" placeholder="Números sin espacios">

Date

Campo para ingresar una fecha dia/mes/año ó viceversa

Fecha de Nacimiento

<label>Fecha de Nacimiento</label>
<input type="date" placeholder="dd/mm/aaaa">

Radio

Campo de selección con unica respuesta, Se debe usar el atributo value para definir el valor que se enviará por este elemento

Sexo

Masculino Femenino

<label>Sexo</label>
<input type="radio" value="M"> <span>Masculino </span>
<input type="radio" value="F"> <span>Femenino </span>

Select

Campo de lista de selección y en ella solo se selecciona una opcion, Se debe usar el atributo value para definir el valor que se enviará por este elemento

Estado Civil

<label>Estado Civil</label>
<select name="estado_civil" id=""> 
   <option value="0">-Seleccione- </option>
   <option value="1">Casado </option>
   <option value="2">Soltero </option>
   <option value="3">Unión Libre </option>
   <option value="4">Separado</option>
   <option value="5">Viudo</option>
</select>

Select multiple

Campo de lista de selección en cual se puede seleccion varias opciones, Se debe usar el atributo value para definir el valor que se enviará por este elemento

Formación

<label>Formación</label>
 <select name="formación" id="" multiple> 
    <option value="1">Complementario </option>
    <option value="2">Técnico </option>
    <option value="3">Técnologo </option>
    <option value="4">Especialización</option>
 </select>

Checkbox

Casilla de selección con multiples opciones, Se debe usar el atributo value para definir el valor que se enviará por este elemento

Formación

Técnico Técnologo Especialización

<label>Formación</label>
<input type="checkbox" value="Técnico"> <span>Técnico </span>
<input type="checkbox" value="Técnologo"> <span>Técnologo </span>
<input type="checkbox" value="Especialización"> <span>Especialización </span>

File

Campo que permite al usuario seleccionar un archivo de un dispositivo y subirlo al servidor.

Archivo

<label>Foto</label>
<input type="file" >

Textarea

Comentarios

<label>Comentarios</label>
<textarea rows="3" placeholder="Escriba aqui su comentario..."></textarea>

4. Botones de Control

Por último, y no por ello menos importante, tenemos los botones de envío de formulario.

Tenemos varios tipos de botones que actúan sobre el formulario:

Botón de envío de formulario

El botón <input type="submit" > sirve para enviar el formulario una vez el usuario ha rellenado todos sus campos y pulsa en este botón

Nombre

<form action="">
   <label>Nombre</label>
   <input type="text" placeholder="Escriba su Nombre">
   <label>Email</label>
   <input type="email" placeholder="nombre@empresa.com">

   <input type="submit" value="Enviar"> <!--Boton para enviar los datos-->
</form>

Botón de borrar formulario

El botón <input type="reset" > borra completamente el formulario y reestablece todos sus campos de entrada de datos a sus valores por defecto iniciales.

Nombre

<form action="">
   <label>Nombre</label>
   <input type="text" placeholder="Escriba su Nombre">
   <label>Email</label>
   <input type="email" placeholder="nombre@empresa.com">

   <input type="submit" value="Enviar"> 
   <input type="reset" value="Cancelar"> <!--Boton para borra los datos-->
</form>

Botón sin funcionalidad

Por último, tenemos el botón <input type="button" > o la etiqueta <button>, que en ambos casos añade un botón sin ninguna funcionalidad por defecto

Nombre

<form action="">
    <label>Nombre</label>
    <input type="text" placeholder="Escriba su Nombre">
    <label>Email</label>
    <input type="email" placeholder="nombre@empresa.com">

    <input  type="button" value="Click" onClick="alert('¡Hola, soy button!')"> <!--Boton sin función especifica-->
    <input type="reset" value="Enviar"> 
 </form>

Ejemplo Practico: Formulario de Datos Personales

Utilizaremos un nuevo ejercicio para crear un formulario y le añadimremos los campos mas importantes:

WebApp para Clinica Dental

Desarrollado por ADSI

Información del Paciente

Nombre del Paciente

Tipo de Documento

N° de Documento

Fecha de Nacimiento

Sexo

Masculino Femenino

Correo del Paciente

N° de Celular

Observación Medica del Paciente

      
<!DOCTYPE html>
<html lang="es">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Clinica Dental</title>
</head>
<body>
<div style="text-align: center; "> <!--la propiedad text-align centra elementos linea-->
<img height="192px" src="img/dental_clinic.svg" alt="Logo Dental Clinic" >
</div>
<p>WebApp para Clinica Dental</p>
<p>Desarrollado por ADSI</p>
<h2 style="color: #2b6cb0; " >Información del Paciente<h2> <!--la propiedad color, colorea el texto-->
<hr>

<form action=""> <!--Creamos el formulario -->
   <div > <!--la etiqueta div es una etiqueta divisoria de contenido -->
      <label >Nombre del Paciente</label>
      <input type="text" placeholder="Escriba su Nombre"> <!--placeholder crea un texto provisional en un elemento input-->
   </div>
   <div>
   <label >Tipo de documento</label>
      <select >
         <option>-Seleccione-</option>
         <option>Cedula de Ciudadania</option>
         <option>Tarjeta de Identidad</option>
         <option>Registro Civil</option>
         <option>Cedula de Extranjeria</option>
         <option>Passaporte</option>
      </select>
   </div>
   <div>
      <label >N° de Documento</label>
      <input type="number" placeholder="Números sin puntos">
   </div>
   <div>
      <label >Fecha de Nacimiento</label>
      <input type="date" placeholder="dd/mm/aaaa">
   </div>
   <div>
   <label >Sexo</label>
      <input type="radio" value="M" ><span>Masculino</span>
      <input type="radio" value="F" ><span>Femenino</span>
   </div>
   <div>
      <label >Correo del Paciente</label>
      <input type="email" placeholder="ejemplo@empresa.com">
   </div>
   <div>
      <label >N° de Celular</label>
      <input type="tel" placeholder="número sin espacios">
   </div>
   <div>
      <label >Observación Medica del Paciente</label>
      <br>
      <textarea  rows="3" placeholder="Escriba aqui su comentario..."></textarea>
   </div>

   <div >
      <input type="submit" value="Enviar">
      <input type="reset" value="Cancelar">
   </div>
  
</form>

</body>
</html>

Actividad #9. HTML5: ETIQUETAS PARA FORMULARIOS

Ahora que ya sabes insertar formularios en HTML es el momento de que empieces a practicar, aunque no es nada difícil, practica para desarrollar la habilidad en el aprendizaje.

Descargar Instrucciones: Actividad 9 Formulario en HTML5

Te ha resultado util esta guia de aprendizaje ?

Que tal el contenido?