Formularios HTML

Los formularios HTML se utilizan para recopilar diferentes tipos de entradas del usuario, y todos los navegadores admiten la etiqueta <form>. Definición y uso La etiqueta <form> se utiliza para crear formularios HTML para entradas del usuario. Los formularios pueden contener elementos de entrada como campos de texto, casillas de verificación, casillas de selección, botones de envío, etc.

Ejemplo en línea

Crear campo de entrada de texto
Este ejemplo muestra cómo crear un campo de texto en una página HTML. El usuario puede escribir texto en el campo de texto.

Crear campo de entrada de contraseña
Este ejemplo muestra cómo crear un campo de contraseña en HTML.

Formularios HTML

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

Los elementos del formulario permiten que el usuario ingrese contenido en el formulario, como: campos de texto (textarea), listas desplegables, casillas de selección (radio-botones), casillas de verificación (checkboxes) y otros.

El formulario se configura utilizando la etiqueta <form>:

<form>
.
Elementos <input>
.
</form>

Formularios HTML - Elementos de entrada

La etiqueta de formulario más utilizada es la etiqueta de entrada (<input>).

El tipo de entrada se define por el atributo de tipo (type). Los tipos de entrada más utilizados son los siguientes:

Campos de texto (Text Fields)

El campo de texto se define mediante la etiqueta <input type="text">, que se utiliza cuando el usuario necesita ingresar letras, números u otros contents en el formulario.

<form action="/run/demo-form.php"> 　　
First name:<input type="text" name="firstname" size="20"}}/><br/>Last name:<input type="text" name="lastname" size="20"}}/><br/><input type="submit" value="Enviar"/> </form>

El navegador se muestra así:

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

Campo de contraseña

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

<form action="/run/demo-form.php"> 　　
Contraseña:<input type="password" name="pwd"/><input type="submit" value="Enviar"/> </form>

El navegador muestra el siguiente efecto:

Atención:Los caracteres del campo de contraseña no se muestran en texto claro, sino que se sustituyen por asteriscos o puntos.

Botones de opción (Radio Buttons)

<input type="radio"> etiqueta define la opción de selección única del formulario

<form action="/run/demo-form.php"> 　　
<input type="radio" name="sex" value="male"/>Masculino<br/><input type="radio" name="sex" value="female"/>Femenino<input type="submit" value="Enviar"/> </form>

El navegador muestra el siguiente efecto:

Cuadros de selección (Checkboxes)

<input type="checkbox"> define el cuadro de selección. El usuario debe seleccionar una o varias opciones de las dadas.

<form action="/run/demo-form.php"> 　　
<input type="checkbox" name="vehicle" value="Bike"/>Tengo una bicicleta<br/><input type="checkbox" name="vehicle" value="Car"/>Tengo un coche<input type="submit" value="Enviar"/> </form>

El navegador muestra el siguiente efecto:

Botón de envío (Submit Button)

<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 enviará a otro archivo. La propiedad de acción del formulario define el nombre del archivo de destino. El archivo definido por la propiedad de acción generalmente realiza el procesamiento correspondiente de los datos de entrada recibidos.:

<form name="input" action="/run/demo-form.php" method="get">
Nombre de usuario: <input type="text" name="user">
<input type="submit" value="Enviar">
</form>

El navegador muestra el siguiente efecto:

Si escribe algunas letras en el cuadro de texto superior y luego hace clic en el botón de confirmación, los datos de entrada se enviarán a la página "html_form_action.php". Esta página mostrará los resultados de la entrada.

Más ejemplos en línea

Botón de radio (Radio buttons)
Este ejemplo muestra cómo crear un botón de radio en HTML.

Casilla de verificación (Checkboxes)
Este ejemplo muestra cómo crear una casilla de verificación en una página HTML. El usuario puede marcar o desmarcar la casilla de verificación.

Lista desplegable simple
Este ejemplo muestra cómo crear una lista desplegable simple en una página HTML. La lista desplegable es una lista opcional.

Lista desplegable con predeterminado
Este ejemplo muestra cómo crear una lista desplegable simple con un valor predeterminado.

Área de texto (Textarea)
Este ejemplo muestra cómo crear un área de texto (un control de entrada de texto en múltiples líneas). El usuario puede escribir texto en el área de texto. No hay límite en el número de caracteres que se pueden escribir.

Crear botón
Este ejemplo muestra cómo crear un botón. Puede personalizar el texto en el botón.

Ejemplo de formulario

Formulario con borde
Este ejemplo muestra cómo dibujar una caja con título alrededor de los datos.

Formulario con cuadros de texto y botón de confirmación
Este ejemplo muestra cómo agregar un formulario a la página. Este formulario contiene dos cuadros de texto y un botón de confirmación.

Formulario con casillas de selección
Este formulario contiene dos casillas de selección 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.

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

Etiquetas de formulario HTML

New : HTML5Nueva etiqueta