Atributo de padrão HTML <input>
Exemplo
Um formulário HTML com um campo de entrada que pode conter apenas três letras (sem números ou caracteres especiais):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Mais exemplos de "Experimente você mesmo" abaixo.
Definição e uso
O patternatributo especifica uma expressão regular com a qual o
<input>valor do elemento é verificado no envio do formulário.
Nota: O patternatributo funciona com os seguintes tipos de entrada: texto, data, pesquisa, url, tel, email e senha.
Dica: Use o atributo global titlepara descrever o padrão para ajudar o usuário.
Dica: saiba mais sobre expressões regulares em nosso tutorial de JavaScript.
Suporte ao navegador
Os números na tabela especificam a primeira versão do navegador que suporta totalmente o atributo.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintaxe
<input pattern="regexp">
Valores de atributo
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Mais exemplos
Exemplo
Um elemento <input> com type="password" que deve conter 8 ou mais caracteres:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Exemplo
Um elemento <input> com type="password" que deve conter 8 ou mais caracteres de pelo menos um número e uma letra maiúscula e uma minúscula:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters">
<input type="submit">
</form>
Exemplo
Um elemento <input> com type="email" que deve estar na seguinte ordem: caracteres @ caracteres . domínio (caracteres seguidos por um sinal @, seguido por mais caracteres e, em seguida, um "."
Depois de "." sinal, adicione pelo menos 2 letras de a a z:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Exemplo
Um elemento <input> com type="search" que NÃO PODE conter os seguintes caracteres: ' ou "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Exemplo
Um elemento <input> com type="url" que deve começar com http:// ou https:// seguido por pelo menos um caractere:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
❮ Tag HTML <input>