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!
Instructions
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.