Atributos de New Form Elements em HTML5

HTML5 introduz novos elementos de formulário e dá a todos os elementos do formulário algumas coisas novas. Como você projetar e construir páginas web, você pode aplicar esses novos atributos e capacidades para qualquer elemento do formulário:

• autofocus: Um elemento com esse atributo é o foco da primeira entrada do usuário. É comum aplicar o autofocus atribuir ao primeiro elemento da sua forma, e ter apenas um autofocus campo por formulário. O código é semelhante:

  Se o navegador não aceitar a autofocus atributo, nada prejudicial vai acontecer, e você ainda pode usar uma solução baseada em javascript.

• padrão: Com isso, você pode especificar uma expressão regular usada para validar o formulário. Se o conteúdo corresponde à expressão regular, o campo será considerado válido. Utilize este atributo somente quando as técnicas de validação padrão não são suficientes, já que pode ser difícil para depurar expressões regulares.

  Quando você especificar um padrão, também incluem um título atributo para indicar que o padrão é, como o código de exemplo:

  O navegador pode usar isso como uma dica para o usuário. Ele também pode ser útil para adicionar informações padrão como texto de espaço reservado.

  espaço reservado: o espaço reservado actua como um rótulo temporária que mostra o efeito de um campo de texto sem a necessidade de um rótulo tag. Assim que o utilizador activa o campo, o texto do espaço reservado desaparece. Uma amostra do código simples:

  Nem todos os navegadores suportam texto do espaço reservado, e alguns vão simplesmente ignorar a espaço reservado atributo. Da mesma forma, se o campo já está preenchido, o espaço reservado não será visível. Por estas razões, adicionar um rótulo que os usuários saibam o que digitar em cada área de texto.

  texto do espaço reservado é especialmente útil para indicar como a entrada deve ser formatado (especialmente se isso vai ser executada pela validação ou um padrão).

• requeridos: navegadores que suportam irá marcar todos requeridos campos (talvez, destacando-os em vermelho), se não forem preenchidos. Alguns navegadores irá também enviar um aviso se o usuário tenta enviar um formulário com campos obrigatórios vazios.

  O especial :requeridos pseudo-classe permite-lhe aplicar um estilo CSS a todos os elementos necessários em seu formulário (dando-lhes uma borda ou cor de fundo, por exemplo). Aqui está um exemplo de um estilo CSS para a marcação de elementos necessários com uma borda vermelha:

   : Necessário {border: 1px solid vermelhos}

  Se um campo é requerido (com o requeridos atributo), ela será considerada inválida até que tenha algum valor.

  Validação: validação de formulário é uma das partes mais difíceis do desenvolvimento Web. É muito fácil de configurar um formulário que solicita informações do usuário, mas pode ser bastante difícil de ter certeza de que o usuário insere informações corretamente.

  HTML5 ajuda-lo. Quando você usa os elementos de entrada para fins especiais, o navegador irá verificar automaticamente o campo de formulário para garantir que ele está em um formato adequado. Se a entrada não é válido, o formulário (em geral) não apresentar, eo especial :inválido CSS pseudo-classe vai ser associado com o campo inválido. Basta fornecer CSS para sua página manusear o :inválido Estado:

  : Inválido {background-color: red-}

  Quando este estado CSS está activo, todos os campos inválidos terá a :inválido styling. Por exemplo, se você tem um cor campo e o estilo de fundo CSS vermelho definido aqui, o campo de cor terá um fundo vermelho, a menos que o usuário insere uma cor válida (um nome de cor reconhecida ou valor de cor hex). Da mesma forma, o o email campo mostrará vermelho até um endereço de e-mail válido é inserido. Você não precisa adicionar qualquer outro código para o formulário. Basta adicionar CSS para exibir as entradas inválidas, eo navegador fará o resto.

  Você pode desativar a validação para qualquer campo, adicionando o novalidate atribuir a esse elemento.

  É possível que o navegador irá recusar-se a processar uma forma até que todos os campos são validados, mas esse comportamento ainda não parece ser universal entre os navegadores compatíveis com HTML5.