Advanced Forms

HTML5 introduced several new input types and validation features that make it easier to create forms that provide a better user experience and reduce the need for custom JavaScript validation.

HTML5 New Input Types

HTML5 added a variety of new input types to enhance forms by offering specific fields for different kinds of data. These input types help ensure users provide the correct type of information and can enhance the usability and accessibility of web forms.

Email

You can use <input type="email"> Validates that the input is a valid email address format.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required />

URL

You can use <input type="url"> Ensures the input is a valid URL format.

<label for="website">Website:</label>
<input type="url" id="website" name="website" />

Telephone

You can use <input type="tel"> For entering phone numbers, though it does not validate the format.

<label for="phone">Phone:</label> <input type="tel" id="phone" name="phone" />

Number

You can use <input type="number"> For numeric input with optional attributes to define range and step.

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="100" step="1" />

Range

You can use <input type="range"> For selecting a value from a range of numbers using a slider.

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" />

Date

You can use <input type="date"> For selecting a date using a date picker.

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday" />

Time

You can use <input type="time"> For selecting a time.

<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment" />

Datetime-local

You can use <input type="datetime-local"> For selecting both date and time, without timezone information.

<label for="meeting">Meeting Date and Time:</label>
<input type="datetime-local" id="meeting" name="meeting" />

Month

You can use <input type="month"> For selecting a month and year.

<label for="start">Start Month:</label>
<input type="month" id="start" name="start" />

Week

You can use <input type="week"> For selecting a specific week of a year.

<label for="week">Week:</label> <input type="week" id="week" name="week" />

Color

You can use<input type="color" /> For selecting a color using acolor picker.

<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000" />

Form Validation

Using HTML5 HTML5 introduces built-in form validation features that make it easier to validate user input without relying on JavaScript. These features include various attributes that define validation rules directly in the HTML.

Required Attribute

required attribute ensures an input field must be filled out before submitting the form.

<label for="username">Username:</label>
<input type="text" id="username" name="username" required />

Pattern Attribute

pattern attributes specifies a regular expression that the input value must match.

<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" required />

Min and Max Attributes

min amd max define the minimum and maximum values for numeric inputs.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" required />

Minlength and Maxlength Attributes

minlength and maxlength attribute specify the minimum and maximum number of characters for text inputs.

<label for="password">Password:</label>
<input
  type="password"
  id="password"
  name="password"
  minlength="8"
  maxlength="20"
  required
/>

Step Attribute

step specifies the legal number intervals for numeric and range inputs.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" step="1" />

Title Attribute

title attribute provides a tooltip that appears when the user hovers over the input field, often used to give hints about the expected input format.

<label for="username">Username:</label>
<input
  type="text"
  id="username"
  name="username"
  required
  title="Username should be alphanumeric."
/>

Custom Error Messages

Gives an option to use JavaScript to provide custom error messages if the built-in validation messages are not sufficient.

<script>
  document
    .getElementById("myForm")
    .addEventListener("submit", function (event) {
      var emailField = document.getElementById("email");
      if (!emailField.validity.valid) {
        emailField.setCustomValidity("Please enter a valid email address.");
      } else {
        emailField.setCustomValidity("");
      }
    });
</script>

Validation Pseudo-Classes

Use CSS pseudo-classes to style inputs based on their validation state.

input:valid {
  border: 2px solid green;
}
input:invalid {
  border: 2px solid red;
}