option - Kurs HTML i CSS
Formularze HTML / Lista rozwijalna <select, option, optgroup>Spis treści <select, option, optgroup> Lista rozwijalna <select, option, optgroup> Możliwość wyboru kilku opcji (typ rozszerzony) <select multiple> Z zaznaczoną domyślnie opcją <option selected> O określonej wysokości pola <select size> Blokada pola <select disabled> Grupy opcji <optgroup> Lista rozwijalna <select, option, optgroup> <form action="..."> <select name="nazwa"> <option>Tu wpisz pierwszą możliwość</option> <option>Tu wpisz drugą możliwość</option> (...) </select>...
- Komendy HTML 4.01 / OPTION
Tworzy opcję w liście wyboru (SELECT). Opcje mogą być zgrupowane (OPTGROUP). Zobacz więcej... Atrybuty: CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej DISABLED Blokada kontrolki ID="nazwa" Przypisuje nazwę elementowi (identyfikator), która nie może się powtarzać w całym dokumencie LABEL="etykieta" Etykieta dla grupy opcji...
- Formularze HTML / Przykład formularza HTML
...rozdziały: Ramy formularza <form> Pole tekstowe <input text> Pole opcji <input radio> Pole wyboru <input checkbox> Lista rozwijalna <select, option> Obszar tekstowy <textarea> Wysłanie formularza <input submit> Wyczyszczenie danych <input reset> Dla zainteresowanych Jeśli chcesz dowiedzieć się więcej na temat jeszcze bardziej zaawansowanych typów pól formularza, zobacz rozdział: HTML5 / Pola formularza. Potrzebujesz pomocy? Przy tworzeniu formularza HTML możesz również skorzystać...
Wyszukiwarka / Możliwość wyboru...method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <select name="lr"> <option value="">Na świecie</option> <option value="lang_pl">W Polsce</option> </select> <input type="submit" value="Szukaj"> </form> Przykład Na świecie W Polsce Pole opcji <form action="https://www.google.pl/search" method="get"> <input type="text" name="q"> <input type="hidden" name="ie" value="utf-8"> <input type="radio" name="lr...
- Skórki
...wyglądu domyślnego może być lista rozwijalna: <select id="skin" onchange="if (this.value == '') skin.reset(); else skin.set(this.value)"> <option value="">Wygląd domyślny</option> <option value="/style1.css">Nazwa skórki 1</option> <option value="/style2.css">Nazwa skórki 2</option> <option value="/style3.css">Nazwa skórki 3</option> (...) </select> <script> document.getElementById('skin').value = skin.get(); </script> /style1.css, /style2.css, /style3.css Arkusze stylów...
- Formularze HTML / Wysłanie formularza bez programu pocztowego
...<p>Jakie znasz systemy operacyjne (możesz wybrać kilka opcji trzymając klawisz Ctrl)?</p> <select name="System operacyjny[]" multiple size="3"> <option selected>Dos</option> <option>Windows</option> <option>Linux</option> <option>Inny</option> </select>
- Formularze HTML / Forma odszyfrowana <form enctype accept-charset>
...radio), dla nich możesz samodzielnie wpisać w treści atrybutów value="..." tekst bez polskich znaków. Atrybut ten można również podać dla znacznika <option>...</option> (lista rozwijalna): <select name="nazwa"> <option value="acelnoszz">ąćęłńóśźż</option> <option value="ACELNOSZZ">ĄĆĘŁŃÓŚŹŻ</option> </select> Zwróć uwagę, że tekst po znaczniku <option> może się różnić od wartości atrybutu value="...". W ten sposób użytkownik wypełniający formularz, zobaczy poprawne polskie litery. Aby...
- HTML5 / Autouzupełnianie <datalist>
(interpretuje: Internet Explorer 10, Firefox 4, Opera 10, Chrome 20) <input list="identyfikator"> <datalist id="identyfikator"> <option value="wartość1"> <option value="wartość2"> ... </datalist> Większość przeglądarek posiada funkcję tzw. autouzupełniania elementów formularzy. Jeżeli użytkownik wpisze coś w formularzu, a potem go wyśle, to kiedy będzie następnym razem wypełniał ten sam formularz, przeglądarka wyświetli mu podpowiedzi w postaci wartości, które wcześniej wpisywał w...
Selektory pseudoklas CSS / Zaznaczenie :checked...zaznaczył. Zaznaczenie dla opcji listy rozwijalnej obsługuje tylko Firefox. Przykład :checked Po wpisaniu w arkuszu stylów: input:checked, option:checked { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji"> <input type="radio" name="pole_opcji"> </fieldset> <fieldset> <input type="checkbox" checked> <input type="checkbox"> </fieldset> <select size="3"> <option selected>Opcja 1</option>...
- Selektory pseudoklas CSS / Domyślne :default
...zawsze będzie widział, która była opcją domyślą, aby ewentualnie do niej wrócić. Przykład :default Po wpisaniu w arkuszu stylów: input:default, option:default, button:default { margin-left: 30px } a w dowolnym miejscu strony: <form action="?"> <fieldset> <input type="radio" checked name="pole_opcji" class="przyklad_domyslne"> <input type="radio" name="pole_opcji" class="przyklad_domyslne"> </fieldset> <select size="3"> <option selected class="przyklad_domyslne">Opcja 1</option>...