Autor publikacji
Virtual Patriot - Administrator

select

Data publikacji
Ostatnio edytowano

Przeznaczenie elementu select

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

Dodatkowe artykuły związane z elementem select

Informacje techniczne 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

zero lub więcej elementów option, jak również zero lub więcej elementów 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

zdolność fallback

nie dotyczy

składnia HTML

<select> ... </select>

pominięcie tagu na początku

nigdy

pominięcie tagu na końcu

nigdy

CSS display

inline-block

Przypuszczalnie domyślne reguły CSS elementu select

select {
  display:inline-block;
  cursor:default;
  font-family:sans-serif;
  background-color:white;
  padding:1px;
  border-width:1px;
  border-style:inset;
  border-color:black;
  box-shadow:0 0 2px 1px red;
  /*
    właściwość "box-shadow" w tym wypadku uaktywnia się,
    w momencie gdy zasada,
    którą określa atrybut "required" danego elementu "select",
    nie została spełniona przez użytkownika
  */
}

select:focus {
  border-color:blue;
  outline-color:blue;
}

select:hover {
  border-color:blue;
}

select:disabled {
  color:#888;
  border-color:#888;
  outline-color:#888;
}

Interpretacja elementu select

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak

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

Nie interpretuje atrybutu form.

Edge

tak

Opis atrybutów elementu select

Atrybut Lokalny

autocomplete

Przeznaczenie atrybutu autocomplete

Atrybut autocomplete wykorzystany wraz z elementem select pozwala nam określić czy w momencie dokonywania selekcji wartości dla danego elementu select (przez użytkownika) mechanizm automatycznych podpowiedzi powinien być włączony, czy też nie.

Atrybut "autocomplete" elementu "select" ma pierwszeństwo przed atrybutem autocomplete elementu form, z którym został powiązany dany element "select", jeżeli takie powiązanie istnieje.

Wartość domyślna

on (w każdej sytuacji)

Wartości atrybutu autocomplete

on

Wartość on oznacza, że mechanizm automatycznych podpowiedzi ma być włączony.

Przykładowy Kod HTML

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

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

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

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

  </body>
</html>

Rezultat

W momencie dokonywania selekcji wartości dla przykładowego elementu "select" (przez użytkownika) mechanizm automatycznych podpowiedzi jest włączony, ponieważ do wspomnianego elementu "select" został dodany atrybut "autocomplete" wraz z wartością "on".

off

Wartość off oznacza, że mechanizm automatycznych podpowiedzi ma być wyłączony.

Przykładowy Kod HTML

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

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

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

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

  </body>
</html>

Rezultat

W momencie dokonywania selekcji wartości dla przykładowego elementu "select" (przez użytkownika) mechanizm automatycznych podpowiedzi jest wyłączony, ponieważ do wspomnianego elementu "select" został dodany atrybut "autocomplete" wraz z wartością "off".

Atrybut Lokalny

autofocus

Przeznaczenie atrybutu autofocus

Atrybut autofocus wykorzystany wraz z elementem select pozwala nam określić 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 znajdujący się 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="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Wybierz jeden owoc:

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

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

  </body>
</html>

Rezultat

Przykładowy element "select" jest aktywny, gdyż przykładowy 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".

Atrybut Lokalny

disabled

Przeznaczenie atrybutu disabled

Atrybut disabled wykorzystany wraz z elementem select pozwala nam określić czy dany element select oraz treść reprezentowana przez zawartość danego elementu select powinni zostać wyłączeni 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 przez użytkownika, z którym to formularzem HTML 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="https://webkod.pl/php/submit-result.php">
      <p>
        <label>
          Podaj imię:
          <input type="text" name="imie">
        </label>
      </p>

      <p>
        <label>
          Wybierz jeden owoc:

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

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

  </body>
</html>

Rezultat

Przykładowy element "select", jak również elementy HTML znajdujące się w zawartości przykładowego elementu "select", zostali wyłączeni z interakcji z użytkownikiem, ponieważ do wspomnianego elementu "select" został dodany atrybut "disabled".

Atrybut Lokalny

form

Przeznaczenie atrybutu form

Atrybut form wykorzystany wraz z elementem select pozwala nam określić informację o tym, z którym elementem form powinien zostać powiązany dany element select.

Domyślnie element "select" jest powiązany z najbliższym elementem przodkiem będącym elementem form, jeżeli taki istnieje.

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="https://webkod.pl/php/submit-result.php" id="formularz-1">
      <label>
        Podaj imię:
        <input type="text" name="imie">
      </label>

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

    <label>
      Wybierz jeden owoc:

      <select name="owoc" form="formularz-1">
        <option>ananas</option>
        <option>malina</option>
        <option>truskawka</option>
      </select>
    </label>

  </body>
</html>

Rezultat

Przykładowy element "select" został powiązany z elementem "form" posiadającym atrybut "id" o wartości "formularz-1", ponieważ do wspomnianego elementu "select" został dodany atrybut "form" wraz z wartością "formularz-1".

Atrybut Lokalny

multiple

Przeznaczenie atrybutu multiple

Atrybut multiple wykorzystany wraz z elementem select pozwala nam określić czy z opcji wyboru reprezentowanych przez elementy option, które należą 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="https://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

Z opcji wyboru reprezentowanych przez elementy "option", które należą do 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 "LEWY CTRL" podczas wyboru kolejnej opcji).

Atrybut Lokalny

name

Przeznaczenie atrybutu name

Atrybut name wykorzystany wraz z elementem select pozwala nam określić nazwę, jaka powinna zostać przypisana do danego elementu select oraz jaką powinna posiadać dana reprezentowana przez dany element select.

Docelowa nazwa między innymi 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 dany 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="https://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 przykładowy element "select" będzie posiadała nazwę "owoc", ponieważ do wspomnianego elementu "select" został dodany atrybut "name" wraz z wartością "owoc".

Atrybut Lokalny

required

Przeznaczenie atrybutu required

Atrybut required wykorzystany wraz z elementem select pozwala nam określić czy wartość, jaka może zostać przypisana do danego elementu select oraz którą może posiadać dana reprezentowana przez dany element select, powinna posiadać cechy wartości wymaganej, czyli takiej wartości, która nie może być wartością pustą w momencie próby zatwierdzenia formularza HTML przez użytkownika, z którym to formularzem HTML został powiązany dany 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="https://webkod.pl/php/submit-result.php">
      <label>
        Wybierz jeden owoc:

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

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

  </body>
</html>

Rezultat

Wartość, jaka może zostać przypisana do przykładowego elementu "select" oraz którą może posiadać dana reprezentowana przez przykładowy element "select", jest wartością posiadającą cechy wartości wymaganej, ponieważ do wspomnianego elementu "select" został dodany atrybut "required".

Atrybut Lokalny

size

Przeznaczenie atrybutu size

Atrybut size wykorzystany wraz z elementem select pozwala nam określić domyślną liczbę wierszy, z których powinien być zbudowany dany element select.

Wartość domyślna

1 (w każdej sytuacji), lecz tylko wtedy gdy dany element select nie posiada atrybutu multiple, w przeciwnym przypadku 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="https://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, z których zbudowany jest przykładowy element "select", jest liczba pozwalająca ujrzeć użytkownikowi co najmniej trzy opcje wyboru reprezentowane przez elementy "option", które należą do przykładowego elementu "select", ponieważ do wspomnianego elementu "select" został dodany atrybut "size" wraz z wartością "3".