Sometimes we have fields in our <form>s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an <input> element.
Take for example:
<form action="/example.html" method="POST">
<label for="allergies">Do you have any dietary restrictions?</label>
<br>
<input id="allergies" name="allergies" type="text" required>
<br>
<input type="submit" value="Submit">
</form>
This renders a text box, and if we try to submit the <form> without filling it out we get this message:
The styling of the message varies from browser to browser, the picture above depicts the message in a Chrome browser. We’ll also continue to show these messages as they appear in Chrome in later exercises.
Let’s see how it shows up in your browser!
1.Currently, in the provided <form>, the user can submit it without putting any values inside the input field.
Let’s change that by adding a required attribute to the existing <input>.
After you clear this checkpoint, try submitting the <form> without filling out the fields.