Live
x
<html> <head> <title>Formularze</title> <style> label { display: block; margin: 20px 0 5px 0; } /* Szerokość listy rozwijanej możemy ustawić za pomocą CSS */ select { width: 120px; } /* Walidacja odbywa się w taki sam sposób jak w poprzednich przykładach. */ select:invalid { border: 2px solid red; } </style> </head> <body> <h1>Formularz - select</h1> <form> <label for="select">Wybierz auto:</label> <!-- Pole wymagane - musi zostać wybrana opcja z wartością inną niż "" --> <select id="select" name="car" required> <option value="">-</option> <option value="ford">Ford</option> <option value="skoda">Skoda</option> <option value="audi">Audi</option> <option value="bmw">BMW</option> </select> <label for="select2">Wybierz auto:</label> <!-- Pole nie jest wymagane, można wybrać opcje z wartością "" --> <select id="select2" name="car2"> <option value="">-</option> <!-- Podział na podgrupy --> <optgroup label="Europejskie"> <option value="skoda">Skoda</option> <!-- Możemy zablokować pojedyncze opcje za pomocą atrybutu "disabled" --> <option value="audi" disabled>Audi</option> <option value="citroen">Citroen</option> </optgroup> <optgroup label="Azjatyckie"> <option value="toyota">Toyota</option> <option value="kia">Kia</option> <option value="hyundai">Hyundai</option> </optgroup> </select> </form> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.