O HTML5 foi iniciado pelo WHEWG (Grupo de Trabalho de Tecnologia de Aplicativos de Aplicativo da Web Hypertext). O nome inicial foi o aplicativo da web 1.0. Esse padrão absorveu o padrão Web Forms 2.0 e foi adotado pelas organizações W3C para se fundir na próxima geração do padrão HTML5.
Prefácio
Como o idioma com a linguagem de programação mais extensa atualmente, a linguagem HTML possui as características da compatibilidade de plataforma fácil de usar, rápida e multi-navegação. No entanto, com o progresso dos tempos, o padrão HTML estagnou. Desta vez, pode -se dizer que a atualização do padrão HTML5, que ainda está em desenvolvimento, trouxe nova vitalidade a esse idioma de marcação. Este artigo se concentrará nos formulários da Web 2.0 no HTML5, ou seja, a parte do formulário.
Os formulários são controles comuns (conjuntos) nas páginas da web. Desde o registro e o login do site até os sistemas de gerenciamento de dados corporativos, existem basicamente formulários. A razão pela qual os formulários são tão importantes é principalmente porque são responsáveis pela tarefa de atualizar e interagir com um grande número de usuários e dados de fundo da Web. Pode -se dizer que os desenvolvedores da Web amam e odeiam formulários da Web. Eles adoram sua função conveniente de coletar e organizar dados e odeiam suas funções em grande parte. Algumas funções que parecem comuns nos usuários finais do site, como verificação de tipo de entrada, verificação de formulários, prompts de erro etc., todos os desenvolvedores precisam gastar muito esforço para usar o JavaScript e a programação DOM para atender a esses pontos funcionais naturalmente exigidos. Com a popularidade do Ajax, algumas bibliotecas de ferramentas JavaScript, como Dojo, Yui, etc., forneceram widgets JavaScript convenientes ou APIs para reduzir o ônus dos desenvolvedores.
O HTML5 Web Forms 2.0 é uma melhoria abrangente nos formulários da Web atuais. Ao manter os recursos simples e fáceis de usar, ele adiciona muitos controles internos ou atributos de controle para atender às necessidades dos usuários e reduz a programação dos desenvolvedores. Na minha opinião, o HTML5 melhorou principalmente o formulário da web atual nos seguintes aspectos:
<Tipo de entrada = url> </input><Tipo de entrada = email> </input>
<Tipo de entrada = Data> </sput>
<select Data = http: // domain/getmyoptions> </leclect>
<Tipo de entrada = Texto necessário> </input><Tipo de entrada = número min = 10 max = 100> </input>
<Prensens><Nome do campo = Nome Índice = 0> Peter </field>
<nome do campo = Índice de senha = 0> Senha </field>
</submission>
Vou usar o novo sistema de formulários do HTML5 para criar uma interface de registro simples de usuários, incluindo nome de usuário, senha, data de nascimento, questões de confidencialidade etc. O código é o seguinte:
<! Doctype html> <html> <head> <estilo> P Rótulo {width: 180px; flutuar: esquerda; Alinhamento de texto: à direita; Potding-Right: 10px} tabela {margem-left: 80px} tabela td {borda-bottom: 1px Solid #ccccccc} input.subMit {margin-left: 80px} </style> </head> <body> <formato = '/registro' esplpx} </style> </head> <body> <form ação = '/registr' ' = 'Nome'> id (use email para registrar) </elabel> <nome de entrada = 'nome' exigido tipo = 'email'> </input> </p> <p> <Label para = 'senha'> senha </elabel> <input name = 'senha' type = 'senha'> </input> </p> <p> <bel 'para =' '' '' '> </p> <p> <Label para = 'gênero'> nacionalidade </elabel> <select name = 'country' data = 'países.xml'> </leclect> </p> <p> <etiqueta para = 'photo'> Avatar pessoal </belt> <tabela de entrada = 'name' name = 'foto' aceit = 'imagem/*'/ modelo = questionid>+</botão> Pergunta de confidencialidade </td> <td> resposta </td> <td> </td> </head> <tr id id = questionId repetição = modelo repetição-start = 1 repetição-min = 1 repetição-max = 3> <td> <input type = nome do texto = perguntas [questionid] .q> </td Nome = perguntas [questionId] .a> </td> <td> <botão TIPO = REMOVERAR> DELETE </BOTTLE> </TD> </TR> </tabela> <p> <input type = 'submit' value = 'send' class = 'submit'/> </p> </form> </body> </html>Como o padrão HTML5 ainda está em desenvolvimento, diferentes navegadores suportam o HTML5 aparece bastante limitado. Entre eles, a ópera suporta melhor em forma. Este exemplo é executado normalmente no Opera9. As renderizações são as seguintes:
Este exemplo usa alguns novos elementos de formulário HTML5, como a caixa de entrada do tipo de email (ID) e a caixa de entrada do tipo de data (data de nascimento). E um modelo duplicado é usado para orientar os usuários para preencher problemas de confidencialidade. No upload de avatares personalizados, restringindo os tipos de arquivos, os usuários podem escolher imagens para o upload de conteúdo que atenda aos padrões. A caixa de entrada de seleção suspensa para a seleção de nacionalidade do usuário é usada na forma de uma fonte de dados de divulgação. A fonte de dados de divulgação usa coutries.xml, e o conteúdo é o seguinte:
<select xmlns = http: //www.w3.org/1999/xhtml> <pution> China </pption> <pution> Japão </pption> <pution> corea </pption> </select>
E o Enctype do formulário é o aplicativo/x-www-forma+xml, ou seja, o envio HTML5 XML. Portanto, uma vez que a verificação do formulário for passada, o conteúdo do formulário será enviado no XML. Você também descobrirá que, se não houver valor na caixa de entrada de identificação, ou se uma sequência de tipo que não seja do email for inserida, depois de tentar enviar o formulário, haverá uma mensagem de erro, que será incorporada ao navegador.
A atualização do HTML5 para formar controles é, sem dúvida, muito emocionante. Este artigo descreve alguns novos recursos de formulários, e alguns novos recursos também são muito emocionantes. Acredito que, com o desenvolvimento aprofundado dos padrões e a melhoria adicional do suporte ao navegador para o HTML5, o trabalho de projetar um formulário simples e fácil de usar se tornará muito fácil.