To correctly use the required attribute of HTML, first add this attribute on supported form elements such as <input>, <textarea>, and <select> to achieve basic verification; secondly, you can customize the prompt content through JavaScript; finally, combine CSS to improve user visual feedback. 1. Add the required attribute on the input field to achieve automatic browser verification; 2. Use the setCustomValidity() method to customize the prompt information; 3. Use CSS pseudo-classes and pseudo-elements to style the required items to enhance the user experience.

In web forms, it is very common to ensure that users fill in certain key information. One of the most direct ways to achieve this is to use required attribute of HTML. As long as this attribute is added, the browser will automatically verify that the field has been filled in. If it is not filled in, there will be a prompt.

How to use required attribute correctly

required is a Boolean property. As long as it appears on the input element, it means that the field must be filled in. The usage is very simple:

 <input type="text" name="username" required>

Or bring some friendly prompts:

 <input type="email" name="email" required placeholder="Please enter your email">

Basic verification is done without additional JavaScript writing, which is ideal for fast development or static pages.

Which form elements support required

Not all form controls can be required , common support includes:

• <input> (text, email, password, etc.)
• <textarea>
• <select>

For example, you must select one of the following drop-down menu:

 <select name="gender" required>
  <option value="">Please select gender</option>
  <option value="male">Male</option>
  <option value="female">Female</option>
</select>

Note: Multiple options like <input type="radio"> and <input type="checkbox"> need to be sure to select at least one of them to pass the verification. At this time, you can add required to any of them, but it is best to combine name attribute to control a set of options uniformly.

How to change the default browser prompt

If you have tried using required , you should have seen the kind of prompt box popped up in the browser, such as "Please fill in this field". These prompts are automatically generated by the browser, and the content displayed by different language systems is also different.

If you want to customize the prompt content, you can use JavaScript to intervene in the verification process. For example:

 <input type="text" id="myField" required>
<script>
  const field = document.getElementById(&#39;myField&#39;);
  field.addEventListener(&#39;invalid&#39;, function(e) {
    e.target.setCustomValidity(&#39;This column cannot be empty&#39;);
  });
</script>

However, be aware that once setCustomValidity() is used, each verification will trigger the prompt you set, unless it is called again and the empty string is passed in to clear.

To achieve visual feedback with CSS

In addition to functional verification, user experience is also important. You can use CSS to make some style reminders for unfilled required items, such as red borders or asterisk marks:

 input:required {
  border-color: red;
}

You can also add a * number with pseudo-element:

 input:required .star::after {
  content: '*';
  color: red;
}

In this way, users can know which items are required before submitting, and improve their interactive experience.

Basically that's it. Although the required attribute is simple, it is very practical. It can make it more powerful by properly matching CSS and JS.

The above is the detailed content of Making Form Fields Mandatory with the HTML required Attribute. For more information, please follow other related articles on the PHP Chinese website!