HTML5 - Web Forms 2.0

O Web Forms 2.0 é uma extensão dos recursos de formulários encontrados no HTML4. Os elementos e atributos do formulário no HTML5 fornecem um grau maior de marcação semântica do que no HTML4 e nos livram de muitos scripts e estilos tediosos que eram exigidos no HTML4.

O elemento <input> em HTML4

Os elementos de entrada HTML4 usam o type atributo para especificar o tipo de dados. HTML4 fornece os seguintes tipos -

Sr. Não.	Tipo e descrição
1	text Um campo de texto de formato livre, nominalmente livre de quebras de linha.
2	password Um campo de texto de formato livre para informações confidenciais, nominalmente livre de quebras de linha.
3	checkbox Um conjunto de zero ou mais valores de uma lista predefinida.
4	radio Um valor enumerado.
5	submit Uma forma livre de botão inicia o envio do formulário.
6	file Um arquivo arbitrário com um tipo MIME e, opcionalmente, um nome de arquivo.
7	image Uma coordenada, relativa ao tamanho de uma imagem em particular, com a semântica extra de que deve ser o último valor selecionado e inicia o envio do formulário.
8	hidden Uma string arbitrária que normalmente não é exibida para o usuário.
9	select Um valor enumerado, muito parecido com o tipo de rádio.
10	textarea Um campo de texto de formato livre, nominalmente sem restrições de quebra de linha.
11	button Uma forma livre de botão que pode iniciar qualquer evento relacionado ao botão.

A seguir está um exemplo simples de uso de rótulos, botões de opção e botões de envio -

... 
<form action = "http://example.com/cgiscript.pl" method = "post">  
   <p> 
      <label for = "firstname">first name: </label> 
      <input type = "text" id = "firstname"><br /> 
   
      <label for = "lastname">last name: </label> 
      <input type = "text" id = "lastname"><br /> 
   
      <label for = "email">email: </label> 
      <input type = "text" id = "email"><br> 
   
      <input type = "radio" name = "sex" value = "male"> Male<br> 
      <input type = "radio" name = "sex" value = "female"> Female<br> 
      <input type = "submit" value = "send"> <input type = "reset"> 
   </p> 
</form> 
 ...

O elemento <input> em HTML5

Além dos atributos mencionados acima, os elementos de entrada HTML5 introduziram vários novos valores para o typeatributo. Eles estão listados abaixo.

NOTE - Experimente todos os exemplos a seguir usando a versão mais recente do Opera navegador.

Sr. Não.	Tipo e descrição
1	data hora Uma data e hora (ano, mês, dia, hora, minuto, segundo, frações de segundo) codificados de acordo com ISO 8601 com o fuso horário definido para UTC.
2	datetime-local Uma data e hora (ano, mês, dia, hora, minuto, segundo, frações de segundo) codificados de acordo com ISO 8601, sem informações de fuso horário.
3	encontro Uma data (ano, mês, dia) codificada de acordo com ISO 8601.
4	mês Uma data que consiste em um ano e um mês codificado de acordo com a ISO 8601.
5	semana Uma data que consiste em um ano e um número de semana codificado de acordo com ISO 8601.
6	Tempo Um tempo (hora, minuto, segundos, segundos fracionários) codificado de acordo com ISO 8601.
7	número Aceita apenas valores numéricos. O atributo step especifica a precisão, padronizando para 1.
8	alcance O tipo de intervalo é usado para campos de entrada que devem conter um valor de um intervalo de números.
9	o email Aceita apenas o valor do email. Este tipo é usado para campos de entrada que devem conter um endereço de e-mail. Se você tentar enviar um texto simples, será necessário inserir apenas o endereço de e-mail no formato [email protected].
10	url Aceita apenas valores de URL. Este tipo é usado para campos de entrada que devem conter um endereço URL. Se você tentar enviar um texto simples, será necessário inserir apenas o endereço URL no formato http://www.example.com ou no formato http://example.com.

O elemento <output>

HTML5 introduziu um novo elemento <output> que é usado para representar o resultado de diferentes tipos de saída, como saída escrita por um script.

Você pode usar o foratributo para especificar um relacionamento entre o elemento de saída e outros elementos no documento que afetaram o cálculo (por exemplo, como entradas ou parâmetros). O valor do atributo for é uma lista separada por espaço de IDs de outros elementos.

<!DOCTYPE HTML>

<html>
   <head>
      <script type = "text/javascript">
         
         function showResult() {
            x = document.forms["myform"]["newinput"].value;
            document.forms["myform"]["result"].value = x;
         }
      </script>
   </head>
   
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get" name = "myform">
         Enter a value : <input type = "text" name = "newinput" />
         <input type = "button" value = "Result"  onclick = "showResult();" />
         <output name = "result"></output>
      </form>
		
   </body>
</html>

Isso produzirá o seguinte resultado -

O atributo placeholder

HTML5 introduziu um novo atributo chamado placeholder. Este atributo nos elementos <input> e <textarea> fornecem uma dica para o usuário do que pode ser inserido no campo. O texto do espaço reservado não deve conter retornos de carro ou avanços de linha.

Aqui está a sintaxe simples para o atributo placeholder -

<input type = "text" name = "search" placeholder = "search the web"/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Crome.

<!DOCTYPE HTML>

<html>
   <body>

      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "email" name = "newinput" 
            placeholder = "[email protected]"/>
         <input type = "submit" value = "submit" />
      </form>

   </body>
</html>

Isso produzirá o seguinte resultado -

O atributo autofocus

Este é um padrão simples de uma etapa, facilmente programado em JavaScript no momento do carregamento do documento, com foco automático em um campo de formulário específico.

HTML5 introduziu um novo atributo chamado autofocus que seria usado da seguinte forma -

<input type = "text" name = "search" autofocus/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" autofocus/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

O atributo obrigatório

Agora você não precisa ter JavaScript para validações do lado do cliente, como uma caixa de texto vazia nunca seria enviada porque o HTML5 introduziu um novo atributo chamado required que seria usado da seguinte forma e insistiria em ter um valor -

<input type = "text" name = "search" required/>

Este atributo é compatível apenas com as versões mais recentes dos navegadores Mozilla, Safari e Chrome.

<!DOCTYPE HTML>

<html>
   <body>
   
      <form action = "/cgi-bin/html5.cgi" method = "get">
         Enter email : <input type = "text" name = "newinput" required/>
         <p>Try to submit using Submit button</p>
         <input type = "submit" value = "submit" />
      </form>
      
   </body>
</html>

Isso produzirá o seguinte resultado -