HTML DOM Input Email の required プロパティの使い方を解説
HTML DOM の Input Email required プロパティは、type="email" の入力フィールドへの入力が必須かどうかを取得・設定するためのプロパティです。required を true に設定すると、ユーザーがメールアドレスを入力しない限りフォームを送信できなくなります。
構文
required プロパティの構文は以下のとおりです。
値の取得（真偽値を返す）
inputEmailObject.required
値の設定
inputEmailObject.required = booleanValue
booleanValue に指定できる値
booleanValue には、以下のいずれかの真偽値を指定します。
| booleanValue | 説明 |
|---|---|
| true | フォーム送信時に、メールアドレス欄の入力が必須となります。 |
| false | デフォルト値。メールアドレス欄の入力は必須ではありません。 |
サンプルコード
Input Email required プロパティの具体的な使用例を見てみましょう。この例では、メールアドレス欄が空のまま「Send Mail」ボタンをクリックすると警告メッセージが表示され、入力済みの場合は送信完了メッセージが表示されます。
<!DOCTYPE html>
<html>
<head>
<title>Input Email required</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<h1>Compose Mail</h1>
<fieldset>
<legend>Email-required</legend>
<label for="EmailSelect">Email Id :
<input type="email" id="EmailSelect" required>
</label><br>
<label for="textarea">Message :
<textarea id="textarea" rows="2" cols="20" name="message" placeholder="Type message..."></textarea></label><br>
<input type="button" onclick="showMessage()" value="Send Mail">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
function showMessage() {
if(inputEmail.required === true && inputEmail.value === '')
divDisplay.textContent = 'Cannot Send Mail: Email Id Required';
else
divDisplay.textContent = 'Mail Sent';
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、次のような出力が得られます。
メールアドレス欄が空の状態で「Send Mail」ボタンをクリックした場合：
メールアドレス欄に入力してから「Send Mail」ボタンをクリックした場合：
-
HTML DOM Input Weekのrequiredプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Weekオブジェクトにおけるrequiredプロパティは、週入力フィールド（<input type="week">）への入力が、フォーム送信時に必須かどうかを取得・設定するためのプロパティです。 構文 requiredプロパティの基本的な構文は以下の通りです。 ブール値（true / false）を取得する場合 inputWeekObject.required requiredプロパティに値を設定する場合 inputWeekObject.required = booleanValue 指定できるブール値 「booleanValue」
-
HTML DOM Input Searchのrequiredプロパティの使い方を解説
HTML DOMのInput Searchオブジェクトにおけるrequiredプロパティは、<input>要素のrequired属性と連動するプロパティです。フォームがサーバーへ送信される前に、検索フィールドの入力が必須かどうかを設定・取得するために使用されます。このプロパティを利用することで、ユーザーがrequired属性付きの検索フィールドを空欄のままにした場合、フォームの送信を防ぐことができます。構文requiredプロパティの構文は以下の通りです。プロパティの設定searchObject.required = true|falsetrueを指定すると、フォーム送信前に検索フ