Web.HTML.Formularios.

Published in

Enredando con la WEB.

7 min readAug 31, 2016

Los formularios se utilizan para darle al usuario un interfaz para rellenar datos y se crea con la siguiente etiqueta:

<form>
    elementos del formulario
</form>

Elementos de un formulario.

Son los diferentes tipos de campos de entrada que se puede usar en un formulario. Estos son algunos tipos:

Texto.

<!DOCTYPE html>
<html>
<body>  <form>
    Nombre:<br>
    <input type="text" name="Nombre">
    <br>
    Apellidos:<br>
    <input type="text" name="Apellidos">
  </form> </body>
</html>

input type=”text”. Se define el campo de entrada, que en este caso es tipo texto.
name. Especifica como se va a llamar el campo.

Radio.

Este tipo de campo no necesita escribir nada, muestra al usuario una serie limitada de opciones y éste debe elegir sólo uno.

<!DOCTYPE html>
<html>
<body>  <form>
    <input type="radio" name="genero" value="hombre" checked> hombre<br>
    <input type="radio" name="genero" value="mujer"> Mujer<br>
    <input type="radio" name="genero" value="otros"> Otros
  </form></body>
</html>

input type=”radio”. Se crea un campo tipo radio. Se deben crear un input por cada opción que tenga la lista de opciones.
name. Se especifica el nombre del campo. En este caso como hay más de una opción, el nombre será el mismo en todos.
value. Especifica el valor de cada opción. Cada input debe tener un valor distinto que se guardará en el nombre del campo.
checked. Esta opción sirve para que marque una opción por defecto en el campo.

Botón de enviar.

Define un botón para enviar los datos de entrada a control de los datos que se han introducido. Normalmente estos controles se realizan en el lado del servidor, es decir, que se envían para su control a una página de servidor.

<!DOCTYPE html>
<html>
<body>  <form action="ejecutar.php">
    Nombre:<br>
    <input type="text" name="nombre" value="Ismael">
    <br>
    Apellidos:<br>
    <input type="text" name="lastname" value="Pérez">
    <br><br>
    <input type="submit" value="Enviar">
  </form></body>
</html>

input type=”submit”. Especifica un botón para enviar datos al servidor para su control.
value. Al ser un botón, este value actúa como un texto que se le pone en el botón. También se puede usar como un valor predeterminado, como ocurre en los dos campos tipo texto que hay en este formulario.
action. Aquí se especifica el archivo o programa que va a hacer el control de los datos. Normalmente suele ser un archivo en lenguaje de programación php. Eso se verá más adelante, ya que es un lenguaje muy interesante y que se usa en el lado del servidor.

Método de envío.

Cuando se envía los datos a una página de servidor, se debe especificar el método de envío que se va a utilizar. Un ejemplo:

<form action="accion.php" method="get/post">

Existen dos métodos para el envío de datos; get y post. Pero ¿Cual usar?¿Cuando usarlo?¿Que diferencias hay?:

get. Es el método que se usa por defecto si no se especifica nada. Hay que tener en cuenta cuando usar este método, ya que muestra en la barra de direcciones del navegador los datos que se van a enviar.
post. Este método es más seguro. Se debe usar cuando los datos que se envían son más sensibles o personales.
No hay límites en ninguno de los dos métodos, incluso se pueden enviar grandes cantidades de datos.
Todos los campos deben tener un nombre, es decir, el atributo name debe estar especificado. En el caso de que no se ponga no se enviarán todos los campos, sólo aquellos que lo tengan.

Agrupando Campos.

En un formulario tenemos la opción de poder agrupar campos que sean relacionados. Un ejemplo:

<!DOCTYPE html>
<html>
<body>  <form action="accion.php" method="post">
    <fieldset>
      <legend>Información Personal:</legend>
      Nombre:<br>
      <input type="text" name="nombre" value="Ismael">
      <br>
      Apellidos:<br>
      <input type="text" name="apellidos" value="Pérez">
      <br><br>
      <input type="submit" value="Enviar">
    </fieldset>
</form></body>
</html>

fieldset. Mete en un recuadro todos aquellos campos que estén dentro de esta etiqueta. Se pueden poner esta etiqueta tantas veces como uno quiera para agrupar los campos de la página web.
leyend. Muestra un título en el recuadro.

Lista desplegable.

Esta etiqueta es muy parecida al radio, la diferencia está es que el radio muestra todas las opciones juntas, en el desplegable lo hace como en Microsoft Access, como un cuadro combinado. Un ejemplo:

<!DOCTYPE html>
<html>
<body>  <form action="accion.php">
    <select name="coches">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="fiat">Fiat</option>
      <option value="audi">Audi selected </option>
    </select>
    <br><br>
    <input type="Enviar">
</form></body>
</html>

select. Se utiliza para crear un lista desplegable.
option value. Se especifica para crear cada opción de la lista desplegable. El value sirve para darle el valor de cada opción.
selected. Se utiliza para especificar la opción que está marcada por defecto.

Otra forma de Lista Desplegable.

Ahora se usará otra etiqueta para hacer una lista desplegable; <datalist>. Un ejemplo:

<!DOCTYPE html>
<html>
<body>  <form action="accion.php">
    <input list="navegadores" name="navegadores">
    <datalist id="navegadores">
      <option value="Internet Explorer">
      <option value="Firefox">
      <option value="Chrome">
      <option value="Opera">
      <option value="Safari">
      <option value="Yandex">
      <option value="Maxthon">
    </datalist>
    <input type="submit" value="hola">
</form></body>
</html>

Se crea un campo que, a simple vista parece un tipo texto, pero en realidad es la preparación para crear una lista <input list=”navegadores” name=”navegadores”>.
A continuación se crea la lista con la etiqueta <datalist> y se diseña cada elemento con el <option value=”Contenido“>.

Mensajes.

Existe la posibilidad de poder usar un tipo de campo en el cual, se pueden escribir varias líneas de texto, como una especia de mensaje.

<!DOCTYPE html>
<html>
<body>  <form action="accion.php">
    <textarea name="mensaje" rows="10" cols="30">Escribe</textarea>
    <br>
    <input type="submit" value="Enviar">
</form></body>
</html>

textarea. Etiqueta para crear una área de texto.
name. Nombre que se le da el campo para enviarlo al servidor.
row. Número de líneas que contiene el área de texto.
cols. Número de columnas que contiene el área de texto.

Contraseñas.

Un tipo campo que su función es evitar que se muestre el valor del campo mientras que se escribe. Un ejemplo:

<form>
  Usuario:<br>
  <input type="text" name="usuario"><br>
  Clave:<br>
  <input type="password" name="clave">
</form>

Hacer una limpia al formulario.

Un tipo de campo parecido al submit, la diferencia está en que es un botón que cuando se le hace clic borra el contenido de todos los campos del formulario. Un ejemplo:

<form action="accion.php" method="post">
  Nombre:<br>
  <input type="text" name="nombre" value="Ismael"><br>
  Last name:<br>
  <input type="text" name="apellidos" value="Pérez"><br><br>
  <input type="submit" value="Enviar">
  <input type="reset" value="Limpiar">
</form>

Casillas de verificación.

Son tipos de campos que permiten más de una valor a la vez. Un ejemplo:

<!DOCTYPE html>
<html>
<body>  <form action="accion.php" method="get">
    <input type="checkbox" name="transporte1" value="Bicicleta">Tengo Bicicleta
    <br>
    <input type="checkbox" name="transporte2" value="Coche">Tengo Coche
    <br>
    <input type="checkbox" name="transporte3" value="Patín">Tengo Patín
    <br>
<input type="checkbox" name="transporte4" value="Motocicleta">Tengo Motocicleta
    <br><br>
    <input type="submit" value="Enviar">
  </form></body>
</html>

input type “checkbox”. Sirve para especificar el campo tipo casilla de verificación.
name. Nombre que se le da al campo. En este caso cada opción de la casilla tiene un name distinto.
value. El valor que guarda cuando se chequea esa opción.

Números.

Un campo de tipo número que sólo se restringe a números los valores que pueda almacenar. Un ejemplo:

<form>
  Indica la calidad: (1 y 10):
  <input type="number" name="calidad" min="0" max="10" step="2" value="0">
</form>

input type=”number”. Especifica el tipo de campo sólo numérico.
name. Nombre del campo.
min y max. Son atributos de restricción. En este caso restringe un valor mínimo de 0y un máximo de 10.
Step. Especifica el intervalo del campo, que en este caso es de dos en dos.

Existen muchos otros atributos de restricción:

disable. Campo desactivado.
max. Número máximo que acepta el campo.
min. Número mínimo que acepta el campo.
maxlength. Especifica el número máximo de caracteres que deja meter el campo.
pattern. Aquí se especifica una expresión regular para restringir el campo.
readonly. Especifica sólo lectura, es decir, no deja modificar el campo.
required. Especifica que es obligatorio que el campo contenga algún valor.
size. Especifica en el ancho del campo en caracteres, es decir, si no acepta más de 2 caracteres, la longitud de cuadro de texto será 2 caracteres.
value. Especifica el valor por defecto de un campo.
step. Especifica el intervalo de un campo, por ejemplo números de 30 en 30.

Fecha y Calendario.

Campo de tipo fecha de manera que puede introducirse manualmente o mediante un calendario. Un ejemplo:

<form>
  Fecha de nacimiento:
  <input type="date" name="nacimiento" max="1979-12-31">
</form>

Como se observa en esta ejemplo, incluso se puede usar restricciones en fechas. En esta caso no acepta fechas de nacimiento superiores al año 1979.

Mes y Año.

Un tipo de campo fecha, en el que sólo deja introducir el mes y el año, ya sea manualmente o mediante un calendario. Un ejemplo:

<form>
  Fecha de nacimiento: (Mes y Año):
  <input type="month" name="nacimiento">
</form>

Semana.

Un tipo de campo que sólo deja escoger al usuario el número de la semana y el año. Un ejemplo:

<form>
  Elige la semana:
  <input type="week" name="semana">
</form>

Tiempo.

Un tipo de campo que sólo deja almacenar un tiempo concreto dentro de las 23 horas y 59 minutos que tiene el día. Un ejemplo:

<form>
  Hora del día:
  <input type="time" name="hora">
</form>

Fecha y Hora.

Un tipo de campo que sólo deja almacenar un fecha, ya sea manual o mediante calendario y un tiempo dentro de las 23 horas y 59 minutos que hay en el día. Un ejemplo:

<form>
  Fecha y hora de nacimiento:
  <input type="datetime-local" name="nacimiento">
</form>

Paleta de Colores.

Un tipo de campo que muestra una paleta de colores para poder elegir el que mas convenga. Un ejemplo:

<form>
  Elige tu color favorito:
  <input type="color" name="tucolor">
</form>

Barra de muestra.

Un campo que muestra una barra que puede desplazarse hacia la derecha e izquierda y obtener distintos valores según su posición. Un ejemplo:

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Emilio.

Un tipo de campo que restringe que sólo se puedan almacenar correos electrónicos. Un ejemplo:

<form>
  E-mail:
  <input type="email" name="email">
</form>

Buscador.

Un tipo de campo similar a los cuadros de textos de los buscadores de internet. Un ejemplo:

<form>
  Buscar en google:
  <input type="search" name="buscar">
</form>

Una dirección de Internet.

Es un tipo de campo que sólo deja almacenar direcciones url. Un ejemplo:

<form>
  Página personal:
  <input type="url" name="web">
</form>

Continúa por Atributos o Propiedades.