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.

2 Likes

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)

2 Likes

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

1 Like

Duly noted! Thank you for responding:)

having a little trouble with this test, can anyone help me out? When I submit the work that I’ve done, it pops up saying to “give your radio buttons the name attribute of indoor and outdoor” when I clearly have done so already…

Do you have code, or a link to a codepen? You gotta give us something to look at.

Mystik, your code should be similar to the below. If you still can’t figure it from this then post up a thread with your code. Thanks.

<label>
   <input type="radio" name="indoor-outdoor" value="indoor">Indoor
</label>
<label>
   <input type="radio" name="indoor-outdoor" value="outdoor">Outdoor
</label>