Atributos de novos elementos de formulário em html5

padronizar: 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. Use 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.

Video: aula 4860 html5 css3 js Formulario Atributo FORM do elemento INPUT

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

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

espaço reservado: o espaço reservado atua como um rótulo temporário mostrando a propósito de um campo de texto sem a necessidade de um rótulo tag. Assim que o usuário ativa 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 o 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 tentar 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} vermelhos sólida

Se um campo é obrigatório (com a requeridos atribuem), ele será considerado inválido até que ele contém algum valor.

Validação: validação de formulário é uma das partes mais difíceis de 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 será associado com o campo inválido. Basta fornecer CSS para sua página manusear o :inválido Estado:

Video: [ Html5 In Arabic ] #22 - Form Attributes - Form [ Action, Method, EncType ]

: Inválido {background-color: vermelhos}

Quando este estado CSS está ativo, quaisquer campos inválidos terá a :inválido styling. Por exemplo, se você tem um cor campo eo estilo CSS fundo vermelho definido aqui, o campo de cor terá um fundo vermelho a menos que o usuário digita uma cor válida (um nome de cor reconhecido ou valor de cor hex). Da mesma forma, o o email campo mostrará vermelho até que 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á se recusar 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.