Elementos de formulario HTML
Elementos de formulario HTML
Este capítulo describe todos los elementos de formulario HTML.
El elemento <input>
El elemento de forma más importante es el elemento <input> .
El elemento <input> se puede mostrar de varias maneras, dependiendo delatributo de tipo .
Todos los diferentes tipos de entrada se tratan en el próximo capítulo.
El elemento <select>
El elemento <select> 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>
Los elementos <option> definen una opción que se puede seleccionar.
De forma predeterminada, se selecciona el primer elemento en la lista desplegable.
Para definir una opción preseleccionada, agregue el atributo seleccionado a la opción:
Ejemplo
<option value="fiat" selected>Fiat</option>
El elemento <textarea>
El elemento <textarea> define un campo de entrada de varias líneas ( un área de texto ):
Ejemplo
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
El atributo de filas especifica el número visible de líneas en un área de texto.
El atributo cols especifica el ancho visible de un área de texto.
Así es como se mostrará el código HTML de arriba en un navegador:
El elemento <button>
El elemento <button> define un botón que se puede hacer clic :
Ejemplo
<button type="button" onclick="alert('Hello World!')">Click Me!</button>
Así es como se mostrará el código HTML de arriba en un navegador:
Elementos de forma HTML5
HTML5 agregó los siguientes elementos de formulario:
- <datalist>
- <keygen>
- <resultado>
Nota: los navegadores no muestran elementos desconocidos. Los nuevos elementos que no son compatibles con los navegadores más antiguos no "destruirán" su página web.
Elemento HTML5 <datalist>
El elemento <datalist> especifica una lista de opciones predefinidas para un elemento <input>.
Los usuarios verán una lista desplegable de las opciones predefinidas a medida que ingresan datos.
El atributo list del elemento <input> debe hacer referencia al atributo id del elemento <datalist>.
Ejemplo
<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>
Elemento HTML5 <keygen>
El objetivo del elemento <keygen> es proporcionar una forma segura de autenticar usuarios.
El elemento <keygen> especifica un campo de generador de par de claves en un formulario.
Cuando se envía el formulario, se generan dos claves, una privada y otra 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 usar para generar un certificado de cliente para autenticar al usuario en el futuro.
Ejemplo
Un formulario con un campo keygen:
<form action="/action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>
Elemento HTML5 <output>
El elemento <output> representa el resultado de un cálculo (como uno realizado por un script).
Ejemplo
Realice un cálculo y muestre el resultado en un elemento <output>:
<form action="/action_page.php"
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>
Ponte a prueba con ejercicios!
HTML Elementos de Formulario
= nuevo en HTML5.
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
| <textarea> | Defines a multiline input control (text area) |
| <label> | Defines a label for an <input> element |
| <fieldset> | Groups related elements in a form |
| <legend> | Defines a caption for a <fieldset> element |
| <select> | Defines a drop-down list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <button> | Defines a clickable button |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <keygen> | Defines a key-pair generator field (for forms) |
| <output> | Defines the result of a calculation |
Entradas más populares de este blog
Listado pasaporte y cedulas SAIME 2018
click aqui para descargar el listado en formato pdf 21 de Julio de 2018 Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Saime abre sus oficinas los días sábados Con el propósito de dar celeridad al proceso de entrega de documentos, el Director General del Servicio Administrativo de Identificación, Migración y Extranjería (Saime), Gustavo Vizcaíno Gil, ordenó habilitar todas las oficinas del país los días sábados, únicamente para la entrega de cédulas y pasaportes. Los usuarios podrán ingresar en la página web del Saime www.saime.gob.ve y verificar si están en el listado donde le indicará en que oficina pueden retirar sus documentos de identificación. Esta iniciativa da cumplimiento a la sép...
Etiqueta HTML < abbr >
Etiqueta HTML <abbr> ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Una abreviatura se marca de la siguiente manera: The < abbr title ="World Health Organization" > WHO < /abbr > was founded in 1948. Pruebelo usted mismo » Definición y uso La etiqueta <abbr> define una abreviatura o un acrónimo, como "Sr.", "Dec.", "ASAP", "ATM". Sugerencia: una abreviatura y un acrónimo son versiones abreviadas de otra cosa. Ambos a menudo se representan como una serie de letras. Marcar las abreviaturas puede proporcionar información útil para navegadores, sistemas de traducción y motores de búsqueda. Soporte del navegador Element <abbr> Yes Yes Yes Yes Yes Consejos y notas Consejo: El atributo de título global se puede usar en la etiqueta <abbr> para mostrar la versión completa de la abreviatura / acrónimo al pasar el mouse sobre el elemento <abbr>. Difere...
HTML < a > tag
HTML <a> día ❮ Referencia HTML completa anterior Siguiente ❯ Ejemplo Un enlace a W3Schools.com: < a href ="https://www.w3schools.com" > Visit W3Schools.com! < /a > Pruebelo usted mismo » More "Pruebelo usted mismo" examples below. Definición y uso La etiqueta <a> define un hipervínculo, que se usa para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del enlace. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado está subrayado y morado Un enlace activo está subrayado y rojo Soporte del navegador Element <a> Yes Yes Yes Yes Yes Consejos y notas Sugerencia: los siguientes atributos: descarga, hreflang, medios, rel, destino y tipo no pueden estar presentes si el atributo href no está presente. Consejo: Normalmente,...