Jak używać atrybutu" required "z polem wejściowym "radio"

Question

Jak używać atrybutu" required "z polem wejściowym "radio"

Zastanawiam się tylko, jak użyć nowego atrybutu wejścia HTML5 "required" we właściwy sposób na przyciskach radiowych. Czy każde pole przycisku radiowego potrzebuje atrybutu, jak poniżej, czy wystarczy, jeśli tylko jedno pole go otrzyma?

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

455

html radio-button required

Author: Ashwani Singh, 2011-11-27

Source

4 answers

Możesz użyć tego fragmentu kodu ...

<html>
  <body>
     <form>
          <input type="radio" name="color" value="black" required />
          <input type="radio" name="color" value="white" />
          <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Określ słowo kluczowe" required " w jednej z instrukcji select . Jeśli chcesz zmienić domyślny sposób jego wyglądu. Możesz wykonać następujące kroki. Jest to tylko dla dodatkowych informacji, jeśli masz zamiar zmodyfikować domyślne zachowanie.

Dodaj następujący plik .css.

/* style all elements with a required attribute */
:required {
  background: red;
}

Więcej informacji można znaleźć poniżej URL.

Https://css-tricks.com/almanac/selectors/r/required/

4

Author: Dulith De Costa,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-04-06 04:32:51

Oto bardzo podstawowa, ale nowoczesna implementacja wymaganych przycisków radiowych z natywną walidacją HTML5:

fieldset { 
  display: block;
  margin-left: 0;
  margin-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
  border: none;
}
body {font-size: 15px; font-family: serif;}
input {
  background: transparent;
  border-radius: 0px;
  border: 1px solid black;
  padding: 5px;
  box-shadow: none!important;
  font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
  opacity: 0; 
  position: absolute; 
  pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
  display: block;
  border: 1px solid black;
  border-left: 0;
  padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}

<form>
  <div>
    <label for="name">Name (optional)</label>
    <input id="name" type="text" name="name">
  </div>
  <fieldset>
  <legend>Gender</legend>
  <div class="checkboxes">
    <label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label>
    <label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label>
    <label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label>
  </div>
  </fieldset>
  <input type="submit" value="Send" />
</form>

Chociaż jestem wielkim fanem minimalistycznego podejścia do używania natywnej walidacji HTML5, możesz zastąpić ją walidacją Javascript na dłuższą metę. Walidacja Javascript daje znacznie większą kontrolę nad procesem walidacji i pozwala ustawić rzeczywiste klasy (zamiast pseudo klas), aby poprawić styl (w)poprawny pola. Ta natywna Walidacja HTML5 może być twoją alternatywą w przypadku zepsutego (lub braku) Javascript. Przykład tego znajdziesz tutaj, wraz z innymi sugestiami, jak tworzyć lepsze formy, inspirowane przez Andrew Cole.

2

Author: JoostS,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-10-24 13:46:03

Musiałem użyć required="required" wraz z tą samą nazwą i typem, a następnie Walidacja działała dobrze.

<input type="radio" name="user-radio"  id="" value="User" required="required" />

<input type="radio" name="user-radio" id="" value="Admin" />

<input type="radio" name="user-radio" id="" value="Guest" />

2

Author: m k,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-11-14 10:18:33

score 782 · Accepted Answer

TL; DR: Ustawia atrybut required dla co najmniej jednego wejścia Grupy Radiowej.

Ustawienie required dla wszystkich wejść jest wyraźniejsze, ale nie jest konieczne (chyba że dynamicznie generuje przyciski radiowe).

Aby przyciski radiowe grupowały, wszystkie muszą mieć tę samą wartość name. Pozwala to na wybranie tylko jednego w danym momencie i stosuje required do całej grupy.

<form>
  Select Gender:<br>

  <label>
    <input type="radio" name="gender" value="male" required>
    Male
  </label><br>

  <label>
    <input type="radio" name="gender" value="female">
    Female
  </label><br>

  <label>
    <input type="radio" name="gender" value="other">
    Other
  </label><br>

  <input type="submit">
</form>

Zwróć również uwagę na:

Aby uniknąć nieporozumień co do tego, czy radio Grupa przycisków jest wymagana lub nie, autorzy są zachęcani do określenia atrybutu na wszystkich przyciskach radiowych w grupie. Ogólnie rzecz biorąc, autorzy są zachęcani do unikania grup przycisków radiowych, które nie mają żadnych wstępnie sprawdzonych kontrolek, ponieważ jest to stan, do którego Użytkownik nie może powrócić, a zatem jest ogólnie uważany za słaby interfejs użytkownika.

Źródło