Formularios

Search…
Formularios
Los formularios nos permiten pedirle información a los usuarios.
Un formulario se crea con la etiqueta <form>:
1
<form>
2
​
3
</form>
Copied!
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">.
1
<form>
2
  <input type="text">
3
</form>
Copied!
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">.
1
<form>
2
  <input type="password">
3
</form>
Copied!
Casilla de verificación (checkbox)
Para definir una casilla de verificación utiliza la etiqueta <input type="checkbox">:
1
<form>
2
  <input type="checkbox"> Acepto recibir información
3
</form>
Copied!
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">:
1
<form>
2
  <input type="submit" value="Enviar">
3
</form>
Copied!
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:
1
<form action="http://mi-empresa.com/contacto">
2
  <div>
3
    Nombre: <input type="text" name="nombre">
4
  </div>
5
  <div>
6
    Mensaje: <input type="text" name="mensaje">
7
  </div>
8
  <input type="submit" value="Enviar">
9
</form>
Copied!
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:
1
<form>
2
  <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre">
3
</form>
Copied!
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">:
1
<form>
2
  <input type="radio">
3
</form>
Copied!
Los botones de radio son especialmente útiles para que el usuario escoja una única opción. Por ejemplo:
1
<form action="/accion">
2
  <div>
3
    <label for="masculino">Masculino</label>
4
    <input type="radio" name="genero" id="masculino" value="masculino">
5
  </div>
6
  <div>
7
    <label for="femenino">Femenino</label>
8
    <input type="radio" name="genero" id="femenino" value="femenino">
9
  </div>
10
  <div>
11
    <label for="otro">Otro</label>
12
    <input type="radio" name="genero" id="otro" value="otro">
13
  </div>
14
  <input type="submit" value="Enviar">
15
</form>
Copied!
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>:
1
<form>
2
  <textarea rows="5"></textarea>
3
</form>
Copied!
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>:
1
<form>
2
  <select name="genero">
3
    <option value="masculino">Masculino</option>
4
    <option value="femenino">Femenino</option>
5
  </select>
6
</form>
Copied!
Tablas
El modelo de caja en CSS
Last modified 3yr ago
Copy link
Contents
Campo de texto
Campo de contraseña
Casilla de verificación (checkbox)