Em formulário HTML, tornar um campo obrigatório garante que o usuário preencha informações essenciais, evitando erros ou omissões nos dados enviados.
Antigamente, para deixar um campo obrigatório tínhamos que usar condições, como if e else, para condicionar o usuário, forçá-lo a ter que preencher certo campo para então ser apto a enviar as informações do formulário.
Agora há um atributo HTML chamado required, que traduzido para o português fica “requerido” ou “obrigatório”.
O atributo required pode ser usado dentro de inputs dos tipos: text, search, url, tel, email, password, date pickers, number, checkbox, radio e file.
Ele dita a ordem da casa e obriga que um campo seja preenchido antes de enviar o formulário.
Dica: clique aqui para acessar mais posts sobre HTML.
Dica: se você está aprendendo CSS, deveria aprender também um framework para ter mais produtividade. Clique aqui para ver posts sobre Bootstrap.
Usando o atributo required para forçar o usuário não deixar um campo vazio
Para deixar um campo HTML com preenchimento obrigatório basta colocarmos a palavra required dentro do input. É bem simples, veja:
<input type="text" id="campoNome" name="campoNome" required>
Aqui está um exemplo mas completo, onde há dois campos, porém, apenas o campo nome é obrigatório e o idade não.
<form> <label for="campoNome">Nome:</label> <input type="text" id="campoNome" name="campoNome" required> <input type="number" id="campoIdade" name="campoIdade"> <button type="submit">Enviar</button> </form>