How to use the required attribute in HTML ?

Last Updated : 30 Sep, 2021

HTML introduced many features for the enhancement of forms. Before the required attribute was introduced, we use JavaScript code to mandatory a specific input field must be filled out before submitting the form.

Now, this process is easy just by using the required attribute. This attribute is used to specify the input element that must be filled out before submitting the Form. In case of user forget and skip the particular field and then click submit button it shows the popup just below the required input field.

Syntax

<input type="text" required>

Example: Below code demonstrates the use of the required attributes in HTML.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        How to use the required attribute in HTML? 
    </title> 
  
    <style> 
        h1, 
        h2 { 
            color: green; 
            font-style: italic; 
        } 
  
        body { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>GeeksForGeeks</h1> 
  
    <h2> 
        How to use the required  
        attribute in HTML? 
    </h2> 
      
    <form action=""> 
        Username: 
        <input type="text" name="usrname"> 
        <br><br> 
  
        Password: 
        <input type="password" name="password" required> 
          
        <br> <br> 
        <input type="submit"> 
    </form> 
</body> 
  
</html>