dodanie atrybutu wartości do obu przycisków

pytanie zadane 12 czerwca 2022 w HTML i CSS przez Witek_500 Nowicjusz (160 p.)

Fragment kodu:

 <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
 <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

Opis do kodu:

Jeśli wybierzesz przycisk radiowy Indoor i wyślesz formularz, dane formularza dla tego przycisku będą oparte na jego atrybutach name i value. Ponieważ przyciski radiowe nie mają atrybutu wartości, dane formularza będą zawierały indoor-outdoor=on, co nie jest przydatne w przypadku wielu przycisków.

Dodaj atrybut wartości do obu przycisków radiowych. Dla wygody ustaw atrybut value przycisku na tę samą wartość, co jego atrybut id. (Źródło: https://www.freecodecamp.org/learn/2022/responsive-web-design/)

Pytanie:

1. Dlaczego dane formularza będą zawierały indoor-outdoor=on?

2. Dlaczego nie jest to przydatne w przypadku wielu przycisków?

3. Jak te problemy rozwiąże dodanie atrybutu wartości do obu przycisków?

komentarz 14 czerwca 2022 przez VBService Ekspert (253,340 p.)
edycja 14 czerwca 2022 przez VBService

Sprawdź to:

Uruchom ten edytor: input test.

nie zaznaczony żaden radio button, nie ma ustawionych value

wklej ten kod

<!DOCTYPE html>
<html>
  <body>

    <form action="/action_page.php">
      <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>

      <br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>

( naciśnij przycisk submit - zobacz wynik)

zaznaczony radio button, nie ma ustawionych value

wklej ten kod

<!DOCTYPE html>
<html>
  <body>

    <form action="/action_page.php">
      <label><input id="indoor" type="radio" name="indoor-outdoor" > Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor" checked> Outdoor</label>

      <br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>

( naciśnij przycisk submit - zobacz wynik)

zaznaczony radio button, ustawione value

wklej ten kod

<!DOCTYPE html>
<html>
  <body>

    <form action="/action_page.php">
      <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
      <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor" checked> Outdoor</label>

      <br><br>
      <input type="submit" value="Submit">
    </form>

  </body>
</html>

( naciśnij przycisk submit - zobacz wynik)

1 odpowiedź

odpowiedź 12 czerwca 2022 przez doublechess Obywatel (1,300 p.)

id to identyfikator coś jak pseudonim, nazwa cokolwiek.

value to wartość, którą pobierzesz poprzez JavaScript, a to co jest pomiędzy, to zwykły tekst między tagami.

<input id="indoor" type="radio" name="indoor-outdoor" value="my_value">

document.getElementById('indoor'); // pobierz element
document.getElementById('indoor').value; // pobierz wartość (z) elementu

3	komentarz 12 czerwca 2022 przez Wiciorny Ekspert (270,170 p.) no nie pseudonim, bo musi być indywidualny dla elementu- to coś jak PESEL :) Bo pseudonim, można powiedzieć : może mieć kilka osób ten sam