Need help understanding how "required" attribute works

Need help understanding how "required" attribute works
0

#1

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!


#2

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


#3

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)


#4

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:)


#5

Duly noted! Thank you for responding:)