HTML Formularios e input

Los formularios HTML se utilizan para recopilar la información de entrada del usuario.

Un formulario HTML representa un área en un documento, esta área contiene controles interactivos que envían la información recopilada del usuario a un servidor web.

Los formularios HTML suelen contener varios campos de entrada, casillas de verificación, botones de opción, listas desplegables y otros elementos.

A continuación se muestra un ejemplo de un formulario HTML simple:

  • <form>El elemento se utiliza para crear formularios,actionEl atributo define la URL de destino para el envío de los datos del formulario,methodEl atributo define el método HTTP para enviar los datos (aquí se utiliza "post").
  • <label>El elemento se utiliza para agregar etiquetas a los elementos del formulario, mejorando la accesibilidad.
  • <input>El elemento es uno de los elementos de formulario más utilizados; puede crear campos de entrada de texto, campos de contraseña, botones de opción, casillas de verificación, etc.typeEl atributo define el tipo del campo de entrada,idEl atributo se utiliza para asociar<label>el elemento,nameEl atributo se utiliza para identificar los campos del formulario.
  • <select>El elemento se utiliza para crear listas desplegables, y<option>el elemento se utiliza para definir las opciones de la lista desplegable.

Ejemplos

<form action="/" method="post">
    <!-- Campo de entrada de texto -->
    <label for="name">Nombre de usuario:</label>
    <input type="text" id="name" name="name" required>

    <br>

    <!-- Campo de entrada de contraseña -->
    <label for="password">Contraseña:</label>
    <input type="password" id="password" name="password" required>

    <br>

    <!-- Botón de opción -->
    <label>Género:</label>
    <input type="radio" id="male" name="gender" value="male" checked>
    <label for="male">Hombre</label>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">Mujer</label>

    <br>

    <!-- Casilla de verificación -->
    <input type="checkbox" id="subscribe" name="subscribe" checked>
    <label for="subscribe">Suscribirse a las notificaciones</label>

    <br>

    <!-- Lista desplegable -->
    <label for="country">País:</label>
    <select id="country" name="country">
        <option value="cn">CN</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
    </select>

    <br>

    <!-- Botón de envío -->
    <input type="submit" value="Enviar">
</form>

Pruébalo »
Examples

Ejemplos en línea

Ejemplos

El siguiente ejemplo crea un formulario que contiene dos campos de entrada:

<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

Pruébalo »

Ejemplos

El siguiente ejemplo crea un formulario que contiene un campo de entrada normal y un campo de contraseña:

<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>

Pruébalo »

(Puede encontrar más ejemplos al final de esta página.)

Formularios HTML

Un formulario es un área que contiene elementos de formulario.

Los elementos de formulario permiten al usuario ingresar contenido en el formulario, por ejemplo: área de texto (textarea), lista desplegable (select), botones de opción (radio-buttons), casillas de verificación (checkbox), etc.

Podemos utilizar<form>la etiqueta para crear formularios:

Ejemplos

<form>
.
Elemento input
.
</form>

Formularios HTML - Elementos de entrada

En la mayoría de los casos, la etiqueta de formulario más utilizada es la etiqueta de entrada<input>。

El tipo de entrada es definido por eltypeatributo.

A continuación, presentamos varios tipos de entrada comunes.

Campos de texto (Text Fields)

Los campos de texto mediante<input type="text">la etiqueta se establecen; cuando el usuario desea escribir letras, números, etc. en el formulario, se utiliza el campo de texto.

Ejemplos

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

El navegador muestra lo siguiente:

First name:
Last name:

Nota:El formulario en sí no es visible. Además, en la mayoría de los navegadores, el ancho predeterminado de un campo de texto es de 20 caracteres.

Campo de contraseña

El campo de contraseña mediante la etiqueta<input type="password">se define:

Ejemplos

<form>
Password: <input type="password" name="pwd">
</form>

El navegador muestra el resultado de la siguiente manera:

Password:

Nota:Los caracteres del campo de contraseña no se muestran en texto plano, sino con asteriscos*o puntos.en su lugar.

Botones de opción (Radio Buttons)

<input type="radio">La etiqueta define las opciones de botones de opción del formulario:

Ejemplos

<form action="">
<input type="radio" name="sex" value="male">Hombre<br>
<input type="radio" name="sex" value="female">Mujer
</form>

El navegador muestra el resultado de la siguiente manera:

Hombre
Mujer

Casillas de verificación (Checkboxes)

<input type="checkbox">Define una casilla de verificación.

Las casillas de verificación permiten seleccionar una o más opciones:

Ejemplos

<form>
<input type="checkbox" name="vehicle[]" value="Bike">Me gusta la bicicleta<br>
<input type="checkbox" name="vehicle[]" value="Car">Me gusta el automóvil
</form>

El navegador muestra el resultado de la siguiente manera:

Me gusta la bicicleta
Me gusta el automóvil

Botón de envío (Submit)

<input type="submit">Define el botón de envío.

Cuando el usuario hace clic en el botón de confirmación, el contenido del formulario se envía al servidor. El atributo de acción del formularioactiondefine el nombre del archivo en el servidor.

actionEl atributo procesa los datos de entrada del usuario recibidos:

Ejemplos

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

El navegador muestra el resultado de la siguiente manera:

Username:

Si escribe algunas letras en el campo de texto anterior y luego hace clic en el botón de confirmación, los datos de entrada se enviarán ahtml_form_action.phpel archivo, y esa página mostrará el resultado de la entrada.

En el ejemplo anterior hay un atributo method, que se utiliza para definir la forma de enviar los datos del formulario, puede ser uno de los siguientes valores:

  • post: se refiere al método HTTP POST; los datos del formulario se incluyen en el cuerpo del formulario y luego se envían al servidor, se utiliza para enviar datos sensibles, como nombre de usuario y contraseña.

  • get: valor por defecto, se refiere al método HTTP GET; los datos del formulario se adjuntan aactionla URL del atributo, y se utiliza?como separador, generalmente se utiliza para información no sensible, como paginación. Por ejemplo: https://www.example.com/?page=1, aquí page=1 son los datos enviados por el método GET.

Ejemplos

<!-- El siguiente formulario utiliza una solicitud GET para enviar datos a la URL actual, method predeterminado es GET. -->
<form>
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- El siguiente formulario utiliza una solicitud POST para enviar datos a la URL actual. -->
<form method="post">
  <label>Name:
    <input name="submitted-name" autocomplete="name">
  </label>
  <button>Save</button>
</form>

<!-- El formulario utiliza las etiquetas fieldset, legend y label -->
<form method="post">
  <fieldset>
    <legend>Title</legend>
    <label><input type="radio" name="radio"> Select me</label>
  </fieldset>
</form>

Try itMás ejemplos

Botones de opción (Radio buttons)
Este ejemplo demuestra cómo crear botones de opción en HTML.

Casillas de verificación (Checkboxes)
Este ejemplo demuestra cómo crear casillas de verificación en una página HTML. El usuario puede marcar o desmarcar las casillas.

Lista desplegable simple
Este ejemplo demuestra cómo crear una simple lista desplegable en una página HTML. La lista desplegable es una lista de opciones.

Lista desplegable con selección previa
Este ejemplo demuestra cómo crear una simple lista desplegable con un valor preseleccionado.

Área de texto (Textarea)
Este ejemplo demuestra cómo crear un área de texto (control de entrada de texto multilínea). El usuario puede escribir texto en el área de texto. No hay límite en la cantidad de caracteres que se pueden escribir.

Crear un botón
Este ejemplo demuestra cómo crear un botón. Puede personalizar el texto del botón.

Try itEjemplos de formularios

Formulario con borde
Este ejemplo demuestra cómo dibujar un recuadro con título alrededor de los datos.

Formulario con campo de entrada y botón de confirmación
Este ejemplo demuestra cómo añadir un formulario a una página. Este formulario contiene dos campos de entrada y un botón de confirmación.

Formulario con casillas de verificación
Este formulario contiene dos casillas de verificación y un botón de confirmación.

Formulario con botones de opción
Este formulario contiene dos botones de opción y un botón de confirmación.

Enviar un correo electrónico desde un formulario
Este ejemplo demuestra cómo enviar un correo electrónico desde un formulario.

Etiquetas de formularios HTML

New: Nueva etiqueta HTML5

Etiqueta Descripción
<form> Define un formulario para la entrada del usuario
<input> Define un campo de entrada
<textarea> Define un área de texto (un control de entrada de varias líneas)
<label> Define la etiqueta del elemento <input>, generalmente el título de entrada
<fieldset> Define un grupo de elementos de formulario relacionados y los rodea con un recuadro
<legend> Define el título del elemento <fieldset>
<select> Define una lista de opciones desplegables
<optgroup> Define un grupo de opciones
<option> Define una opción en una lista desplegable
<button> Define un botón clicable
<datalist>New Especificar una lista de opciones predefinidas para un control de entrada.
<keygen>New Define el campo generador de pares de claves del formulario.
<output>New Define un resultado de cálculo.
Otras extensiones.