HTML validações

Máscaras em inputs HTML
Voltar

TELEFONE:
<input type="tel" name="telefone" placeholder="Telefone" required pattern="\([0-9]{2}\)[0-9]{4,5}-[0-9]{4}">
<input type="text" placeholder="telefone (somente números)" required name="telefoneNumeros" pattern="\d{11}">
    
CPF:
<input type="text" name="cpfCompleto" placeholder="Cpf completo" required pattern="\d{3}\.\d{3}\.\d{3}-\d{2}">
<input type="text" name="cpfNumeros" placeholder="Cpf numeros" required pattern="\d{11}">

CEP:
<input type="text" pattern="[0-9]{5}-[0-9]{3}" name="cep" required placeholder="Cep" style="text-transform: lowercase;">

MOEDA(R$):
<input type="number" name="moeda" lang="en" min=0 step="0.01" required placeholder="Moeda">
<input type="text" required name="moedaLimitada" pattern="\d{1,4}\.\d{2}" placeholder="moeda limitada">

UF:
<input type="text" name="uf" pattern="[a-z]{2}" required placeholder="Uf" style="text-transform: lowercase;">

SENHAS:
<input type="password" name="senha" minlength="6" required placeholder="Senha 6 caracteres">

PLACAS:
<input type="text" name="placaComum" required placeholder="Placa comum" style="text-transform: lowercase;" pattern="[a-z]{3}\d{4}">
<input type="text" name="placaMercosul" required placeholder="Placa mercosul" style="text-transform: lowercase;" pattern="[a-z]{3}[0-9][a-z][0-9]{2}">
<input type="text" name="placaComumMercosul" required placeholder="Placa comum/mercosul" style="text-transform: lowercase;" pattern="[a-z]{3}[0-9][a-z-0-9][0-9]{2}">

TEXTOS:
<input type="text" maxlength="15" name="nome" required placeholder="Nome" style="text-transform: lowercase;">
<textarea rows="5" cols="30" required name="descricao" maxlength="500" placeholder="Descrição" style="text-transform: lowercase; resize: none;"></textarea>

ESTILIZAÇÃO:
input:required:invalid{color: lightcoral;}
input:required:valid{color: lightgreen;}

Elaborado por Mateus Schwede
ubsocial.github.io