Atributo required no HTML5



No HTML5 os formulários ganharam recursos muito interessantes e importantes para otimização do trabalho. Por exemplo, é possível fazer validação de campos sem o uso de JavaScript, fazer validação através de ER (expressões regulares) diretamente no código HTML entre muitas outras.

Para tornar um campo de formulário obrigatório (seu valor precisa ser preenchido) basta, em HTML5, incluir o atributo required:

<input name="nome" required>

Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.

Exemplo prático:

<!DOCTYPE html>
<html lang="pt-BR">
    <head>
        <meta charset="UTF-8" />
        <title>O atributo required</title>
    </head>
    <body>
        <form>
            Nome: <input name="nome" id="nome" type="text" required /></br></br>
            E-mail: <input name="email" id="email" type="email" required /></br></br>
            <input type="submit" value="Enviar" />
        </form>
    </body>
</html>

Quando o usuário tenta enviar sem preencher será apresentado a mensagem de obrigatoriedade:
O usuário preenche o nome mas deixa o e-mail em branco:
O usuário preenche qualquer coisa no campo email, sem as características de e-mail:
O usuário preenche corretamente os campos:






Veja Mais:

- Elemento canvas em HTML5
- Atributo required no HTML5
- Formulário de contato pronto com HTML5
- Como usar Placeholder no HTML5
- Validar CEP com HTML5 usando Pattern
- Colocar vídeo na página com HTML5
- Colocar áudio na página com HTML5
- Elemento Áudio e Vídeo em HTML5
- Criar Formulários em HTML5
- Introdução ao HTML5
- Estrutura de um documento html 5
- Layout em HTML5

 

 

 

0 comentários:

Postar um comentário

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | JCPenney Coupons