Tagi serwisowe

8.1 Tag <datalist>

Tag <datalist> służy do dostarczania listy predefiniowanych opcji dla elementów <input>. Pozwala to użytkownikom wybierać wartości z listy sugerowanych opcji, co ułatwia wprowadzanie danych i zapewnia bardziej precyzyjne i przewidywalne wprowadzanie.

Składnia

    
      <datalist id="list-id">
        <option value="Option 1">
        <option value="Option 2">
        <option value="Option 3">
      </datalist>
      <input list="list-id">
    
  

Tag <datalist> nie ma specyficznych atrybutów, ale ważnym jego aspektem jest związek z elementem <input> przez atrybut list u tego drugiego. Atrybut id tagu <datalist> musi zgadzać się z wartością atrybutu list w elemencie <input>.

Przykład użycia:

    
      <form>
        <label for="browser">Wybierz przeglądarkę:</label>
        <input list="browsers" id="browser" name="browser">
        <datalist id="browsers">
          <option value="Chrome">
          <option value="Firefox">
          <option value="Safari">
          <option value="Opera">
          <option value="Edge">
        </datalist>
        <button type="submit">Wyślij</button>
      </form>
    
  

Wyjaśnienie

• Element <datalist>: zawiera listę możliwych wartości do wprowadzenia
• Element <input>: zawiera atrybut list, który wiąże go z elementem <datalist> przez identyfikator browsers

Zalety używania <datalist>

• Łatwość dla użytkownika: dostarczanie predefiniowanych opcji pozwala użytkownikom szybciej i dokładniej wprowadzać dane
• Zmniejszenie błędów wprowadzania: proponując predefiniowane opcje, można zmniejszyć liczbę błędów wprowadzania danych
• Poprawa doświadczeń użytkownika: użytkownicy mogą łatwo wybierać z proponowanych opcji, co sprawia, że formularz jest bardziej interaktywny i wygodny

Ograniczenia <datalist>

• Ograniczona obsługa stylizacji: opcje w <datalist> nie mogą być stylizowane tak elastycznie, jak zwykłe elementy
• Różnice w implementacji: różne przeglądarki mogą inaczej wyświetlać listę opcji, co może wpływać na jednolitość doświadczeń użytkowników

8.2 Tag <output>

Tag <output> jest używany do wyświetlania wyników obliczeń lub akcji wykonanych przy użyciu JavaScript. Ten tag jest idealny do wyświetlania dynamicznie zmieniającej się zawartości, takiej jak wyniki obliczeń, dane formularza lub inne wartości, które mogą zmieniać się w czasie rzeczywistym.

Składnia

    
      <output name="result" for="input-id-1 input-id-2">Wynik</output>
    
  

Atrybuty

• name: określa nazwę elementu <output>, która może być wykorzystana w JavaScript do uzyskania lub zmiany wartości
• for: zawiera listę identyfikatorów elementów, z którymi jest związana bieżąca wartość <output>. Jest to przydatne do powiązania wyniku z wieloma elementami wejściowymi

Przykład użycia:

    
      <form oninput="calculateSum()">
        <label for="num1">Liczba 1:</label>
        <input type="number" id="num1" name="num1">
        <br>
        <label for="num2">Liczba 2:</label>
        <input type="number" id="num2" name="num2">
        <br>
        <output id="result" name="result" for="num1 num2">0</output>
      </form>
    
  

    
      function calculateSum() {
        const num1 = parseFloat(document.getElementById('num1').value) || 0;
        const num2 = parseFloat(document.getElementById('num2').value) || 0;
        const sum = num1 + num2;
        document.getElementById('result').value = sum;
      }
    
  

Wyjaśnienie

• Element <output>: służy do wyświetlania wyników obliczeń
• Atrybuty for i name: wiążą element <output> z elementami wejściowymi i pozwalają łatwo identyfikować go w JavaScript
• Funkcja calculateSum(): wywoływana przy zmianie wartości elementów wejściowych i aktualizuje wartość <output>

Zalety używania <output>

• Wygoda wyświetlania wyników: tag <output> dostarcza semantycznie właściwy sposób wyświetlania wyników obliczeń lub innych dynamicznych danych
• Łatwa integracja z JavaScript: łatwo uzyskać i zmienić wartości <output> przy użyciu JavaScript, co czyni go idealnym dla dynamicznych aplikacji webowych
• Czystość kodu: użycie <output> pomaga utrzymywać kod HTML czystym i semantycznie poprawnym, poprawiając wsparcie i czytelność kodu

Ograniczenia <output>

• Ograniczona obsługa stylów: tak jak w przypadku <datalist>, stylizacja elementu <output> może być ograniczona w porównaniu z innymi elementami
• Zależność od JavaScript: w większości przypadków <output> używany jest w połączeniu z JavaScript, co może nie być odpowiednie dla wszystkich scenariuszy

8.3 Tag <label>

Tag <label> służy do tworzenia tekstowej etykiety dla elementu formularza. Może być związany z elementem formularza na dwa sposoby: przez atrybut for lub przez osadzenie elementu formularza wewnątrz tagu <label>. Te sposoby pozwalają poprawić dostępność formularza dla użytkowników z ograniczonymi możliwościami, takich jak ci, którzy używają programów czytających ekranu.

Atrybut for wiąże etykietę z elementem formularza, używając identyfikatora elementu (wartość atrybutu id). Pozwala to użytkownikom kliknąć na etykietę, aby skupić się lub aktywować związany element formularza.

Przykład użycia atrybutu for:

    
      <label for="username">Nazwa użytkownika:</label>
      <input type="text" id="username" name="username">
    
  

Osadzony element formularza

Element formularza może być osadzony wewnątrz tagu <label>, co również wiąże je ze sobą. W tym przypadku atrybut for nie jest wymagany.

Przykład użycia osadzonego elementu formularza:

    
      <label>Nazwa użytkownika:
        <input type="text" name="username">
      </label>
    
  

Zalety używania tagu <label>

1. Poprawa dostępności: etykiety pomagają użytkownikom korzystającym z programów czytających ekranu zrozumieć, jakie dane są wymagane dla każdego elementu formularza. Programy czytające ekranu czytają etykiety razem z elementami formularza, co czyni formularz bardziej dostępnym.
2. Łatwość użycia: użytkownicy mogą kliknąć na etykietę, aby skupić się lub aktywować odpowiedni element formularza. Jest to szczególnie przydatne dla małych elementów, takich jak checkboxy i przyciski radiowe.
3. Zwiększenie jasności: etykiety pomagają użytkownikom lepiej rozumieć, jakie dane są wymagane dla każdego elementu formularza, co zmniejsza liczbę błędów przy wprowadzaniu danych.