6.1 The required Attribute
Data validation in forms is a crucial aspect of web development that helps ensure the accuracy and integrity of the information entered. HTML offers a bunch of built-in attributes for input validation, like required, pattern, min, max, as well as placeholder and value attributes that enhance user interaction with the form.
The required attribute specifies that a form field must be filled out. The browser won't let you submit the form if a field marked as required is left empty.
Syntax
<input type="text" name="username" required>
Example Usage
<form action="/" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<button type="submit">Submit</button>
</form>
Explanation
If the required attribute is specified, the user must fill out the field before submitting the form. If the field is empty, the browser will show an error message and refuse to submit the form.
6.2 The pattern Attribute
The pattern attribute allows you to define a regular expression for validating input data. If the data entered doesn't match the specified pattern, the browser will show an error message and won't submit the form.
Syntax
<input type="text" name="username" pattern="[A-Za-z]{3,}">
Example Usage
The pattern attribute sets a regular expression that the input must match. In this example, the username must only contain letters and be at least three characters long.
<form action="/" method="post">
<label for="username">Username (letters only, at least 3 characters):</label>
<input type="text" id="username" name="username" pattern="[A-Za-z]{3,}" required>
<button type="submit">Submit</button>
</form>
6.3 The min and max Attributes
The min and max attributes are used to set the minimum and maximum allowable values for numerical and date fields.
Syntax
<input type="number" name="age" min="18" max="99">
Example Usage
Number Field
min: sets the minimum allowed value. In this example, the minimum age is 18.max: sets the maximum allowed value. In this example, the maximum age is 99.
<form action="/" method="post">
<label for="birthday">Date of Birth (from 1900-01-01 to 2024-12-31):</label>
<input type="date" id="birthday" name="birthday" min="1900-01-01" max="2024-12-31" required>
<button type="submit">Submit</button>
</form>
6.4 The placeholder Attribute
The placeholder attribute sets a placeholder text that's displayed inside the input field until the user starts typing. This attribute helps users understand what kind of data is expected in that field.
Syntax
<input type="text" name="username" placeholder="Enter your username">
Example Usage
The placeholder attribute displays text inside the input field until the user starts typing. In this example, the placeholder text is "Enter your username".
<form action="/" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username" required>
<button type="submit">Submit</button>
</form>
6.5 The value Attribute
The value attribute sets the initial value for an input element. This value will be displayed in the field when the page loads or the form is reset.
Syntax
<input type="text" name="username" value="default user">
Example Usage
The value attribute sets the initial value of the input field. In this example, the default username is "default user".
<form action="/" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" value="default user" required>
<button type="submit">Submit</button>
</form>
GO TO FULL VERSION