web-dev-qa-db-ja.com

"radio"入力フィールドで "required"属性を使う方法

私はちょうど新しいHTML5入力属性をどうやってラジオボタン上で正しい方法で "required"にするのか疑問に思います。すべてのラジオボタンフィールドは以下のような属性を必要としますか？それとも1つのフィールドだけで取得できれば十分ですか。

<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />
html5radio-buttonrequired
345
nerdess

ラジオグループの少なくとも1つの入力に対してrequired属性を設定します。

すべての入力に対してrequiredを設定することはより明確ですが、必須ではありません（ラジオボタンを動的に生成しない限り）。

ラジオボタンをグループ化するには、それらはすべて同じname値を持たなければなりません。これは一度に一つだけが選択されることを可能にし、グループ全体にrequiredを適用します。

<form>
  Select Gender:

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

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

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

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

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

出典

568
Seybsen

これを試してください...

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

      <input type="submit" value="Click Here" />
</form>

検索 _ jsfiddle _

12
Vijay

ラジオボタンがカスタマイズされている場合、たとえばラジオボタンの元のアイコンがcss display:noneによって隠されていて、自分でラジオボタンを作成できる場合は、エラーが発生する可能性があります。

それを修正する方法は、display:noneをopacity:0に置き換えることです。

3
James

これは非常に基本的な、しかし現代的なHTML5検証を伴う必須ラジオボタンの実装です。

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>

  <label>Gender</label>
  <div class="checkboxes">
    <label><input id="male" type="radio" name="gender" value="male" class="hidden" required><span>Male</span></label>
    <label><input id="female" type="radio" name="gender" value="male" class="hidden" required><span>Female </span></label>
    <label><input id="other" type="radio" name="gender" value="male" class="hidden" required><span>Other</span></label>
  </div>

  <input type="submit" value="Send" />

</form>

私はネイティブのHTML5検証を使用するという最小限のアプローチの大ファンですが、長期的にはそれをJavascript検証に置き換えることをお勧めします。 Javascript検証を使用すると、検証プロセスをはるかに細かく制御でき、（in）有効フィールドのスタイルを向上させるために（疑似クラスではなく）実際のクラスを設定できます。このネイティブのHTML 5検証は、Javascriptが壊れている（または欠如している）場合の代替手段になります。 Andrew Cole に触発された より良いフォーム の作り方に関する他の提案と一緒に、 here の例を見つけることができます。

0
JoostS

あなたはこのコードスニペットを使うことができます...

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

selectの1つステートメントに "必須"キーワードを指定してください。あなたがその外観のデフォルトの方法を変更したい場合。あなたはこれらのステップに従うことができます。これは、デフォルトの動作を変更するつもりがある場合に役立つ情報です。

以下を.cssファイルに追加してください。

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

詳しくは以下のURLを参照してください。

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

0
Dulith De Costa