Atributo de patrón HTML <entrada>
Ejemplo
Un formulario HTML con un campo de entrada que puede contener solo tres letras (sin números ni caracteres especiales):
<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>
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
El patternatributo especifica una expresión regular con la que
<input>se comprueba el valor del elemento al enviar el formulario.
Nota: el patternatributo funciona con los siguientes tipos de entrada: texto, fecha, búsqueda, URL, teléfono, correo electrónico y contraseña.
Sugerencia: use el atributo global titlepara describir el patrón para ayudar al usuario.
Sugerencia: obtenga más información sobre las expresiones regulares en nuestro tutorial de JavaScript.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el atributo.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Sintaxis
<input pattern="regexp">
Valores de atributos
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Más ejemplos
Ejemplo
Un elemento <input> con type="password" que debe contener 8 o más 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>
Ejemplo
Un elemento <input> con type="password" que debe contener 8 o más caracteres que sean al menos un número y una letra mayúscula y 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>
Ejemplo
Un elemento <input> con type="email" que debe estar en el siguiente orden: caracteres @ caracteres . dominio (caracteres seguidos de un signo @, seguidos de más caracteres y luego un "."
Después de la "." signo, agregue al menos 2 letras de la a a la 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>
Ejemplo
Un elemento <input> con type="search" que NO PUEDE contener los siguientes caracteres: ' o "
<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>
Ejemplo
Un elemento <input> con type="url" que debe comenzar con http:// o https:// seguido de al menos un carácter:
<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>
❮ Etiqueta HTML <entrada>