519

ラジオボタンで新しいHTML5入力属性「必須」を正しい方法で使用する方法を考えています。すべてのラジオ ボタン フィールドには、以下のような属性が必要ですか、それとも 1 つのフィールドだけで十分ですか? 

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

5 に答える 5

888

TL;DR:requiredラジオ グループの少なくとも 1 つの入力の属性を設定します。

すべての入力の設定requiredはより明確ですが、必須ではありません (ラジオボタンを動的に生成する場合を除きます)。

ラジオ ボタンをグループ化するには、すべて同じname値にする必要があります。これにより、一度に 1 つのみを選択でき、requiredグループ全体に適用されます。

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

次の点にも注意してください。

ラジオ ボタン グループが必要かどうかの混乱を避けるために、作成者はグループ内のすべてのラジオ ボタンに属性を指定することをお勧めします。実際、一般に、作成者は、最初にチェックされたコントロールを持たないラジオ ボタン グループを最初から持たないようにすることをお勧めします。これは、ユーザーが戻ることができない状態であり、したがって一般的に貧弱なユーザー インターフェイスと見なされるためです。

ソース

于 2011-11-27T18:31:12.177 に答える
5

以下は、ネイティブの 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>

私はネイティブの HTML5 検証を使用する最小限のアプローチの大ファンですが、長期的には Javascript 検証に置き換えたいと思うかもしれません。Javascript 検証を使用すると、検証プロセスをより詳細に制御でき、(疑似クラスではなく) 実際のクラスを設定して、有効な (無効な) フィールドのスタイルを改善できます。このネイティブ HTML5 検証は、Javascript が壊れている (または不足している) 場合のフォールバックとして使用できます。Andrew Coleに触発された、より良いフォームを作成する方法に関するいくつかの他の提案と共に、その例をここで見つけることができます。

于 2018-09-14T09:42:03.567 に答える