Need help understanding how "required" attribute works

Need help understanding how "required" attribute works


So here is the thing:

I’m trying to complete Build a Survey Form project. And I noticed a strange thing regarding the required attribute.

<label id=“name-label” for=“name”>Name:</label>
<input id=“name” type=“text” placeholder=“Required” required></input>

This works as expected. It doesn’t let me submit it when it is blank. However this one is problematic:

<label id=“email-label” for=“email”>E-mail:</label>
<input id=“email” type=“email” placeholder=“Required” required</input>

The required attribute doesn’t seem to do anything. You can send it when it is blank. So I play around with it and I eventually do this:

<label id=“email-label” for=“email”>E-mail:</label>
<input id=“email” type=“email” required placeholder=“Required”</input>

I take the required attribute and put it before the placeholder. And it works!

I’m curious about this behaviour. Can anyone explain why this works now? Thanks!


The problem is with the starting input tag. You have not closed it.


The ordering of attributes within a tag doesn’t matter. As long as the required attribute is present, you shouldn’t be able to submit the form if the input is blank.

Also note that <input> has no closing </input> tag. Maybe it’s because the browser sees it as required</input (there’s no > after required here)


Oh yes! Rookie mistake!

What threw me off was that it accepted it when I put the required attribute before the placeholder cause it worked anyway:/

Well thank you so much:)


Duly noted! Thank you for responding:)