Input Required HTML5

Question

I have this form in html5:

 <form method="post" action="form.php" >
    <input id="fname" name="fname" type="text" value=""  required/>
    <input id="lname" name="lname" type="text" value=""  required/>
    <input id="submit" name="submit" type="submit" value="" />
 </form>

Sometimes i receive empty fields. Can you tell me why?

Answer 1

It is best practice to include the aria-required attribute too:

<form method="post" action="form.php" >
        <input id="fname" name="fname" type="text" value=""  required aria-required=”true” />
        <input id="lname" name="lname" type="text" value=""  required aria-required=”true” />
</form>

Note that older browsers may not support support these attributes. On any browser that doesn't support these attributes, front-end form validation could still be achieved through javascript. You can learn more about javascript form validation here .

Remember it is important to validate input on the server too.

Answer 2

You can't make yours constraints only on the client side. Anyone can send a POST request to your server without using your form easily.
It's possible with all recent browsers to edit the DOM and remove the required part too.

HTML5 Validations are great for helping users but it's not for security/checking.