Validar formulário apenas com HTML e CSS puros
28d atrás
Neste tutorial vamos mostrar a validação de formulários com a maneira nativa do HTML5 e como estilizar os elementos form, input etc, utilizando as pseudo-classes :valid e :invalid do #CSS.
Comece adicionando no seu HTML esse código básico de formulário:
<form>
<label>
Nome
<input name="name" required>
</label>
<label>
Email
<input name="email" type="email" required>
</label>
<button>Enviar</button>
</form>
Agora vamos estilizar o formulário:
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid gren;
}
Para finalizar, adicione o seguinte CSS, que vai deixar o botão de envio mais transparente quando o form estiver inválido.
form:invalid button {
opacity: 0.5;
}
O código completo e o resultado você pode conferir abaixo:
Comentários (0)