HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML5 Atributos de formulario HTML5 Tipos de entrada

HTML5 Elementos de formulario

HTML5Tiene varios elementos y atributos relacionados con el formulario.

HTML5 Nuevos elementos de formulario

HTML5 Hay nuevos elementos de formulario:

<datalist>
<keygen>
<output>

Atención:No todos los navegadores admiten HTML5 Un nuevo elemento de formulario, pero puedes usarlos, incluso si el navegador no admite las propiedades de formulario, aún se pueden mostrar como elementos de formulario normales.

HTML5 El elemento <datalist>.

El elemento <datalist> especifica la lista de opciones del campo de entrada.

La propiedad <datalist> especifica que el campo de formulario o entrada debe tener la función de autocompletar. Cuando el usuario comienza a escribir en el campo de autocompletar, el navegador debe mostrar las opciones llenadas en ese campo:

Se utiliza la propiedad lista del elemento <input> para绑定 con el elemento <datalist>.

Ejemplo en línea

El elemento <input> utiliza valores predefinidos de <datalist>:

ejemplo

<!DOCTYPE html>
<html>
<cabecera>　
<meta charset="utf-8">　
<title>教程 básico(oldtoolbag.com)</título>　
</cabecera>
<body>
　　　　
<form action="demo-form.php" method="get">
<input list="languages" name="language">
<datalist id="languages">
　　<option value="C++">
　　<option value="PHP">
　　<option value="Golang">
　　<option value="Python">
　　<option value="Ruby">
</datalist>
<input tipo="submit">
</form>
<p><fuerte>Atención:</fuerte>Internet Explorer　9(versiones anteriores de IE), Safari no admite la etiqueta datalist.</p>
</body>
</html>

Prueba aquí ‹/›

HTML5 Elemento <keygen>

El elemento <keygen> proporciona un método fiable para verificar al usuario.

La etiqueta <keygen> especifica un campo generador de pares de claves para el formulario.

Al enviar el formulario, se generan dos claves: una clave privada y una clave pública.

La clave privada (clave privada) se almacena en el cliente, mientras que la clave pública se envía al servidor. La clave pública se puede usar para verificar más tarde el certificado del cliente (certificado de cliente).

Ejemplo en línea

Formulario con campo keygen:

ejemplo

<!DOCTYPE html>
<html>
<cabecera>　
<meta charset="utf-8">　
<title>教程 básico(oldtoolbag.com)</título>　
</cabecera>
<body>
<form action="demo_form.php" method="get">
　　Nombre de usuario: <input tipo="text" name="username">
　　Encriptar: <keygen name="security_keygen">
　　<input tipo="submit">
</form>
<p><fuerte>Atención:</fuerte>Internet Explorer no admite la etiqueta keygen.</p>
</body>
</html>

Prueba aquí ‹/›

HTML5 Elemento <output>

El elemento <output> se utiliza para diferentes tipos de salida, como salida de cálculo o script:

Ejemplo en línea

Mostrar el resultado de la calculadora en el elemento <output>:

ejemplo

<!DOCTYPE html>
<html>
<cabecera>　
<meta charset="utf-8">　
<title>教程 básico(oldtoolbag.com)</título>　
</cabecera>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)>0
<input tipo="range" id="a" value="50">100
+<input tipo="number" id="b" value="50">
=/<salida name="x" for="a b"></salida>
</form>
<p><fuerte>Atención:</fuerte>　Internet Explorer no admite la etiqueta output.</p>
</body>
</html>

Prueba aquí ‹/›

Html5del formulario inteligente

ejemplo

<!doctype html>
<html>
<cabecera>
<meta charset="utf-8">
<title>Html5del formulario inteligente oldtoolbag.com</título>
</cabecera>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5del formulario inteligente</leyenda>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　correo electrónico：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　tel:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　url:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　número:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　buscar:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　rango:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　color:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　hora:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　fecha:<input type="date" name="" id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="month">
　　　　　　　　　　　　　　　　month:<input type="month" name="" id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="week">
　　　　　　　　　　　　　　　　week:<input type="week" name="" id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input type="submit" value="Enviar"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

Prueba aquí ‹/›

HTML5 Elementos nuevos de formulario

Etiqueta	Descripción
<datalist>	La etiqueta <input> define una lista de opciones. Por favor, utilice este elemento junto con el elemento input para definir los valores posibles del input.
<keygen>	La etiqueta <keygen> especifica un campo generador de pares de claves para formularios.
<output>	La etiqueta <output> define diferentes tipos de salida, como la salida de scripts.

HTML5 Atributos de formulario HTML5 Tipos de entrada