Required in select does not work if you change the order

Asked

Viewed 572 times

2

If the empty option is somewhere other than the first position, it does not validate. For this ? 

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>

        <form>
            <select  required >
				
                <option value="0,00">0,00</option>
                <option selected=""> Selecione </option>
                <option value="+0,25">+0,25</option>
                <option value="+0,50">+0,50</option>
                <option value="+0,75">+0,75</option>
                <option value="+1,00">+1,00</option>
            </select>


            <button type="submit">Enviar</button>
        </form>

    </body>
</html>

Pq o required só valida a valor vazio se ele for o primeiro option?

html html5

  • But this is wrong... in its final code is this way? <option selected="">

  • @hugocsl I think I understand, he that option 2 is the "select" so the selected, but if it really is the second option, it does not validate,

  • Selected or Selected="" the result is the same. What I don’t understand is why the 'select' order affects the validation, only validates if it has at first, I don’t know the pq of it

1 answer

0

The attribute Selected in a option of a select works in a way that is the default option, which is already selected. Value is the content that is sent. Soon if you want the word 'Select' to be sent and regardless of where you put the Selected it will work. See an example where Selected is at the end:

<!DOCTYPE html>
<html>
    <body>

        <form>
            <select required>
                <option value="volvo">Volvo</option>
                <option value="saab">Saab</option>
                <option value="vw">VW</option>
                <option value="audi" selected>Audi</option>
            </select>

            <button type = "submit">Enviar</button>

        </form>
    </body>
</html>

That is, Selected is in the last select option and works normally.

If you want to select it to be default and send it as value you need to set it this way:

<!DOCTYPE html>
<html>
    <body>

        <form>
            <select required>
                <option value = "Selecione" selected>Selecione</option>
                <option value = "0,00">0, 00</option>
                <option value = "+0,25">+0, 25</option>
                <option value = "+0,50">+0, 50</option>
                <option value = "+0,75">+0, 75</option>
                <option value = "+1,00">+1, 00</option>
            </select>

            <button type = "submit">Enviar</button>

        </form>
    </body>
</html>

Remembering that the order has no problem, although it is interesting you put a default value to start:

<!DOCTYPE html>
<html>
    <body>

        <form>
            <select required>                
                <option value = "0,00">0, 00</option>
                <option value = "+0,25">+0, 25</option>
                <option value = "+0,50">+0, 50</option>
                <option value = "+0,75">+0, 75</option>
                <option value = "+1,00">+1, 00</option>
                <option value = "Selecione" selected>Selecione</option>
            </select>

            <button type = "submit">Enviar</button>

        </form>
    </body>
</html>

if you create a simple php scrip to display the data of this select as soon as you click the Submit button, you will see how it takes the value:

index.html:

<!DOCTYPE html>
<html>
    <body>

        <form method="POST" action="dados.php">
            <select name="taxas" required>
                <option value = "Selecione" selected>Selecione</option>
                <option value = "0,00">0, 00</option>
                <option value = "+0,25">+0, 25</option>
                <option value = "+0,50">+0, 50</option>
                <option value = "+0,75">+0, 75</option>
                <option value = "+1,00">+1, 00</option>
            </select>

            <button type = "submit">Enviar</button>

        </form>
    </body>
</html>

php data.:

<?php

echo $taxa = $_POST['taxas'];

Browser other questions tagged html html5

You are not signed in. Login or sign up in order to post.