Ostatnio edytowany:

select

Autor: Virtual Patriot

Przeznaczenie elementu select

Element select reprezentuje opcje wyboru reprezentowane przez elementy option, które należą do danego elementu select.

Dodatkowe techniczne informacje o elemencie select

kategoria ogólna
kontekst zewnętrzny
element HTML, który tworzy wewnętrzny kontekst frazowany

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Rodzaje muzyki</legend>

    <select>
      <option>techno</option>
      <option>rock</option>
      <option>pop</option>
      <option>trance</option>
    </select>
  </fieldset>

  <button type="submit">zatwierdź</button>
</form>

Kontekstem zewnętrznym przykładowego elementu "select" jest element "fieldset". Wspomniany element "fieldset" jest jednym z elementów HTML, które tworzą wewnętrzny kontekst frazowany, dlatego w tej sytuacji wspomniany kontekst zewnętrzny, czyli element "fieldset", jest prawidłowym kontekstem zewnętrznym dla elementu "select".

kontekst wewnętrzny
elementy option, jak również ewentualnie elementy optgroup, jak również ewentualnie zawartość skryptowa

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Rodzaje muzyki</legend>

    <select>
      <option>techno</option>
      <option>rock</option>
      <option>pop</option>
      <option>trance</option>
    </select>
  </fieldset>

  <button type="submit">zatwierdź</button>
</form>

Kontekstem wewnętrznym przykładowego elementu "select" są wyłącznie elementy "option", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "option", element "option", element "option" oraz element "option", jest prawidłowym kontekstem wewnętrznym dla elementu "select".

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Rodzaje muzyki</legend>

    <select>
      <option>techno</option>
      <option>rock</option>
      <option>pop</option>
      <option>trance</option>

      <template id="szablon-1">
        <ins>
          <iframe src="dynamiczna-statystyka-01.html"></iframe>
        </ins>
      </template>
      <script src="skrypt-01.js"></script>
    </select>
  </fieldset>

  <button type="submit">zatwierdź</button>
</form>

Kontekstem wewnętrznym przykładowego elementu "select" są wyłącznie elementy "option" oraz elementy HTML, które należą do kategorii zawartość skryptowa, dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "option", element "option", element "option", element "option", element "template" oraz element "script", jest prawidłowym kontekstem wewnętrznym dla elementu "select".

Przykładowy Kod HTML

<form>
  <fieldset>
    <legend>Rodzaje muzyki oraz filmu</legend>

    <select>
      <optgroup label="Rodzaj Muzyki">
        <option>techno</option>
        <option>rock</option>
        <option>pop</option>
        <option>trance</option>
      </optgroup>

      <optgroup label="Rodzaj Filmu">
        <option>komedia</option>
        <option>dramat</option>
        <option>horror</option>
        <option>dokument</option>
      </optgroup>
    </select>
  </fieldset>

  <button type="submit">zatwierdź</button>
</form>

Kontekstem wewnętrznym przykładowego elementu "select" są wyłącznie elementy "optgroup", dlatego w tej sytuacji wspomniany kontekst wewnętrzny, czyli element "optgroup" oraz element "optgroup", jest prawidłowym kontekstem wewnętrznym dla elementu "select".

wymagane elementy dzieci

brak

wymagane atrybuty

brak

składnia HTML

<select> ... </select>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Dodatkowe domyślne reguły CSS elementu select

select {
  display:inline-block;
  cursor:default;
}

Interpretacja elementu select

Firefox

tak

Google Chrome

tak

Safari

tak

Nie interpretuje atrybutu required.

Opera

tak

Internet Explorer

tak

Interpretuje atrybut autofocus oraz required, lecz od wersji "10".

Nie interpretuje atrybutu form.

Edge

tak

Nie interpretuje atrybutu form.

Opis atrybutów elementu select

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem select określa czy dany element select powinien być traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik.

Maksymalnie tylko jeden element HTML występujący w zawartości tego samego dokumentu HTML może posiadać atrybut "autofocus".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu autofocus

autofocus

Atrybut autofocus jest atrybutem logicznym elementu select.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

      <label>
        Wybierz jeden owoc:

        <select name="owoc" autofocus>
          <option>ananas</option>
          <option>malina</option>
          <option>truskawka</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "select" jest aktywny, gdyż wspomniany element "select" jest traktowany przez przeglądarkę internetową jako element HTML, na którym w pierwszej kolejności powinien skupić się użytkownik, ponieważ do wspomnianego elementu "select" został dodany atrybut "autofocus".

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem select określa czy dany element select oraz zawartość reprezentowana przez wspomniany element select powinna zostać wyłączona z interakcji z użytkownikiem.

Dana reprezentowana przez element "select", który jest wyłączony z interakcji z użytkownikiem nie jest brana pod uwagę przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML, z którym został powiązany wspomniany wyłączony z interakcji element "select".

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu disabled

disabled

Atrybut disabled jest atrybutem logicznym elementu select.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Wybierz jeden owoc:

          <select name="owoc">
            <option>ananas</option>
            <option>malina</option>
            <option>truskawka</option>
          </select>
        </label>
      </p>

      <p>
        <label>
          Wybierz jedno warzywo:

          <select name="warzywo" disabled>
            <option>kartofel</option>
            <option>marchew</option>
            <option>sałata</option>
          </select>
        </label>
      </p>

      <p>
        <button type="submit">zatwierdź</button>
      </p>
    </form>

  </body>
</html>

Rezultat

Przykładowy element "select" posiadający atrybut "name" o wartości "warzywo", jak również elementy HTML znajdujące się w zawartości wspomnianego elementu "select" zostały wyłączone z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "select" został dodany atrybut "disabled".

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem select określa, z którym elementem form powinien zostać powiązany dany element select.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu form

form id

Należy podać wartość atrybutu id interesującego nas elementu form.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Wybierz jeden owoc:

        <select name="owoc">
          <option>ananas</option>
          <option>malina</option>
          <option>truskawka</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

    <label>
      Wybierz jedno warzywo:

      <select name="warzywo" form="formularz-1">
        <option>kartofel</option>
        <option>marchew</option>
        <option>sałata</option>
      </select>
    </label>

  </body>
</html>

Rezultat

Mimo że przykładowy element "select" posiadający atrybut "name" o wartości "warzywo" nie znajduje się w zawartości elementu "form", wspomniany element "select" został powiązany z formularzem HTML reprezentowanym przez wspomniany element "form" posiadający atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "select" został dodany atrybut "form" wraz z wartością "formularz-1".

multiple

Przeznaczenie atrybutu multiple

Atrybut multiple wykorzystany wraz z elementem select określa czy z opcji wyboru reprezentowanych przez elementy option należące do danego elementu select użytkownik może wybrać więcej niż jedną opcję.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu multiple

multiple

Atrybut multiple jest atrybutem logicznym elementu select.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Wybierz interesujące Cię owoce:

        <select name="owoce[]" multiple>
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option>malina</option>
          <option>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Za pośrednictwem przykładowego elementu "select" użytkownik może wybrać więcej niż jedną opcję, ponieważ do wspomnianego elementu "select" został dodany atrybut "multiple" (wymagane przytrzymanie przycisku ALT lub przycisku CTRL podczas wyboru kolejnych opcji).

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem select określa nazwę, jaką powinna posiadać dana reprezentowana przez dany element select oraz która to nazwa może zostać wykorzystana przez jeden z mechanizmów przeglądarki internetowej podczas procesu, który następuje po zatwierdzeniu formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element select.

Wartość domyślna

brak wartości domyślnej

Wartości atrybutu name

nazwa

Należy podać niepusty ciąg znaków, który chcemy aby został wykorzystany przez przeglądarkę internetową do określenia interesującej nas nazwy.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Wybierz jeden owoc:

        <select name="owoc">
          <option>ananas</option>
          <option>malina</option>
          <option>truskawka</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Nazwą, jaka została przypisana do przykładowego elementu "select" jest nazwa "owoc", dlatego dana reprezentowana przez wspomniany element "select" będzie posiadała nazwę "owoc", ponieważ do wspomnianego elementu "select" został dodany atrybut "name" wraz z wartością "owoc".

required

Przeznaczenie atrybutu required

Atrybut required wykorzystany wraz z elementem select określa czy wartość posiadana przez daną, którą reprezentuje dany element select powinna być wartością posiadającą cechy wartości wymaganej, czyli takiej wartości, która nie powinna być wartością pustą przed próbą zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany wspomniany element select.

Wartość domyślna

BRAK (gdy pominęliśmy atrybut)

wartość pusta (gdy nie podaliśmy wartości)

Wartości atrybutu required

required

Atrybut required jest atrybutem logicznym elementu select.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Wybierz jeden owoc:

        <select name="owoc" required>
          <option label=" "></option>
          <option>ananas</option>
          <option>malina</option>
          <option>truskawka</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Ponieważ do przykładowego elementu "select" został dodany atrybut "required" wartość posiadana przez daną, którą reprezentuje wspomniany element "select" jest wartością posiadającą cechy wartości wymaganej, czyli takiej wartości, która nie powinna być wartością pustą przed próbą zatwierdzenia przez użytkownika formularza HTML reprezentowanego przez element "form", z którym to elementem "form" został powiązany wspomniany element "select".

size

Przeznaczenie atrybutu size

Atrybut size wykorzystany wraz z elementem select określa domyślną liczbę wierszy, w których mają zostać wyświetlone opcje wyboru reprezentowane przez poszczególne elementy HTML należące do danego elementu select.

Wartość domyślna

jeżeli element select nie posiada atrybutu multiple, wtedy w każdej sytuacji wartością domyślną atrybutu size elementu select jest wartość 1

jeżeli element select posiada atrybut multiple, wtedy w każdej sytuacji wartością domyślną atrybutu size elementu select jest wartość 4

Wartości atrybutu size

liczba

Należy podać liczbę całkowitą większą od zera.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <form action="http://webkod.pl/php/submit-result.php">
      <label>
        Wybierz jeden owoc:

        <select name="owoc" size="3">
          <option>ananas</option>
          <option>banan</option>
          <option>kokos</option>
          <option>malina</option>
          <option>truskawka</option>
          <option>wiśnia</option>
        </select>
      </label>

      <button type="submit">zatwierdź</button>
    </form>

  </body>
</html>

Rezultat

Domyślną liczbą wierszy przykładowego elementu "select" jest liczba pozwalająca ujrzeć użytkownikowi co najmniej trzy opcje wyboru reprezentowane przez elementy "option" należące do wspomnianego elementu "select", ponieważ do wspomnianego elementu "select" został dodany atrybut "size" wraz z wartością "3".