このページについて
このページではHTMLで使う事ができるrequiredの機能と使い方を解説しています。
required属性
requiredはinputタグ/selectタグ/textareaタグで使う事ができる属性です。この属性はブール値と言って、「書いたら有効・書かなかったら無効」という機能を持っています。
そしてこの属性が付与されている入力エリアは入力必須として扱われます。
required属性の書き方
requiredjは上で書いた3タグ(inputタグ/selectタグ/textareaタグ)の全てで同じ働きをします。
<input required>このように書くだけでOKです。値などは無く、書いたらそのエリアは入力必須として扱われます。入力せずに送信しようとしたらブラウザがメッセージを出してくれます。とは言えよく見かける「入力必須項目です。」みたいな注意書きは入力エリアの前後とかにでも書いておいた方がいいかもしれませんね。
requiredが無効になる時
requiredはreadonly属性が付与されている入力エリアに対しては無効となります。readonlyは読み取り専用で値を持たない事になるそうです。
JavaScriptで判定する
JavaScriptを使って入力内容を判定することもできます。少々複雑にはなりますが、なるべく簡単な手法を使った(つもり)なので好きなようにカスタマイズしてみましょう。
ソースはHTMLとJavaScript全部まとめて以下です。
<form id="fo1" name="f1">
<input required value="" name="in1" id="inp1" oninput="onch(this)">
<input required value="" name="in1" id="inp2" oninput="onch(this)">
<button type="submit">tap</button>
</form>
<p id="su"></p>
<script>
function onch(e){
var id = e.id;
switch (id) {
case 'inp1':
document.getElementById('inp2').required = false;
document.getElementById('su').innerHTML = `現在入力は${id}です`
break;
case 'inp2':
document.getElementById('inp1').required = false;
document.getElementById('su').innerHTML = `現在入力は${id}です`
default:
break;
}
}
</script>わかりやすいように区切りましたが、こんな不自然な区切りはなくてもOKです。
見ての通り2つの入力欄にはrequiredが適用されています。当然、このまま実行すると以下のようにメッセージが出てきます。
左の入力欄をA、右をBとするとこの時点ではAのみ表示されていますが、Aに入力→Bを空欄のままtapボタンを押すとBにも入力してくださいってメッセージが出ます。
ただJavaScriptでごにょごにょすることで、どちらか一方に値が入力されていればそれでOKというように切り替える事ができます。以下はJS側の解説になります。
まずはinputでoninputで呼び出す関数を作成します。この時inputタグ側でoninput=”関数(this)”とすることでイベントを呼び出した自身を参照します。そして関数の最初で引数として渡されているthisのidを取得します。
そのidを元に、switch文で分岐処理を行います。取得したidがinp1だった場合、inp2のrequiedを無効化して指定idにメッセージを表示するという仕組みになっています。inp2だった場合はinp1に対して無効化を行います。
このイベント関連の機能はかなり複雑ですが、流れを簡単におさらいするとこうなります。
| HTML側のinputタグのoninputは「値が入力されたらリアルタイムでイベントを起こす」という属性(機能)です |
| イベントが発動し、呼び出す関数はonch(this) |
| thisは「このイベントを発動させた要素そのもの」なので、左の入力欄なら左のinputタグをJavaScriptに渡す |
| 関数の発動を受け、JS側での関数の最初の行は var id = e.idですが、これは引数として渡されたもののid属性を取得する書き方です。 |
| eとthisでややこしいですが、「HTMLからJSに渡す場合はthisに情報を入れて渡す」であり、JSで受け取る際に「thisをeに代入」します。 |
| switch文でvar idの中身を調べ、inp1かinp2かで処理ルートを切り替えます。 |
| それぞれの処理内容はさほど変わらないし難しくは無いので割愛 |
初見だとなんだそれの連続だと思いますが、とことん突き詰めるともっと意味不明な書き方とかいっぱい出てきます。頑張りましょう。
ともかく、これでrequiredの有効と無効を切り替える事ができます。中身が入力されているかどうかはブラウザが判定してくれますが、JSで判定させたい場合はinputタグなどのidを指定し、value属性を取得して中身が空っぽならエラーメッセージを出す、という書き方が考えられます。
まとめ
requiredは入力必須として扱う事ができます。そしてJavaScriptを使ってそのrequiredを有効にも無効にもできます。必要に応じて色々と手を加えていきましょう。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。