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
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!
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
After you clear this checkpoint, try submitting the
<form> without filling out the fields.