Enhancing Forms with HTML5 Features

Mastering HTML5 Form Enhancements

On Day 9, we focus on taking your form-building skills to the next level with powerful features introduced in HTML5. Forms are an essential part of any website, and enhancing them with the latest HTML5 capabilities improves both functionality and user experience.

You’ll start by exploring HTML5’s new input types, such as date, range, color, email, and number, which streamline the process of data entry by providing specialized, user-friendly input fields. These types allow users to input data more easily and accurately, reducing the likelihood of errors and ensuring higher-quality data collection.

Next, you’ll delve into advanced form attributes, such as autofocus, autocomplete, novalidate, and pattern. These attributes give you more control over how your forms behave and interact with users. For example, you can set certain fields to be automatically focused when the form loads, suggest previously entered values, or enforce specific data formats with regular expressions. These enhancements create a smoother, more intuitive form-filling process.

The session also covers built-in HTML5 form validation, which allows you to create forms that automatically check for basic errors without the need for JavaScript. You’ll learn how to use attributes like required, minlength, maxlength, and pattern to enforce field requirements and data formats, minimizing the need for custom validation scripts and ensuring that users provide valid inputs.

By the end of the session, you’ll be able to create more dynamic and accessible forms with less reliance on JavaScript for basic validation. These features will significantly improve the overall user experience by providing clear, real-time feedback and making the form submission process more efficient.

This session equips you with practical knowledge that can be applied immediately, ensuring that your web forms are more functional, secure, and user-friendly. Prepare to enhance the quality of your forms and take your front-end development skills to new heights!

Meta Data for “Mastering HTML5 Form Enhancements”

• Title: Mastering HTML5 Form Enhancements: Input Types, Attributes, and Built-in Validation
• Description: Discover how to enhance your web forms using HTML5’s new input types, advanced attributes, and built-in validation features. Learn to create dynamic, user-friendly forms with reduced reliance on JavaScript, improving data collection and user experience.
• Keywords: HTML5 forms, input types, form attributes, form validation, autofocus, autocomplete, novalidate, pattern, required fields, web development, front-end forms, user experience, form enhancements, form validation HTML5.
• Category: Web Development, HTML5, Front-End Development, User Interface
• Date Published: [Insert Date]
• Content Type: Educational Session Preview, Tutorial
• Target Audience: Web developers, front-end developers, HTML learners, web designers, UX/UI developers
• Word Count: [Insert Word Count]
• Reading Time: Approx. 5-7 minutes

Table of Content

• Session Preview
• Session Details
  • HTML5 Input Types
    • Date Input Type
    • Range Input Type
    • Color Input Type
    • Email Input Type
    • Number Input Type
  • Form Attributes
    • Autofocus Attribute
    • Autocomplete Attribute
    • Novalidate Attribute
    • Pattern Attribute
  • Enhanced Validation
    • Required Attribute
    • Min/Max Length
    • Pattern Validation
• Exercise
• Interview Questions

Session Details

HTML5 Input Types

1. Date Input Type

The date input type is a user-friendly way to capture dates. It includes a built-in calendar interface, allowing users to pick a date from a visual calendar, ensuring the date format is always correct (YYYY-MM-DD). This input type eliminates manual entry errors, as users select from predefined options rather than typing dates themselves.

Example:

<label for="event-date">Choose your event date:</label>
<input type="date" id="event-date" name="event-date" required>

Use Case:
Imagine you are creating an event management system where users can register for events. The system needs a field for users to input the event date. Using the date input type ensures users always select a valid date without the need to type or manually format the date. This makes date entry simple and accurate, especially across different browsers and regions.

Project Example:
In an Event Registration Form, users must select the date they plan to attend the event. By using the date input type, users can easily pick a valid date from the calendar interface.

<form action="/submit-event" method="post">
  <label for="event-date">Event Date:</label>
  <input type="date" id="event-date" name="event-date" required><br><br>

  <button type="submit">Submit Registration</button>
</form>

2. Range Input Type

The range input type introduces a slider interface that lets users choose a number within a specified range. This is ideal for scenarios where precision isn’t required, and users need to make quick adjustments.

Example:

<label for="volume">Set volume level:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="10">

Use Case:
Imagine building an audio player where users adjust the volume level. With the range input type, users can drag a slider to set the volume from 0 to 100. This is easier than typing a specific number and offers a better user experience.

Project Example:
In a User Feedback Form, users rate their satisfaction with a service on a scale from 1 to 10 using the range input type.

<form action="/submit-feedback" method="post">
  <label for="satisfaction">Rate Your Satisfaction (1-10):</label>
  <input type="range" id="satisfaction" name="satisfaction" min="1" max="10" step="1"><br><br>

  <button type="submit">Submit Feedback</button>
</form>

3. Color Input Type

The color input type adds a color picker tool, enabling users to select a color visually instead of typing in hexadecimal values. This can be especially useful in design-related applications where users need to customize colors.

Example:

<label for="favcolor">Pick your favorite color:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

Use Case:
You’re developing a design tool that allows users to customize their profile page’s background color. Using the color input type, users can select their preferred color directly from a color picker, rather than inputting a complicated color code.

Project Example:
In a Profile Customization Form, users can select the color for their profile background using the color input type.

<form action="/submit-profile" method="post">
  <label for="favcolor">Pick Your Profile Color:</label>
  <input type="color" id="favcolor" name="favcolor" value="#ff0000"><br><br>

  <button type="submit">Save Profile</button>
</form>

4. Email Input Type

The email input type simplifies the process of capturing valid email addresses. Browsers automatically validate that the input contains the correct format (e.g., user@example.com) and may also provide additional benefits, such as mobile keyboards optimized for email input.

Example:

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

Use Case:
Every web application requires an email field for user registration or newsletter sign-ups. By using the email input type, you ensure that users provide correctly formatted email addresses, helping prevent issues like typo-filled emails that can affect future communication.

Project Example:
In a Newsletter Sign-Up Form, users must enter their email to subscribe. The email input type helps ensure that only valid email addresses are submitted.

<form action="/submit-newsletter" method="post">
  <label for="email">Enter Your Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <button type="submit">Subscribe</button>
</form>

5. Number Input Type

The number input type is designed for numeric input. It allows users to increase or decrease values using arrow steppers, ensuring only valid numbers are entered. You can also set a minimum, maximum, and step value to limit the range of acceptable inputs.

Example:

<label for="quantity">Select the number of tickets:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" required>

Use Case:
In an online store, users need to select the quantity of items they want to purchase. By using the number input type, users can only select a valid number within the specified range, ensuring accurate and smooth data entry.

Project Example:
In an Online Shopping Cart, users can specify the number of items they wish to purchase using the number input type. It ensures valid numeric entries and makes it easier to control quantities.

<form action="/submit-order" method="post">
  <label for="quantity">Select Quantity (1-10):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" required><br><br>

  <button type="submit">Add to Cart</button>
</form>

Complete Project Example: Event Registration Form

Now, let’s bring all these input types together in a real-world project. You’ll create an event registration form for a conference that includes the following features:

1. Event Date Selection: Users can choose their preferred event date using the date input type.
2. Excitement Rating: Users rate their excitement level for the event using the range input type.
3. Personalized Badge Color: Users select a color for their event badge using the color input type.
4. Email Confirmation: The form requires users to enter a valid email address using the email input type.
5. Ticket Quantity: Users specify how many tickets they want to buy using the number input type, limited to 1-10.

Example Code for the Form:

<form action="/submit" method="post">
  <label for="event-date">Event Date:</label>
  <input type="date" id="event-date" name="event-date" required><br><br>

  <label for="volume">Rate Your Excitement (1-10):</label>
  <input type="range" id="excitement" name="excitement" min="1" max="10" step="1"><br><br>

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

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

  <label for="quantity">Number of Tickets:</label>
  <input type="number" id="quantity" name="quantity" min="1" max="10" step="1" required><br><br>

  <button type="submit">Submit Registration</button>
</form>

Explanation of the Project: This project demonstrates how to build a user-friendly event registration form using HTML5’s input types. Each section of the form uses a specific HTML5 input type to ensure data accuracy and ease of use. The date picker ensures proper date selection, the range slider adds interactivity, the color picker allows for personalization, and email and number inputs ensure valid and precise entries.

Form Attributes

1. Autofocus Attribute

The autofocus attribute automatically focuses on a specific input field as soon as the page loads, allowing users to start interacting with the form immediately. This is especially useful in forms where you want to direct user attention to a particular field, such as a login or search form.

Example:

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

Use Case:
In a login form, you want to immediately focus the username or email input field when the page loads, so the user doesn’t need to manually click the field to start typing. This makes the process more seamless, especially in forms that users frequently use.

Project Example: In a Login Form, you want the username field to automatically receive focus when the page loads, so users can immediately start entering their credentials.

<form action="/submit-login" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autofocus><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <button type="submit">Login</button>
</form>

2. Autocomplete Attribute

The autocomplete attribute allows the browser to suggest previously entered values for fields, making it easier for users to fill out forms. It speeds up data entry and can be especially useful for commonly entered information like names, addresses, or emails.

Example:

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

Use Case:
In long or frequently used forms, autocomplete reduces the time users spend filling in fields by suggesting options based on previously entered data. This is particularly useful for email addresses, contact forms, and billing information fields.

Project Example: In a Checkout Form, you want the browser to suggest previously entered billing information, so returning customers can quickly complete the form.

<form action="/submit-checkout" method="post">
  <label for="name">Full Name:</label>
  <input type="text" id="name" name="name" autocomplete="name"><br><br>

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

  <label for="address">Shipping Address:</label>
  <input type="text" id="address" name="address" autocomplete="shipping street-address"><br><br>

  <button type="submit">Place Order</button>
</form>

3. Novalidate Attribute

The novalidate attribute disables the browser’s automatic validation of the form’s fields, giving the developer complete control over how and when validation occurs. This is useful in cases where you want to handle validation via custom JavaScript or backend logic, without interference from the browser’s default validation behavior.

Example:

<form action="/submit" method="post" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Submit</button>
</form>       

Use Case:
When building more complex forms, you may want to disable the browser’s default validation and implement custom validation logic using JavaScript. This gives you greater flexibility in how validation is handled, especially if your validation rules are more specific than what the browser provides.

Project Example: In a Custom Registration Form, you want to implement your own validation logic for email, passwords, and other fields, so you use the novalidate attribute to prevent the browser’s built-in validation from interfering.

<form action="/submit-registration" method="post" novalidate>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>

  <button type="submit">Register</button>
</form>

4. Pattern Attribute

The pattern attribute allows you to define a regular expression (regex) that the input must match for the form to be valid. It provides a simple way to enforce format rules on user input without needing JavaScript. The browser will automatically check the input against the specified pattern, ensuring that the data matches the required format.

Example:

<label for="phone">Phone Number (XXX-XXX-XXXX):</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required>

Use Case:
The pattern attribute is ideal for fields where a specific format is required, such as phone numbers, postal codes, or custom ID numbers. It ensures that users enter data in the correct format, improving data quality.

Project Example: In a Contact Form, you need to ensure that users enter their phone numbers in the correct format (e.g., 123-456-7890). The pattern attribute enforces this format, preventing the form from being submitted until the data meets the pattern.

<form action="/submit-contact" method="post">
  <label for="phone">Phone Number (123-456-7890):</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

  <button type="submit">Submit</button>
</form>

Complete Project Example: Registration Form with Form Attributes

Let’s combine all these attributes in a practical example where we create a User Registration Form. This form will use autofocus to focus on the first input field, autocomplete to suggest previously entered values, novalidate to allow custom validation logic, and pattern to enforce correct data entry formats.

<form action="/submit-registration" method="post" novalidate>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" autofocus required><br><br>

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

  <label for="phone">Phone Number (123-456-7890):</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

  <button type="submit">Register</button>
</form>

Enhanced Validation in HTML5 Forms

1. Required Attribute

The required attribute ensures that a particular field must be filled out before the form can be submitted. This attribute is particularly useful for essential fields like names, emails, or passwords where an empty value is not acceptable. If a user attempts to submit the form without filling in the required field, the browser will automatically block submission and prompt the user to fill in the field.

Example:

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

Use Case:
The required attribute is perfect for ensuring that critical information such as email addresses or passwords are entered into the form before submission. Without this attribute, users might accidentally submit incomplete forms, resulting in data loss or processing errors.

Project Example: In a Sign-Up Form, the email and password fields must be filled in for the form to be submitted.

<form action="/submit-signup" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required><br><br>

  <button type="submit">Sign Up</button>
</form>

In this form, the user is prevented from submitting until both the email and password fields are filled in.

2. Min/Max Length

The minlength and maxlength attributes control the number of characters that can be entered into a text field. The minlength attribute sets the minimum number of characters required, while maxlength limits the maximum number of characters allowed. These attributes are commonly used in fields like passwords or usernames to enforce length requirements.

Example:

<label for="username">Username (5-15 characters):</label>
<input type="text" id="username" name="username" minlength="5" maxlength="15" required>

Use Case:
For usernames, passwords, or any field where a specific character length is required, these attributes ensure the input meets the necessary length restrictions, improving security and consistency.

Project Example: In a User Registration Form, the username must be between 5 and 15 characters, ensuring that the user picks a name that is neither too short nor too long.

<form action="/submit-registration" method="post">
  <label for="username">Username (5-15 characters):</label>
  <input type="text" id="username" name="username" minlength="5" maxlength="15" required><br><br>

  <button type="submit">Register</button>
</form>

In this form, users must enter a username with a minimum of 5 characters and a maximum of 15 characters, ensuring appropriate username lengths.

3. Pattern Validation

The pattern attribute is one of the most powerful HTML5 validation features, allowing you to specify a regular expression (regex) that the input must match. This is especially useful for fields where a specific format is required, such as phone numbers, postal codes, or custom IDs. If the user’s input doesn’t match the pattern, the browser will prevent form submission and display an error message.

Example:

<label for="phone">Phone Number (XXX-XXX-XXXX):</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required>

Use Case:
The pattern attribute is ideal for enforcing specific formats for input fields such as phone numbers, ZIP codes, or email addresses. It ensures that the data submitted follows the required format, helping to maintain data integrity.

Project Example: In a Contact Form, the phone number must be entered in the format 123-456-7890. The pattern attribute enforces this rule, preventing submission until the input matches the expected format.

<form action="/submit-contact" method="post">
  <label for="phone">Phone Number (123-456-7890):</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

  <button type="submit">Submit</button>
</form>

In this form, the user is required to enter the phone number in the exact format specified, ensuring data consistency.

Complete Project Example: Registration Form with Enhanced Validation

Let’s combine these enhanced validation features in a practical example where we create a User Registration Form. This form will enforce that certain fields are required, control the length of the username, and enforce a specific format for the phone number.

<form action="/submit-registration" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required><br><br>

  <label for="username">Username (5-15 characters):</label>
  <input type="text" id="username" name="username" minlength="5" maxlength="15" required><br><br>

  <label for="phone">Phone Number (123-456-7890):</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

  <button type="submit">Register</button>
</form>

Explanation:

1. Required Attribute: The email field must be filled in before the form can be submitted.
2. Min/Max Length: The username must be between 5 and 15 characters in length, ensuring appropriate input.
3. Pattern Validation: The phone number must match the 123-456-7890 format, ensuring a standardized format for contact numbers.

Exercise: Implementing Enhanced Form Validation with HTML5

In this exercise, you will build a User Registration Form using HTML5 form validation attributes. The form will include the following fields: email, username, password, and phone number. You will apply enhanced validation features such as the required attribute, min/max length, and pattern validation to ensure the input meets the necessary criteria before the form can be submitted.

Exercise Requirements:

1. Email Field:
   • Use the required attribute to ensure the email field is mandatory.
   • Use the email input type to validate the format of the email (e.g., user@example.com).
2. Username Field:
   • Ensure that the username is required.
   • The username should have a minlength of 5 and a maxlength of 15 characters.
3. Password Field:
   • Ensure that the password is required.
   • The password should have a minlength of 8 characters to meet minimum security standards.
4. Phone Number Field:
   • The phone number should follow the pattern 123-456-7890.
   • The phone number field should be required.
5. Form Submission:
   • Use HTML5’s built-in validation to provide immediate feedback on invalid input.
   • Ensure the form cannot be submitted unless all fields are filled in correctly.

Form Structure:

You can create the form based on the following structure. Try to complete the form by implementing the appropriate HTML5 validation attributes.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Registration Form</title>
</head>
<body>

  <h2>User Registration Form</h2>

  <form action="/submit-registration" method="post">
    
    <!-- Email Field -->
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required><br><br>

    <!-- Username Field -->
    <label for="username">Username (5-15 characters):</label>
    <input type="text" id="username" name="username" minlength="5" maxlength="15" required><br><br>

    <!-- Password Field -->
    <label for="password">Password (minimum 8 characters):</label>
    <input type="password" id="password" name="password" minlength="8" required><br><br>

    <!-- Phone Number Field -->
    <label for="phone">Phone Number (123-456-7890):</label>
    <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

    <!-- Submit Button -->
    <button type="submit">Register</button>

  </form>

</body>
</html>

Tasks:

1. Step 1: Create an HTML file and set up the basic structure for your registration form.
2. Step 2: Add an email input field with the required attribute and validate the format using the type="email" attribute.
3. Step 3: Add a username input field with a minlength of 5 and a maxlength of 15 characters, and make the field required.
4. Step 4: Add a password input field with a minlength of 8 characters, ensuring it’s also required.
5. Step 5: Add a phone number input field with a regex pattern that enforces the format 123-456-7890. Make it required as well.
6. Step 6: Test the form by attempting to submit invalid data, such as leaving fields blank or entering incorrectly formatted information (e.g., an incorrectly formatted phone number or a short password). Make sure that HTML5 validation catches these errors.

Bonus Task: Add Custom Error Messages

For an extra challenge, modify your form to include custom error messages using the title attribute or JavaScript to provide more detailed feedback when the form fields are invalid.

<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" title="Please enter the phone number in the format 123-456-7890" required>

Expected Outcomes:

• Users will not be able to submit the form unless:
  • The email field contains a valid email format.
  • The username field contains between 5 and 15 characters.
  • The password field contains at least 8 characters.
  • The phone number field matches the required pattern (123-456-7890).
• HTML5’s built-in validation will provide real-time feedback when the user enters invalid data, guiding them to correct their input.

Interview Questions: HTML5 Form Validation and Input Types

Basic Questions:

1. What is the purpose of the required attribute in HTML5 forms, and how does it improve user experience?
   • Expected Answer: The required attribute ensures that a form field must be filled out before the form can be submitted. It prevents users from submitting incomplete forms and reduces the likelihood of missing critical information.
2. How does the email input type work, and what kind of validation does it provide by default?
   • Expected Answer: The email input type ensures that the entered text is formatted as a valid email address (e.g., user@example.com). Browsers provide built-in validation that checks if the input follows the correct format.
3. What is the pattern attribute used for, and how can it enhance form validation?
   • Expected Answer: The pattern attribute allows developers to define a regular expression that the input must match. It is used to enforce specific input formats, such as phone numbers or postal codes, ensuring that the data is entered correctly.
4. Explain the use of the minlength and maxlength attributes in input fields.
   • Expected Answer: The minlength attribute sets the minimum number of characters required for an input field, while the maxlength attribute limits the maximum number of characters allowed. These attributes are commonly used in fields like passwords and usernames to enforce length restrictions.

Intermediate Questions:

5. What are some common use cases for the range input type, and how does it differ from the number input type?
   • Expected Answer: The range input type creates a slider for selecting a value within a defined range, commonly used for settings like volume, brightness, or ratings. Unlike the number input type, which allows for precise numeric input, the range input type provides a more visual, approximate selection.
6. How does the novalidate attribute work, and in which scenarios would you use it?
   • Expected Answer: The novalidate attribute disables the browser’s default validation for form fields. It’s useful when developers want to implement custom validation logic, typically using JavaScript, to handle more complex validation needs than what HTML5 provides.
7. What is the benefit of using the autocomplete attribute in forms, and how does it enhance the user experience?
   • Expected Answer: The autocomplete attribute allows the browser to remember previously entered values for input fields, helping users fill out forms more quickly. It reduces the need for repetitive data entry, particularly for commonly used fields like name, address, and email.
8. How does the autofocus attribute improve the usability of a form?
   • Expected Answer: The autofocus attribute automatically places the cursor in a specific input field when the page loads, guiding the user to the first field they need to complete. This improves the flow of form completion and eliminates the need for users to manually click on the field.

Advanced Questions:

9. Can you explain how the pattern attribute can be combined with other validation attributes like required and maxlength to enforce more strict input rules? Provide an example.
   • Expected Answer: The pattern attribute can be combined with required to ensure that users enter data in a specific format (e.g., phone numbers, postal codes), and maxlength can limit the length of the input. For example, a phone number field can require the format 123-456-7890 and limit the input to exactly 12 characters.
   Example Code:

<label for="phone">Phone Number (123-456-7890):</label>
<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" maxlength="12" required>

9. How does HTML5 form validation impact accessibility and user experience, and what best practices should developers follow when using built-in validation?
   • Expected Answer: HTML5 form validation improves accessibility by providing instant feedback to users on form errors, helping them correct mistakes without having to submit the form repeatedly. Best practices include providing clear error messages, using consistent validation across all fields, and ensuring that custom validations are understandable for users with screen readers or other assistive technologies.
10. What are some limitations of HTML5’s built-in form validation, and when would you need to supplement it with custom JavaScript validation?
    • Expected Answer: HTML5’s built-in validation is limited to checking basic input types and formats (e.g., required fields, email format, number ranges). More complex validation logic, such as cross-field validation (comparing two fields) or custom rules that vary based on dynamic conditions, requires JavaScript. Custom validation is also needed for more advanced scenarios like asynchronous validation (e.g., checking if a username is already taken).
11. Describe how you would implement custom error messages for invalid form fields in HTML5.
    • Expected Answer: Custom error messages can be added using the title attribute or through JavaScript. The title attribute provides a tooltip with a message explaining the expected input format. Alternatively, JavaScript can be used to display custom error messages dynamically when validation fails.

Example Code:

<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" title="Please enter the phone number in the format 123-456-7890" required>