Formularios

Search…
Formularios
Los formularios nos permiten pedirle información a los usuarios.
Un formulario se crea con la etiqueta <form>:
<form>
​
</form>
Un formulario puede tener muchos elementos de entrada como campos de texto, casillas de verificación (checkbox), listas desplegables, botones de envío y muchos más. Veamos algunos de ellos:
Campo de texto
Para definir un campo de texto utiliza la etiqueta <input type="text">.
<form>
  <input type="text">
</form>
Campo de contraseña
Los campos de contraseña son similares a los campos de texto pero el texto se reemplaza automáticamente por asteriscos (*) cuando la persona escribe.
Para definir un campo de contraseña utiliza la etiqueta <input type="password">.
<form>
  <input type="password">
</form>
Casilla de verificación (checkbox)
Para definir una casilla de verificación utiliza la etiqueta <input type="checkbox">:
<form>
  <input type="checkbox"> Acepto recibir información
</form>
Botón de envío
El botón de envío, como su nombre lo indica, se utiliza para enviar la información que ha ingresado el usuario a un servidor remoto.
Para definir un botón de envío utiliza la etiqueta <input type="submit" value="Enviar">:
<form>
  <input type="submit" value="Enviar">
</form>
El atributo value define el texto del botón.
Para utilizar un botón de envío necesitas también definir al menos:
1.La URL del servidor al que quieres enviar la información en el atributo action .
2.Agregar un atributo name a todos los campos de entrada que quieres enviar al servidor.
Por ejemplo:
<form action="http://mi-empresa.com/contacto">
  <div>
    Nombre: <input type="text" name="nombre">
  </div>
  <div>
    Mensaje: <input type="text" name="mensaje">
  </div>
  <input type="submit" value="Enviar">
</form>
Labels
Es buena práctica utilizar una etiqueta <label> para encerrar el texto que se va a mostrar para cada campo de entrada.
Para relacionar el <label> al campo de entrada debes:
Agregar un atributo id al campo de entrada.
Agregar un atributo for al <label> con el mismo valor del atributo id del campo de entrada.
Por ejemplo:
<form>
  <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre">
</form>
La ventaja de utilizar un label es que si hacen click sobre el label se va a enfocar automáticamente el campo de entrada. Esto es especialmente útil en casillas de verificación y botones de radio.
Botones de radio
Para definir un botón de radio utiliza la etiqueta <input type="radio">:
<form>
  <input type="radio">
</form>
Los botones de radio son especialmente útiles para que el usuario escoja una única opción. Por ejemplo:
<form action="/accion">
  <div>
    <label for="masculino">Masculino</label>
    <input type="radio" name="genero" id="masculino" value="masculino">
  </div>
  <div>
    <label for="femenino">Femenino</label>
    <input type="radio" name="genero" id="femenino" value="femenino">
  </div>
  <div>
    <label for="otro">Otro</label>
    <input type="radio" name="genero" id="otro" value="otro">
  </div>
  <input type="submit" value="Enviar">
</form>
Fíjate en lo siguiente:
El valor del atributo name es genero en todos los botones de radio.
Cada botón de radio tiene un atributo value con un valor distinto.
Es decir, que al servidor va a llegar el genero con el valor del botón de radio que haya seleccionado el usuario (masculino, femenino u otro).
Áreas de texto
Las áreas de texto son similares a los campos de texto pero pueden ser de múltiples líneas.
Para crear un área de texto se utiliza la etiqueta <textarea>:
<form>
  <textarea rows="5"></textarea>
</form>
Nota: a diferencia de la etiqueta <input>, la etiqueta <textarea> necesita una etiqueta de cierre.
Lista de selección
Para crear una lista de selección utiliza la etiqueta <select>:
<form>
  <select name="genero">
    <option value="masculino">Masculino</option>
    <option value="femenino">Femenino</option>
  </select>
</form>
Tablas
El modelo de caja en CSS
Last modified 4yr ago
Copy link
On this page
Campo de texto
Campo de contraseña
Casilla de verificación (checkbox)
Botón de envío
Labels
Botones de radio
Áreas de texto
Lista de selección