回答:
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>次の点にも注意してください。
ラジオボタングループが必要かどうかに関する混乱を避けるために、作成者はグループ内のすべてのラジオボタンに属性を指定することをお勧めします。実際、一般に、最初にチェックされたコントロールがないラジオボタングループを最初に作成しないことをお勧めします。これは、ユーザーが戻ることができない状態であり、一般にユーザーインターフェイスの質が低いと見なされているためです。
このコードスニペットを使用できます...
<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>いずれかの選択ステートメントで「必須」キーワードを指定してください。外観のデフォルトの方法を変更したい場合。次の手順に従ってください。これは、デフォルトの動作を変更する意図がある場合の追加情報です。
以下を.cssファイルに追加します。
/* style all elements with a required attribute */
:required {
background: red;
}詳細については、次のURLを参照してください。
ラジオボタンがカスタマイズされている場合、たとえば、ラジオボタンの元のアイコンがcss display:noneによって非表示にされているため、独自のラジオボタンを作成できる場合、エラーが発生する可能性があります。
それを修正する方法はdisplay:none、opacity:0
display:noneいる場合、ブラウザのエラーメッセージが表示されないことを意味していると思います。ザッツはすでにここに答えた：stackoverflow.com/questions/49687229/...
以下は、ネイティブ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="other" class="hidden" required><span>Other</span></label>
</div>
<input type="submit" value="Send" />
</form>私はネイティブHTML5検証を使用する最小限のアプローチの大ファンですが、長期的にはJavascript検証に置き換えることをお勧めします。JavaScriptの検証により、検証プロセスをより詳細に制御できるようになり、（疑似クラスではなく）実際のクラスを設定して、（無効な）有効なフィールドのスタイルを改善できます。このネイティブHTML5検証は、JavaScriptが壊れている（または欠落している）場合のフォールバックになる可能性があります。Andrew Coleに触発されたBetterフォームの作成方法に関する他のいくつかの提案とともに、その例をここで見つけることができます。
required="required"検証がうまく機能するよりも、同じ名前とタイプを使用する必要がありました。
input type="radio" name="userradio" id="" value="User" required="required"
input type="radio" name="userradio" id="" value="Admin"
input type="radio" name="userradio" id="" value="Guest"