Entre os elementos aprimorados do HTML5, o mais notável é o elemento de forma. No HTML5, os formulários foram bastante aparados, e alguns recursos que exigiam anteriormente a codificação JavaScript agora podem ser facilmente implementados sem codificação. Antes de iniciar a discussão, uma coisa a observar:
No HTML5, um controle de formulário pode estar fora de uma ou mais formas às quais pertence. Portanto, controles de formulário, como Fieldset, etiqueta e entrada, todos os atributos de formulário adicionaram para identificar o formulário ao qual o controle de formulário pertence. Em html5 :1. O próprio elemento do formulário adiciona dois novos atributos: preenchimento automático e novidato. A propriedade de preenchimento automático é usado para ativar o recurso Lista de sugestões suspensos, e a propriedade Novalidate é usada para desativar o recurso de validação do formulário, que é útil ao testar.
2. O elemento Fieldset adiciona três novos atributos: desativar, nome e forma. A propriedade desativada é usada para desativar o Fieldset, a propriedade Name é usada para definir o nome do campos e o valor da propriedade do formulário é o ID de uma ou mais formas às quais o campos pertence. Como mencionado anteriormente, quando o Fieldset é colocado fora do formulário, você deve definir a propriedade do formulário da tag Fieldset, para que o Fieldset possa ser associado corretamente a um ou mais formulários.
3. Além do atributo for, o elemento da etiqueta adiciona apenas o atributo de formulário. Vale a pena mencionar aqui que o atributo, que nunca prestei atenção antes. O atributo for usado para especificar o controle de formulário conectado ao rótulo. Dessa forma, ao clicar neste rótulo, o controle de formulário anexado ganhará foco, como:
<form action = "Demo_form.asp" id = "form1">
<Label para = "Nome"> Clique em mim </elabel> <input id = "name" type = "text"> </input>
<input type = "submit" value = "submit" />
</morm>
Clique em mim e a seguinte caixa de entrada ganhará foco.
4. O elemento de entrada apresenta alguns novos tipos e atributos para melhorar a usabilidade do formulário. Esses novos tipos de entrada são muito úteis para organizar e classificar dados. Infelizmente, nenhum navegador pode suportar bem todos esses tipos.
Além do botão original, texto, envio, caixa de seleção, rádio, seleção, senha, html5 adiciona os seguintes novos tipos de entrada:
Cor: corVárias datas: data, dateTime, DateTime-local, mês, semana, horário
E -mail: email
Número: Número
Faixa
Pesquisa: Pesquisar
Telefone: Tel
Tipo de URL: URL
Você pode executar o exemplo a seguir para visualizar o status de suporte de diferentes navegadores:
<Form Action = "Demo_Form.asp">
Selecione sua cor favorita: <input type = "color" name = "favcolor" />
Aniversário: <input type = "date" name = "bday" />
Aniversário (data e hora): <input type = "dateTime" name = "bdaytime" />
Aniversário (data e hora): <input type = "DateTime-Local" name = "bdaytime" />
Aniversário (mês e ano): <type de entrada = "mês" name = "bdaymonth" />
Selecione um tempo: <input type = "time" name = "usr_time" />
Selecione uma semana: <input type = "semana" name = "week_year" />
Quantidade (entre 1 e 5): <typ type = "número" name = "quantidade" min = "1" max = "5" />
Quantidade (entre 1 e 10): <typ type = "range" name = "pontos" min = "1" max = "10" />
Pesquise Google: <input type = "pesquisa" name = "googlesearch" />
Telefone: <input type = "tel" name = "usrtel" />
Adicione sua página inicial: <input type = "url" name = "homepage" />
E-mail: <input type = "email" name = "usremail" />
<input src = "submitbutton.png" type = "submit" />
</morm>
A seguir, estão as propriedades de entrada recém -adicionadas:
AutoComplete : exiba automaticamente as informações inseridas anteriormente, com o valor ou desativado. Aplicável ao texto, pesquisa, URL, tel, email, senha, datepickers, alcance e tipos de cores. Foco automático : obtenha o foco automaticamente após o carregamento da página. Formulário : Especifica o formulário ao qual a entrada pertence, que pode ser múltipla. Formato : Especifica a página (URL) ou arquivo que processa essa entrada após o envio do formulário. FormEncType : Especifica como os dados são codificados após o envio do formulário. FormMethod : Especifica o método HTTP para enviar dados de formulário, que substituirão o método HTTP do formulário correspondente. FormNOvalidate : A validade dos dados não é verificada antes do envio. FormTarget : Especifica onde exibir o conteúdo do formulário após o envio. Altura, largura : comprimento e largura da caixa de entrada, aplicáveis apenas aos tipos de imagem. Max, Min : os valores máximos e mínimos do valor de entrada. Aplicável a número significativo, alcance, tipos de data. Múltiplo : se deve permitir que vários valores sejam inseridos, adequados para tipos de email e arquivos. Padrão : Especifica a expressão regular para verificar o valor de entrada, aplicável ao texto, pesquisa, URL, tel, email, senha. Espanceamento de espaço reservado : as informações rápidas antes da entrada, aplicável ao texto, pesquisa, URL, tel, email, senha. Necessário : Se for necessário, se não for necessário, o formulário não poderá ser enviado. Ele se aplica a texto, pesquisa, URL, tel, email, senha, data de data, número, caixa de seleção, rádio e tipos de arquivos. Etapa : insira o valor da etapa ao crescer automaticamente, adequado para o número, alcance, data, dateTime, DateTime-Local, mês, tempo e semana. Lista : A lista candidata de itens de entrada precisa ser usada em conjunto com o elemento de dados. O atributo da lista pode ser usado nesses tipos: texto, pesquisa, URL, tel, email, data, número, alcance e cor. Estima -se que seja válido no Firefox. Veja um pequeno exemplo:<Fieldset>
<legend> Favoritos </legend>
<p>
<Boel>
<input type = "text" name = "favoritos" list = "opções">>
<Datalist ID = "Opções">
<opção value = "A">
<opção value = "b">
<opção value = "c">
</datalist>
</belt>
</p>
</fieldset>
O exemplo a seguir tenta usar várias propriedades, que podem ser executadas em diferentes navegadores para ver o efeito real:
<Form Action = "Demo_Form.asp">
E-mail: <input type = "email" name = "email" autocomplete = "on" />
Imagem: <input type = "image" src = "img_submit.gif"/>
Digite uma data antes de 1980-01-01: <input type = "date" name = "bday" max = "1979-12-31">>
Digite uma data após 2000-01-01: <input type = "date" name = "bday" min = "2000-01-02">
Quantidade (entre 1 e 5): <typ type = "número" name = "quantidade" min = "1" max = "5" />
Selecione imagens: <input type = "file" name = "img" múltipla = "múltiplo" />
Código do país: <input type = "text" name = "country_code" padrão = "[a-za-z] {3}" />
Primeiro nome: <input type = "text" name = "fname" placeholder = "primeiro nome" />
Nome de usuário: <input type = "text" name = "usrname" requerir = "requerir" />
Número: <input type = "número" name = "pontos" step = "3" />
<input type = "envie" />
<input type = "submit" format = "Demo_admin.asp" value = "submeter como admin" />
<input type = "submit" formulactype = "multipart/form-data" value = "submeter como multipart/form-data"/>
<input type = "submite" formula = "post" format = "Demo_post.asp" value = "submeter usando post" />
<input type = "submit" formnovalidate = "formnovalidate" value = "submeter sem validação" />
<input type = "submit" formtarget = "_ em branco" value = "enviar a uma nova janela" />
</morm>
<form action = "Demo_form.asp" id = "form1">
Primeiro nome: <input type = "text" name = "fname" />
<input type = "submit" value = "submit" />
</morm>
Sobrenome: <input type = "text" name = "lname" form = "form1" />
Sugestão: Embora nem todos os navegadores suportem todos os tipos, você ainda é incentivado a usar esses novos tipos, porque, mesmo que o navegador não o suporte, ele apenas degenerará em uma caixa de entrada de texto simples. Referência prática: W3C Tutorial: http://www.w3schools.com/html5/default.aspOrientação oficial do HTML5: http://dev.w3.org/html5/html-author/
Um bom site de guia: http://html5doctor.com/
HTML5 Tutorial chinês: http://www.html5china.com/
Um bom blog de front-end: http://www.pjhome.net/default.asp?cateid=1
Conhecimento relacionado sobre os formulários de operação JS: http://www.vevb.com/xugang/archive/2010/08/12/1798005.html