Atributo de patrón HTML
Definición y uso
El patternatributo especifica una expresión regular con la que
<input>se comprueba el valor del elemento.
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.
Se aplica a
El patternatributo se puede utilizar en el siguiente elemento:
| Elemento | Atributo |
|---|---|
| <entrada> | patrón |
Ejemplos
Ejemplo de entrada
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">
Country code: <input type="text" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
Ejemplo de contraseña
Un elemento <input> con type="password" que debe contener 6 o más caracteres:
<form action="/action_page.php">
Password: <input type="password" name="pw" pattern=".{6,}" title="Six or more characters">
<input type="submit">
</form>
Ejemplo de contraseña
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">
Password: <input type="password" name="pw" 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>
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 | Not supported | 9.6 |