HTML - required Attribute

HTML required attribute is a boolean attribute used to specify that a particular field must be filled by users before submitting the form.

This attribute works with the text, search, email, number, checkbox, radio, date and file input types.

Syntax

<tag required></tag>

Applies on

Below-listed element allows the use of the HTML required attribute.

Element	Description
<input>	HTML <input> tag is used to specify the input field.
<select>	HTML <select> tag is used to create dropdown lists in online forms.
<textarea>	HTML <textarea> tag is used to represent a multiline plain-text editing control.

Examples of HTML required attribute

Below examples will illustrate the HTML required attribute, where and how we should use this attribute!

Make a form input field as required

Form won't get submitted unless name field is entered.

<!DOCTYPE html>
<html>

<head>
    <title>HTML 'required' attribute in 'input' tag</title>
</head>

<body>
    <h3>HTML 'required' attribute in 'input' tag</h3>
    <form> Name:
        <input type="text" 
            placeholder="Your name" 
            id='demo' 
            required>
        <button>Submit</button>
    </form>
</body>

</html>

Make select field as required

Form won't get submitted unless language is selected from the list.


<!DOCTYPE html>
<html>

<head>
    <title>HTML 'required' attribute in 'select' tag</title>
</head>

<body>
    <h3>HTML 'required' attribute in 'select' tag</h3>
    <form>
        <p>Select Language:</p>
        <select required>
            <option value="">--Choose your option--</option>
            <option value="">Hindi</option>
            <option value="">English</option>
            <option value="">Telgu</option>
        </select>
        <button>Submit</button>
    </form>
</body>

</html>

Make textarea field as required

Form is not submitted unless address is entered.

<!DOCTYPE html>
<html>

<head>
      <title>HTML 'required' attribute in 'textarea' tag</title>
</head>

<body>
    <h3>HTML 'required' attribute in 'textarea' tag</h3>
    <form>
        <p>Write your address:</p>
        <textarea cols="40" 
            rows="8" 
            placeholder="Address here..." 
            required>
        </textarea>
        <br>
        <button>Submit</button>
    </form>
</body>

</html>

Supported Browsers

Attribute
required	Yes 5.0	Yes 10.0	Yes 4.0	Yes 10.1	Yes 9.6

html_attributes_reference.htm