Los datos del formulario son muy importantes para un sitio web y es necesario que se envíen al formulario los datos del formulario correctos o válidos. Para asegurarse de que los datos del formulario sean válidos o para que un campo de entrada sea obligatorio, se pueden utilizar varios atributos. Discutiremos los siguientes atributos en este artículo y lo entenderemos con la ayuda de ejemplos.
- Requerido
- Longitud máxima
- Longitud mínima
- mínimo y máximo
- Múltiple
- Patrón
Analicemos todos los puntos uno por uno a través de los ejemplos.
1. Atributo requerido: si desea que una entrada sea obligatoria para el usuario, puede usar el atributo requerido. Este atributo se puede usar con cualquier tipo de entrada, como correo electrónico, URL, texto, archivo, contraseña, casilla de verificación, radio, etc. Esto puede ayudar a que cualquier campo de entrada sea obligatorio.
Sintaxis:
<input type="..." id="..." name="..." required>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <body> <p>Required Attribute</p> <form> <label>Name:</label> <input type="text" required /> <label>Email:</label> <input type="email" required /> <button style="margin-top: 5px">Submit</button> </form> </body> </html>
Producción:
2. Atributo de longitud máxima: el atributo de longitud máxima nos ayuda a especificar la longitud máxima de un campo de entrada en el formulario, es decir, el número máximo. de caracteres que se pueden introducir para el campo específico. Se puede usar para hacer que la longitud máxima de un número de teléfono en la India sea de 10 dígitos para evitar cualquier envío de datos de entrada incorrectos.
Sintaxis:
<input type="..." id="..." name="..." maxlength="...">
Nota: cuando se establece el atributo de longitud máxima, no permitirá que el usuario ingrese más caracteres que los especificados.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <body> <p>Maxlength Attribute</p> <form> <label>Roll No.</label> <input type="text" maxlength="10" required /> <label>Email:</label> <input type="email" required /> <button style="margin-top: 5px">Submit</button> </form> </body> </html>
Producción:
3. Atributo Minlength: El atributo minlength nos ayuda a especificar la longitud mínima de un campo de entrada en el formulario, es decir, el número mínimo. de caracteres que se deben ingresar para el campo específico. Puede ser útil hacer que la longitud mínima de una contraseña que no se pueda adivinar o un número de teléfono en la India sea de 10 dígitos para evitar el envío de datos de entrada incorrectos.
Sintaxis:
<input type="..." id="..." name="..." minlength="...">
Nota: cuando se establece el atributo minlength, un campo de entrada no aceptará caracteres menores que los especificados.
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <body> <p>minlength Attribute</p> <form> <label>Roll No.</label> <input type="text" minlength="5" required /> <label>Email:</label> <input type="email" required /> <button style="margin-top: 5px">Submit</button> </form> </body> </html>
Producción:
4. Atributos mínimo y máximo: los atributos mínimo y máximo del campo de entrada se utilizan para especificar los valores mínimo y máximo permitidos para un campo de entrada. Podemos crear un rango de valores permitidos usando min y max juntos.
min especifica el valor mínimo que puede tener un campo de entrada, mientras que max especifica el valor máximo de un campo.
Los atributos mínimo y máximo funcionan con los distintos tipos de entrada, como número, rango, fecha, fecha y hora, mes, hora y semana. Podemos usar estos atributos en un campo donde queremos que un usuario ingrese alguna cantidad. Podemos establecer el límite máximo y el límite mínimo de la cantidad a ingresar.
Sintaxis:
<input type="..." id="..." name="..." max="..."> <input type="..." id="..." name="..." min="..." max="...">
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <body> <p>Min and max Attributes</p> <form> <label>Amount</label> <input type="number" min="50" max="100" required /> <label>Email:</label> <input type="email" required /> <button style="margin-top: 5px">Submit</button> </form> </body> </html>
Producción:
5. Atributo múltiple: el atributo múltiple puede ayudarnos a permitir que un usuario ingrese más de un valor en un solo campo de entrada. El atributo múltiple solo se puede usar para los tipos de entrada de correo electrónico y archivo.
Sintaxis:
<input type="..." id="..." name="...." multiple>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <body> <p>Multiple Attribute</p> <form> <label>Amount</label> <input type="number" min="50" max="100" required /> <label>Email:</label> <input type="email" multiple required /> <button style="margin-top: 5px">Submit</button> </form> </body> </html>
Producción:
6. Atributo de patrón: el atributo de patrón define un patrón particular que el valor de un campo de entrada debe cumplir cuando se envía el formulario. El atributo de patrón funciona con tipos de entrada de texto, fecha, búsqueda, URL, teléfono, correo electrónico y contraseña. Hacemos uso de expresiones regulares o expresiones regulares para especificar el patrón. Es útil en situaciones en las que queremos que la entrada ingresada debe estar de acuerdo solo con el patrón dado. Las entradas que no cumplan con el patrón no serán aceptadas por el formulario.
Sintaxis:
<input type="...." id="..." name="...." pattern=".....">
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<p>Pattern Attribute</p>
<form>
<label>Tel.</label>
<input type="text" pattern="[0-9]{10}" required />
<label>Email:</label>
<input type="email" multiple required />
<button style="margin-top: 5px">Submit</button>
</form>
</body>
</html>
Producción:
En el ejemplo anterior, el patrón especifica que Tel. puede estar compuesto solo por dígitos y su longitud debe ser 10.
Así es como podemos hacer que los datos del formulario sean obligatorios o agregar ciertas comprobaciones en la entrada que se ingresa.