HTML - required属性
作成日時:2019/06/16
更新日時:2019/06/16
スポンサーリンク
使い方
text
radio
checkbox
url
number
textarea
pattern
対応ブラウザで動作しない場合
input要素にdisplay:none;のスタイルを設定している場合
<style>
input.test_radio_display { display: none; }
input.test_radio_display:checked + label{ color: blue; }
</style>
<form method="post">
<input id="test_radio_display1" class="test_radio_display" type="radio" name="test_radio" required="required">
<label for="test_radio_display1">項目１</label>
<input id="test_radio_display2" class="test_radio_display" type="radio" name="test_radio" required="required">
<label for="test_radio_display2">項目２</label>
<input type="submit" value="送信">
</form>
input要素がdisplay:none;で非表示としていると、エラーメッセージが表示されなくなる場合があります。
display:none;の代わりにopacity:0;を用いて非表示にすることで、正常にエラーメッセージが表示されます。
<style>
input.test_radio_opacity { display: none; }
input.test_radio_opacity:checked + label{ color: blue; }
</style>
<form method="post">
<input id="test_radio_opacity1" class="test_radio_opacity" type="radio" name="test_radio" required="required">
<label for="test_radio_opacity1">項目１</label>
<input id="test_radio_opacity2" class="test_radio_opacity" type="radio" name="test_radio" required="required">
<label for="test_radio_opacity2">項目２</label>
<input type="submit" value="送信">
</form>