HTML DOM Input Searchのrequiredプロパティの使い方を解説
HTML DOMのInput Searchオブジェクトにおけるrequiredプロパティは、<input>要素のrequired属性と連動するプロパティです。フォームがサーバーへ送信される前に、検索フィールドの入力が必須かどうかを設定・取得するために使用されます。このプロパティを利用することで、ユーザーがrequired属性付きの検索フィールドを空欄のままにした場合、フォームの送信を防ぐことができます。
構文
requiredプロパティの構文は以下の通りです。
プロパティの設定
searchObject.required = true|false
trueを指定すると、フォーム送信前に検索フィールドへの入力が必須となります。falseを指定した場合は入力が任意となり、空欄のままでもフォームを送信できます。
サンプルコード
Input Searchのrequiredプロパティを使用した具体例を見てみましょう。以下のコードでは、CHECKボタンをクリックすることで、検索フィールドが必須項目かどうかを判定して表示します。
<!DOCTYPE html>
<html>
<body>
<h1>Input search required プロパティ</h1>
<p>下のボタンをクリックすると、上のフィールドが必須入力かどうか確認できます</p>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" required>
<input type="submit">
</form>
<br>
<button onclick="checkReq()">CHECK</button>
<p id="Sample"></p>
<script>
function checkReq() {
var Req=document.getElementById("SEARCH1").required;
if(Req==true)
document.getElementById("Sample").innerHTML="この検索フィールドは送信前に入力が必須です";
else
document.getElementById("Sample").innerHTML="この検索フィールドは任意で、空欄のまま送信できます";
}
</script>
</body>
</html>実行結果
上記コードを実行すると、次のような画面が表示されます。
CHECKボタンをクリックした場合：
requiredプロパティがtrueに設定されている状態で送信ボタンをクリックすると、検索フィールドが未入力のためフォームは送信されず、ブラウザによって入力を促すメッセージが表示されます。
まとめ
requiredプロパティは、JavaScriptから動的に検索フィールドの必須設定を制御できる便利な機能です。値を読み取れば現在の必須状態を判定でき、trueまたはfalseを代入すれば入力必須の有無を実行時に切り替えることも可能です。フォームのバリデーションやユーザビリティ向上のために、ぜひ活用してみてください。
-
HTML DOM Input Searchタイププロパティの使い方とサンプルコード
HTML DOMのInput Searchタイププロパティは、type=searchが指定されたinput要素に関連付けられているプロパティです。このプロパティは、検索用input要素に対して常に文字列「search」を返します。構文Searchタイププロパティの構文は以下のとおりです。searchObject.typeサンプルコードそれでは、Input Searchタイププロパティの使用例を見てみましょう。<!DOCTYPE html> <html> <body> <h1>Search type property</h1> <
-
HTML DOM Input Search の size プロパティとは？取得・設定方法を実例付きで解説
HTML DOM の Input Search size プロパティは、検索入力フィールド（<input type=search>）の size 属性値を取得または設定するために使用されるプロパティです。size 属性は、検索フィールドの幅を文字数を単位として定義します。特に指定しない場合、デフォルトの幅は 20 文字です。構文（Syntax）size プロパティを設定する場合searchObject.size = numberここで number には、検索フィールドの幅を表す文字数を指定します。デフォルト値は 20 文字です。使用例（Example）以下は、Input Sear