English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5Possui vários elementos e atributos relacionados ao formulário.
HTML5 Existem novos elementos de formulário:
<datalist>
<keygen>
<output>
Atenção:Não todos os navegadores suportam HTML5 Novo elemento de formulário, mas você pode usá-lo, mesmo que o navegador não suporte os atributos de formulário, ele ainda pode ser exibido como um elemento de formulário convencional.
O elemento <datalist> define a lista de opções do campo de entrada.
<datalist> propriedade define que o campo form ou input deve ter funcionalidade de autocompletar. Quando o usuário começar a digitar no campo de autocompletar, o navegador deve exibir as opções preenchidas no campo:
使用 <input> 元素的列表属性与 <datalist> 元素绑定.
<input> 元素使用<datalist>预定义值:
<!DOCTYPE html> <html> <cabeçalho> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</título> </cabeçalho> <corpo> <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 type="submit"> </form> <p><negrito>Atenção:</strong>Internet Explorer 9（更早 IE 版本），Safari 不支持 datalist 标签.</p> </body> </html>Testar e Verificar ‹/›
<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
带有keygen字段的表单:
<!DOCTYPE html> <html> <cabeçalho> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</título> </cabeçalho> <corpo> <form action="demo_form.php" method="get"> 用户名: <input type="text" name="username"> 加密: <keygen name="security_keygen"> <input type="submit"> </form> <p><negrito>Atenção:</strong>Internet Explorer 不支持 keygen 标签.</p> </body> </html>Testar e Verificar ‹/›
<output> 元素用于不同类型的输出，比如计算或脚本输出：
将计算结果显示在 <output> 元素:
<!DOCTYPE html> <html> <cabeçalho> <meta charset="utf-8"> <title>基础教程(oldtoolbag.com)</título> </cabeçalho> <corpo> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)>0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<saída name="x" for="a b"></saída> </form> <p><negrito>Atenção:</negrito> Internet Explorer não suporta o rótulo output.</p> </body> </html>Testar e Verificar ‹/›
<!doctype html> <html> <cabeçalho> <meta charset="utf-8"> <título>Html5do formulário inteligente oldtoolbag.com</título> </cabeçalho> <corpo> <form action="demo-form.php"> <campo-de-jogo> <legenda>Html5do formulário inteligente</legenda> <label for="email"> email：<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"> pesquisa:<input type="search" name="" id="search"/> </label> <label for="range"> espaço:<input type="range" name="" id="range" value="60" min="0" max="100"/> </label> <label for="color"> cor:<input type="color" name="" id="color"/> </label> <label for="time"> hora:<input type="time" name="" id="time"/> </label> <label for="date"> data:<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>Testar e Verificar ‹/›
| Etiqueta | Descrição |
| <datalist> | A tag <input> define uma lista de opções. Use este elemento em conjunto com o elemento input para definir os valores possíveis do input. |
| <keygen> | A tag <keygen> define um campo gerador de par de chaves para o formulário. |
| <output> | A tag <output> define diferentes tipos de saída, como a saída de scripts. |