Elementos de formulario HTML
formulario HTML de una página web permite a un usuario introducir datos que se envían a un servidor para su procesamiento. Los formularios pueden parecerse a los formularios en papel o base de datos porque los usuarios de Internet a llenar los formularios usando casillas de verificación, botones de radio, o campos de texto.
Por ejemplo, las formas se pueden utilizar para introducir datos de envío o de tarjetas de crédito para pedir un producto, o se pueden utilizar para recuperar resultados de búsqueda de un motor de búsqueda.
En este capítulo se describen todos los elementos de formulario HTML.
La <input> Element
El elemento de forma más importante es la <input> elemento.
La <input> elemento puede variar de muchas maneras, dependiendo del type de atributo.
Todos los tipos de entrada HTML están cubiertas en el siguiente capítulo.
La <select> elemento (Drop-Down List)
La <select> elemento define una lista desplegable:
Ejemplo
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select> Inténtalo tú mismo " La <option> elementos se definen las opciones para seleccionar.
La lista mostrará normalmente el primer elemento como seleccionado.
Se puede añadir un atributo seleccionado para definir una opción predefinida.
La <textarea> Element
La <textarea> elemento define un campo de entrada de múltiples líneas ( a text area ) :
Ejemplo
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
El <button> Elemento
La <button> elemento define un botón que se pulse:
Ejemplo
<button type="button" onclick="alert('Hello World!')">Click Me!</button> Inténtalo tú mismo " Así es como el código HTML anterior se muestra en un navegador:
Elementos de formulario HTML 5
HTML5 añade los siguientes elementos de formulario:
- <datalist>
- <keygen>
- <output>
Por defecto, los navegadores no muestran elementos desconocidos. Los nuevos elementos no destruirán su página.
HTML5 <datalist> Element
La <datalist> elemento especifica una lista de opciones predefinidas para un <input> elemento.
Los usuarios podrán ver una lista desplegable de opciones predefinidas, ya que los datos de entrada.
La list atributo de la <input> elemento, debe referirse a la id atributo de la <datalist> elemento.
Ejemplo
Un <input> elemento con los valores predefinidos en un <datalist> :
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form> Inténtalo tú mismo " HTML5 <keygen> Element
El propósito de la <keygen> elemento es proporcionar una forma segura de autenticar a los usuarios.
La <keygen> elemento especifica un campo del generador de par de claves en una forma.
Cuando se envía el formulario, dos claves se generan, una privada y una pública.
La clave privada se almacena localmente, y la clave pública se envía al servidor.
La clave pública se podría utilizar para generar un certificado de cliente para autenticar al usuario en el futuro.
Ejemplo
Una forma con un campo keygen:
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form> Inténtalo tú mismo " HTML5 <output> Element
La <output> elemento representa el resultado de un cálculo (como uno realizado por un script).
Ejemplo
Realizar un cálculo y mostrar el resultado en un <output> elemento:
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form> Inténtalo tú mismo " Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 »
Elementos de formulario HTML
= Nuevo en HTML5.
| Etiqueta | Descripción |
|---|---|
| <form> | Define un formulario HTML para entrada de usuario |
| <input> | Define un control de entrada |
| <textarea> | Define un control de entrada de varias líneas (text area) |
| <label> | Define una etiqueta para un <input> elemento |
| <fieldset> | Grupos elementos relacionados en una forma |
| <legend> | Define un título para un <fieldset> elemento |
| <select> | Define una lista desplegable |
| <optgroup> | Define un grupo de opciones relacionadas en una lista desplegable |
| <option> | Define una opción en una lista desplegable |
| <button> | Define un botón que se pulse |
| <datalist> | Especifica una lista de opciones predefinidas para los controles de entrada |
| <keygen> | Define un campo del generador de par de claves (for forms) |
| <output> | Define el resultado de un cálculo |