Cómo Crear Formularios en HTML

Los formularios HTML permiten a los usuarios interactuar con páginas o aplicaciones a través de una serie de campos y elementos de control. Los formularios envían habitualmente los datos que el usuario introduce a algún servidor ya sea directamente o de un modo transparente al usuario medainte JavaScript, actualizando la base de datos en algún servidor remoto a medida que el usuario escribe.

Antes de escribir el código HTML del formulario debes pensar aquellos campos que quieres que el usuario introduzca. Por ejemplo, podrías necesitar un formulario que permita a los usuarios enviar datos acerca de su mascota. En dicho caso necesitarías un campo para la especie de la mascota, otro para la raza y otro para su nombre, por poner un ejemplo. También podríamos agregar otro campo para la edad y finalmente un botón que permita al usuario enviar los datos.

Creación de un formulario

Para agregar formularios se usa la etiqueta form, que puede contener en su interior cualquier otro tipo de elemento:

<form>
...
</form>

A modo de ejemplo, vamos a crear un formulario de contacto para que los visitantes de una web puedan realizar consultas. En dicho caso necesitarías un campo para su nombre, otro para su email y finalmente otro para su consulta, además de un botón de envío. Este podría ser el código HTML del mismo:

<form action="/gestion-formulario" method="post">
  <div class="form-group">
    <label for="name">Nombre:</label>
    <input type="text" name="nombre" class="form-control">
  </div>
  <div class="form-group">
    <label for="mail">Email:</label>
    <input type="email" name="email" class="form-control">
  </div>
  <div class="form-group">
    <label for="mensaje">Mensaje:</label>
    <textarea name="mensaje" class="form-control"></textarea>
  </div>
  <div class="form-group">
    <input type="submit" value="Enviar">
  </div>
</form>

Aunque no forma parte del alcance de este tutorial, vamos a aplicarle algunos estilos al formulario mediante CSS para mejorar su aspecto. No te preocupes si nunca has utilizado CSS, ya que no lo necesitarás para seguir este tutorial:

.form-group {
  display: block;
  margin-bottom: 1rem;
}

label {
  font: 400 16px Arial;
  display: block;
  margin-bottom: .5rem;
}

.form-control {
  max-width: 500px;
  font: 400 16px Arial;
  display: block;
  width: 100%;
  padding: .3rem .5rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  border: 1px solid #ced4da;
  border-radius: .25rem;
}

Como ves, hemos aplicado unos estilos similares a los que aplica el framework Bootstrap. Y aquí tendríamos el resultado final del formulario:

Tal y como ves, hemos usado la etiqueta form con los atributos action y method, que a continuación veremos para qué sirven. En su interior, hemos usado etiquetas label para definir el nombre de cada campo. Para representar los campos del formulario hemos usado dos campos input, uno para el nombre del usuario y otro para la dirección de email. Los campos input permiten por defecto introducir una línea de texto.

También hemos agregado un elemento textarea que permite introducir un texto en varias líneas y finalmente un botón submit para enviar el formulario. A continuación puedes ver el código HTML junto con el código CSS que he agregado y el resultado final.

See the Pen HTML Form by Edu Lazaro (@edulazaro) on CodePen.36754

A continuación vamos a explicar para qué sirven los atributos action y method que hemos agregado a la etiqueta form.

Atributo action

Puedes usar el atributo action para introducir la URL a la que el formulario debe enviar los datos cuando en usuario haga clic en el botón de envío:

<form action="/gestion-formulario">
  ...
</form>

Es de esperar que la dirección de destino contenga el código necesario para gestionar los datos del formulario. Cuando se envíen los datos del formulario, el navegador redirigirá al usuario a la URL introducida en el atributo action. Si el atributo action no está presente, el navegador sencillamente enviará los datos a la página actual refrescando a su vez la página.

Atributo method

Existen dos formas diferentes de enviar los datos al servidor mediante el protocolo HTTP. Puedes usar el método GET o el método POST: El método de envío de un formulario se especifica mediante el atributo method.

Método GET

Por definición, el método GET se usa para obtener datos del servidor en base a ciertos parámetros definidos en la URL. Podemos enviar datos al final de la URL tras el símbolo de interrogación ?. Por ejemplo, podríamos utilizar la siguiente URL para obtener un listado de personas del servidor que cumplan los criterios indicados:

http://ejemplo.com/persona?pelo=negro&ojos=verde&peso=75

Sin embargo, también podemos aprovechar este mecanismo para enviar los datos de un formulario. La parte positiva es que es un método muy directo, y la negativa es que estas peticiones se guardan en el historial del usuario y serán visibles a no ser que usemos un certificado SSL. Además, no podremos enviar campos cuyos valores sean excesivamente largos, ya que una URL tiene un número de caracteres limitado.

El siguiente formulario enviaría los datos usando el método GET:

<form id="mi-formulario" action="http://neoguias.com/destino" method="GET">
  <input type="text" name="nombre">
  <input type="text" name="apellido">
  <input type="submit" value="Enviar">
</form>

Cuando usas el método GET, los datos del formulario se envían junto con la propia URL, estando al final de la misma como pares de parámetro y valor. Si introducimos «Edu» como nombre y «Lazaro» como apellido, el formulario del ejemplo anterior se enviaría a la siguiente URL:

http://neoguias.com/destino?nombre=edu&apellido=lazaro

Ya sea mediante PHP, Node.js, Java, Go, Python o cualquier otro lenguaje de programación backend que permita gestionar peticiones HTTP, tendremos que gestionar la recepción de los datos.

Método POST

Cuando usas el método POST, los datos se enviarán en una cabecera de la petición. Al usar la cabecera eliminamos la limitación del número de caracteres de las URLs, mejorando además la seguridad y la privacidad, ya que los datos enviados no serán visibles directamente y tampoco se almacenarán en el historial del navegador del usuario.

El siguiente formulario enviaría los datos usando el método POST:

<form id="mi-formulario" action="http://neoguias.com/destino" method="POST">
  <input type="text" name="nombre">
  <input type="text" name="apellido">
  <input type="submit" value="Enviar">
</form>

Las cebeceras o headers son, a diferencia de las URLs, transparentes al usuario. A continuación tienes un ejemplo de cuáles podrían ser las cabeceras más relevantes de la petición generada al enviar el formulario anterior:

POST /destino HTTP/1.1
Host: neoguias.com
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Content-Type: application/x-www-form-urlencoded
Content-Length: 40

nombre=Edu&apellido=Lazaro&action=Enviar

El campo Content-Type indica el tipo de método de codificación de los datos, que en este caso es el mismo que se usa en las direcciones URL. Si te fijas, podrás ver los datos al final, en el contenido de la petición, codificados del mismo modo que cuando enviábamos el formulario mediante GET, en este caso sin las limitaciones de la URL.

Envío del formulario

El formulario requiere un campo input de tipo submit para ser enviado, aunque también podemos enviar el formulario mediante JavaScript.

Para enviar el formulario normalmente vamos necesitamos usar un campo input de tipo submit. Esto generará un botón cuyo valor podemos establecer mediante el campo value:

<input type="submit" value="Enviar">

En caso de querer enviar el formulario mediante JavaScript, podemos agregar una acción a cualquier elemento, enviando el formulario cuando se haga clic en él mediante el siguiente código JavaScript:

document.getElementById("mi-formulario").submit();

Lo que hacemos es seleccionar el formulario mediante su identificador o id y luego enviarlo.

No es necesario refrescar la página o acceder a otra URL para enviar el formulario, ya que también podemos enviarlo mediante ajax. Por ejemplo, podemos usar la API fetch de JavaScript.

Validación del formulario

Es habitual realizar ciertas validaciones mediante JavaScript, aunque HTML también dispone de mecanismos de validación de datos nativos que impedirán que se envíen los datos mientras no se cumplan ciertas condiciones.

También podemos limitar el valor de un campo usando el tipo de campo input adecuado. Por ejemplo, un campo input de tipo number solamente aceptará números como valor, y un campo input de tipo email solamente aceptará direcciones de email como valor.

Atributo required

Podemos establecer la regla de que un campo deba tener algún valor, siendo requerido para así poder enviar el formulario. Para ello podemos usar el atributo required:

<input type="text" name="nombre" required />

Si no establecemos un valor para el campo anterior, la validación fallará.

Atributos min y max

En algunos tipos de campo, como los numéricos, podemos forzar el valor mínimo de un número usando el atributo min:

<input type="number" name="numero" min="10"/>

También podemos forzar el valor máximo de un número mediante el atributo max:

<input type="number" name="numero" max="20"/>

Usando tanto el atributo min como el atributo max, podemos establecer un rango de valores:

<input type="number" name="numero" min="10" max="20"/>

Atributo pattern

Podemos establecer validaciones avanzadas que fuercen un formato específico para un campo usando el atributo pattern. Mediante este atributo podrás establecer el patrón que debe seguir el valor del campo usando expresiones regulares:

<input type="text" name="nombre" pattern="[a-zA-Z]{12}">

Campos del formulario

Vamos a explicar cómo utilizar los campos más utilizados en formularios HTML, que son los elementos input, select y textarea. Además, aunque no represente un tipo de campo en el que introducir datos, también veremos la etiqueta de apoyo label.

Etiqueta label

Los campos de un formulario siempre deberían ir acompañados de una etiqueta de tipo label que identifique el nombre del campo:

<label for="edad">Edad</label>
<input type="number" name="edad" id="edad">

El atributo for del elemento label permite establecer el id del elemento al que hace referencia.

Etiqueta input

La etiqueta input es una etiqueta muy versátil que crea por defecto un campo de texto. Puede adoptar una gran diversidad de apariencias y comportamientos gracias a su atributo type, que permite crear diferentes tipos de campo.

Es imprescindible darle un nombre al campo si quieres enviar el formulario a un servidor. Para ello debes usar el atributo name:

<input type="text" name="nombre">

Un atributo muy utilizado es el atributo placeholder, que permite mostrar un texto en el campo cuando éste está vacío. De este modo podemos dar alguna pista o consejo al usuario acerca de la finalidad del campo o del formato de los datos que debe introducir:

<input type="text" name="nombre" placeholder="Introduce tu nombre...">

También podemos establecer el valor inicial de un campo input usando el atributo value:

<input type="text" name="nombre" value="Goku">

En caso de que tanto el atributo value como el atributo placeholder tengan un valor, solamente se mostrará el texto definido en el atributo placeholder cuando el usuario elimine el valor del campo.

Veamos ahora el atributo más importante, que es al tributo type, que permite crear diferentes tipos de campo en base a su valor.

Texto: text

Aplicando el valor text al atributo type de la etiqueta input crearás un campo que acepte una cadena de texto:

<input type="text" name="nombre">

Puedes establecer el número máximo de caracteres del campo usando el atributo maxLength. El texto del siguiente ejemplo solamente aceptará 20 caracteres:

<input type="text" name="nombre" maxLength="20">

Número: number

Aplicando el valor number al atributo type de la etiqueta input crearás un campo numérico, que incluye un botón para aumentar el valor del número introducirlo en una unidad y otro para reducirlo:

<input type="number" name="edad">

Este campo acepta los atributos min y max, que permiten establecer el valor mínimo y el máximo del número introducido.

<input type="number" name="edad" min="20" max="80">

También es posible usar el atributo step para establecer las unidades que aumentará o disminuirá el valor introducido cuando pulsemos en los botones que aumentan o reducen su valor.

<input type="number" name="edad" min="20" max="80" step="10">

Contraseña: password

Aplicando el valor password al atributo type de la etiqueta input crearás un campo que acepte una contraseña. Cuando el usuario introduzca algo en un campo de tipo password se mostrarán asteriscos en lugar de los caracteres introducidos.

<input type="password" name="password">

Radio: radio

Aplicando el valor radio al atributo type de la etiqueta input crearás un elemento de tipo radio, al que deberás asignar un valor mediante el atributo value. Lo más habitual es crear un grupo con varios elementos:

<input type="radio" name="color" value="Azul">
<input type="radio" name="color" value="Verde">
<input type="radio" name="color" value="Rojo">

Para crear un grupo de opciones, cada una de ellas tendrás que tener el mismo valor en su atributo name. El usuario solamente podrá seleccionar una opción a la vez y, cuando seleccione una de ellas, las otras se desactivarán. El nombre de esta opción deriva de los botones que antes tenían las radios de los coches, en donde solamente podía estar presionado uno a la vez.

Por defecto, el elemento seleccionado será el que esté en primer lugar, aunque puede estar seleccionado cualquier otro si se usa el atributo checked. En el siguiente ejemplo, elemento que estará seleccionado por defecto es el segundo:

<input type="radio" name="color" value="Azul">
<input type="radio" name="color" value="Verde" checked>
<input type="radio" name="color" value="Rojo">

Al enviar el formulario, el valor del campo será el valor del elemento que esté seleccionado, que en el ejemplo anterior es el valor Verde.

Checkbox: checkbox

Aplicando el valor checkbox al atributo type de la etiqueta input crearás un campo que consta de una caja que el usuario puede seleccionar:

<input type="checkbox" name="color" value="Azul">

Este campo tiene muchos posibles usos. Por ejemplo, suele usarse en los formularios, como aceptación simbólica de los términos y condiciones de ciertas aplicaciones.

También es habitual agrupar varios elementos de tipo checkbox con el mismo valor en su atributo name, al igual que ocurre con los elementos de radio:

<input type="checkbox" name="color" value="Azul">
<input type="checkbox" name="color" value="Verde">
<input type="checkbox" name="color" value="Rojo">

Sin embargo, a diferencia de los elementos radio, el usuario podrá seleccionar más de una opción a la vez. Cuando se active una opción, las opciones que estuvieses activadas seguirán estando activadas. Cuando haya más de una opción activada y se envíe el formulario, los valores activos se enviarán como un array.

Los campos checkbox están desactivados por defecto. Si quieres que estén activados debes usar el atributo checked:

<input type="checkbox" name="color" value="Azul">
<input type="checkbox" name="color" value="Verde" checked>
<input type="checkbox" name="color" value="Rojo" checked>

Cuando se envíe el formulario anterior, se enviarán los valores Verde y Rojo.

Archivo: file

Aplicando el valor file al atributo type de la etiqueta input crearás un campo que te permitirá seleccionar un archivo que podrás enviar al servidor:

<input type="file" name="archivo">

Mediante el atributo accept podrás especificar el tipo de archivo a enviar. Podrás indicar la extensión del archivo .(.jpg, .png, .doc, .pdf…), un tipo de archivo multimedia o uno de los siguientes valores:

• image/*: El usuario podrá seleccionar cualquier archivo de imagen.
• audio/*: El usuario podrá seleccionar cualquier archivo de audio.
• video/*: El usuario podrá seleccionar cualquier archivo de vídeo.

En el siguiente ejemplo agregamos un input que acepte una imagen en cualquier formato:

<input type="file" name="foto" accept="image/*">

El campo puede aceptar más de un tipo de archivo. Para ello, debes separar los diferente valores del atributo accept con una coma:

<input type="file" name="foto" accept=".jpg, .png, .jpeg">

En caso de querer que el usuario pueda seleccionar más de un archivo, bastará con que agregues el atributo multiple:

<input type="file" name="archivos" multiple>

El envío de archivos al servidor puede no resultar muy intuitivo al principio. En el siguiente ejemplo explicamos cómo enviar archivos al servidor mediante JavaScript utilizando la API Fetch.

Email: mail

Aplicando el valor email al atributo type de la etiqueta input crearás un campo que acepte una dirección de email:

<input type="email" name="email">

El formulario no se enviará si el usuario introduce una dirección de email inválida, mostrando un mensaje de aviso. Este tipo de campo no está soportado por Internet Explorer 9 y versiones anteriores.

Teléfono: tel

Aplicando el valor tel al atributo type de la etiqueta input crearás un campo que acepte un número de teléfono. Este campo funcionará como un campo de tipo text en navegadores de escritorio, pero mostrará un teclado numérico en dispositivos móviles.

<input type="tel" name="telefono">

URL: url

Aplicando el valor url al atributo type de la etiqueta input crearás un campo que acepte una URL:

<input type="url" name="pagina">

El formulario mostrará un mensaje de aviso y no se enviará si el usuario introduce una URL inválida. Este tipo de campo no está soportado por Internet Explorer 9 y versiones anteriores. También puedes personalizar la validación de la URL, aunque para ello tendrás que usar una expresión regular.

Color: color

Aplicando el valor color al atributo type de la etiqueta input crearás un campo que permitirá seleccionar y enviar un color:

<input type="color" name="color">

Cuando el usuario haga clic en el campo, se mostrará un pequeño panel mediante el cual podrá seleccionar un color. A los paneles que permiten seleccionar un color se les llama colorpicker, y la implementación del mismo que incluye cada navegador puede ser diferente, siendo el motivo de que todavía se programen mediante JavaScript en muchas ocasiones.

Mediante el atributo value puedes escoger el color que estará seleccionado por defecto.

<input type="color" name="color" value="#333333">

Rango: range

Aplicando el valor range al atributo type de la etiqueta input crearás un campo mediante el cual podrás seleccionar un valor usando un slider:

<input type="range" name="edad">

Por defecto, el valor mínimo es 0 y el máximo es 100, pero puedes establecer los valores máximo y mínimo del campo mediante los atributos max y min respectivamente:

<input type="range" name="edad" min="10" max="110">

También puedes escoger el valor que estará seleccionado pro defecto mediante el atributo value:

<input type="range" name="edad" max="110" value="40">

También puedes establecer el intervalo entre los valores mediante el atributo step. Por ejemplo, si estableces el valor del atributo step en 5, podrás seleccionar los números de cinco en cinco, y si lo estableces en 10, podrás seleccionar las decenas:

<input type="range" name="edad" step="10">

Búsqueda: search

Aplicando el valor search al atributo type de la etiqueta input crearás un campo de búsqueda.

<input type="search" name="nombre">

Este campo funciona exactamente igual que un campo de tipo de text, pero suele usarse cuando la finalidad del campo es la de enviar un término o una de búsqueda.

Mediante al atributo maxLenth puedes establecer el número máximo de caracteres del campo:

<input type="text" name="nombre" maxLength="30">

Submit: submit

Aplicando el valor submit al atributo type de la etiqueta input crearás un botón que permitirá enviar el formulario al hacer clic en él. Podrás establecer el texto del botón mediante el atributo value:

<input type="submit" value="Enviar">

Los datos del formulario se enviarán a la URL especificada en el atributo action del elemento form en el que definimos el elemento.

Botón: button

Aplicando el valor button al atributo type de la etiqueta input crearás un botón al que podrás asignar diferentes funcionalidades mediante JavaScript.

<input type="button" value="Clic aquí">

Los elemento de tipo button no servirán para enviar el formulario por sí mismos a no ser que se programe dicho comportamiento.

Reset: reset

Aplicando el valor reset al atributo type de la etiqueta input crearás un campo reset, que sirve para restablecer el valor de todos los campos del formulario a su estado original:

<input type="reset">

Fecha: date

Aplicando el valor date al atributo type de la etiqueta input crearás un campo mediante el cual podrás introducir una fecha:

<input type="date" name="fecha">

Las fechas podrás teclearse o también podrás seleccionarse mediante un calendario que se mostrará al pulsar en el icono de un calendario interactivo que se mostrará al lado del campo. La apariencia del calendario depende del navegador que se utilice.

Es posible limitar la fecha que se puede seleccionar mediante los atributos min y max, que permitirá introducir una fecha mínima y una máxima respectivamente:

<input type="date" name="fecha" min="2020-01-01" max="2030-01-01">

El campo step también permite acotar la fecha según el intervalo introducido, pudiendo por ejemplo definir días alternos:

<input type="date" name="fecha" step="2">

También es posible introducir una fecha por defecto:

<input type="date" name="fecha" value="2020-05-20">

Tiempo: time

Aplicando el valor time al atributo type de la etiqueta input crearás un campo que permitirá introducir un tiempo definido en horas, minutos y segundos:

<input type="time" name="tiempo">

El usuario puede usar el selector de horas, minutos y segundos que el navegador mostrará si así lo desea. La apariencia del selector de tiempos depende del navegador utilizado.

Es posible limitar el tiempo que se puede seleccionar mediante los atributos min y max:

<input type="time" name="tiempo" min="16:00" max="18:00">

Puedes usar la propiedad step para acotar los intervalos de este campo en base a los segundos o milisegundos introducidos. Por ejemplo, podrías querer que los segundos puedan seleccionarse de 10 en 10:

<input type="time" id="tiempo" step="10">

También podrías querer seleccionar intervalos de milisegundos:

<input type="time" name="tiempo" step=".050">

Este campo no funcionará correctamente en Internet Explorer 12 y versiones anteriores.

Mes: month

Aplicando el valor month al atributo type de la etiqueta input crearás un campo que permitirá introducir un mes compuesto de un mes y el año al que se corresponde:

<input type="month" name="mes">

El usuario puede usar el selector de años y meses al que es posible acceder mediante un icono que se mostrará al lado del campo, aunque su apariencia dependerá del navegador utilizado.

Es posible limitar el mes que se puede seleccionar mediante los atributos min y max:

<input type="month" name="mes" min="2020--06" max="2030-05">

Puedes usar la propiedad step para acotar el intervalo entre los meses. Por ejemplo, podrías querer que los meses a escoger fuesen alternos:

<input type="month" name="tiempo" step="2">

Este campo no funcionará correctamente en Internet Explorer 12 y versiones anteriores.

Semana: week

Aplicando el valor tweek al atributo type de la etiqueta input crearás un campo que permitirá introducir una semana compuesto del ordinal de la semana en el año y del año al que se corresponde:

<input type="week" name="semana">

El usuario puede usar el selector de semanas al que es posible acceder mediante un icono que se mostrará al lado del campo, aunque su apariencia dependerá del navegador utilizado.

Es posible limitar la semana que se puede seleccionar mediante los atributos min y max:

<input type="week" id="semana" min="2020-W10" max="2030-W12">

Puedes usar la propiedad step para acotar el intervalo entre las semanas. Por ejemplo, podrías querer que las semanas a elegir fuesen alternas:

<input type="week" id="semana" step="2">

Este campo no funcionará correctamente en Internet Explorer 12 y versiones anteriores.

Fecha y hora: datetime

Aplicando el valor datetime al atributo type de la etiqueta input crearás un campo que permitirá introducir una fecha y un tiempo, incluyendo zona horaria:

<input type="datetime" name="fecha-tiempo">

El usuario puede usar el selector de días y tiempo, al que es posible acceder mediante un icono que se mostrará al lado del campo, aunque por ahora solamente está disponible en el navegador Safari.

Es posible limitar el tiempo que se puede seleccionar mediante los atributos min y max:

<input type="datetime" name="fecha-tiempo" min="2010-02-02T25:57Z" max="2020-05-06T30:57Z">

Puedes usar la propiedad step para acotar los intervalos de este campo en base a los segundos o milisegundos introducidos. Por ejemplo, podrías querer que los segundos puedan seleccionarse de 10 en 10:

<input type="datetime" name="fecha-tiempo" step="10">

También podrías querer seleccionar intervalos de milisegundos:

<input type="datetime" name="fecha-tiempo" step=".050">

Este campo no funcionará correctamente en Internet Explorer 12 y versiones anteriores.

Fecha y hora local: datetime-local

Aplicando el valor datetime-local al atributo type de la etiqueta input crearás un campo que permitirá introducir una fecha y un tiempo, sin zona horaria:

<input type="datetime-local" name="fecha-tiempo">

El usuario puede usar el selector de días y tiempo, al que es posible acceder mediante un icono que se mostrará al lado del campo,

Es posible limitar el tiempo que se puede seleccionar mediante los atributos min y max:

<input type="datetime-local" name="fecha-tiempo" min="2010-02-02T25:57Z" max="2020-05-06T30:57Z">

Puedes usar la propiedad step para acotar los intervalos de este campo en base a los segundos o milisegundos introducidos. Por ejemplo, podrías querer que los segundos puedan seleccionarse de 10 en 10:

<input type="datetime-local" name="fecha-tiempo" step="10">

También podrías querer seleccionar intervalos de milisegundos:

<input type="datetime-local" name="fecha-tiempo" step=".050">

Este campo no funcionará correctamente en Internet Explorer 12 y versiones anteriores.

Etiqueta select

La etiqueta select se utiliza para crear elementos que permiten escoger uno o más elemento de una lista. En el campo aparece la opción seleccionada y, cuando se hace clic en él, se despliega un menú desplegable desde el que escoger una opción:

<select name="color">
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
</select>

Las opciones se definen mediante la etiqueta option y debe estar entre la etiqueta de apertura y de cierre del campo select. El valor de las opciones se define mediante el campo value, siendo el valor que se envíe el servidor en caso de que la opción se seleccione.

El texto o nombre de cada opción se escribe en texto plano, entre la etiqueta de apertura y de cierre de las etiquetas de opción. La opción seleccionada se enviará al servidor con el nombre que se le haya dado al atributo name del campo select.

También es posible seleccionar más de una opción mediante el atributo multiple, en cuyo caso, se mostrará una lista en lugar de un menú desplegable:

<select name="color" multiple>
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
</select>

Siempre debe estar seleccionada alguna opción, así que en caso de no querer que ninguna esté seleccionada, la primera opción debería agregarse con el campo value vacío.

<select name="color">
  <option value="">Ninguno</option>
  <option value="rojo">Rojo</option>
  <option value="azul">Azul</option>
</select>

Si quieres puedes desactivar ciertas opciones de modo que no se puedan seleccionar mediante el atributo disabled:

<select name="color">
  <option value="rojo" disabled>Rojo</option>
  <option value="azul">Azul</option>
</select>

Puedes agrupar opciones utilizando la etiqueta optgroup. Cada etiqueta optgroup necesita un nombre que podrás agregar mediante el atributo label:

<select name="comidas">
  <optgroup label="cerales">
    <option value="maiz">Maíz</option>
    <option value="trigo">Trigo</option>
  </optgroup>
  <optgroup label="carnes">
    <option value="ternera">Ternera</option>
    <option value="cordero">Cordero</option>
  </optgroup>
</select>

Etiqueta textarea


La etiqueta textarea permite agregar un campo de texto miltilínea. Consta de una etiqueta de apertura y de otra de cierre y, al igual que ocurre con los otros elementos, debes agregar un nombre para el campo mediante el atributo name:

<textarea name="texto"></textarea>

Puedes establecer un texto que se muestre en el campo cuando está vacío mediante el atributo placeholder:

<textarea name="texto" placeholder="Introduce un texto"></textarea>

Puedes personalizar el tamaño del elemento textarea mediante los atributos rows y cols, que permiten establecer el número de filas y de columnas del campo respectivamente:

<textarea name="texto" rows="40" cols="20"></textarea>

Campos ocultos

En ocasiones podrías querer ocultar un campo que envías al servidor. Para ocultar un campo puedes usar el atributo hidden:

<input type="number" name="csrf" value="0961ba54">

Podrías querer ocultar un campo cuando por ejemplo agregas un token de seguridad  CSRF, cuyo valor es definido por algunos frameworks como Laravel al generar el código HTML de un formulario.

Esto ha sido todo.

---