HTML DOM Input Time の required プロパティとは？使い方とサンプルコードを解説
HTML DOM の Input Time（時刻入力）における required プロパティは、フォーム送信時に時刻フィールドの入力が必須かどうかを判定・設定するためのプロパティです。この値が true の場合、ユーザーは時刻を入力しないとフォームを送信できません。
構文（Syntax）
required プロパティの基本的な構文は以下のとおりです。
ブール値（true / false）の取得
inputTimeObject.required
ブール値の設定
inputTimeObject.required = booleanValue
設定できるブール値
「booleanValue」には、次の2つの値を指定できます。
| booleanValue | 説明 |
|---|---|
| true | フォームを送信するために、時刻フィールドへの入力が必須になります。 |
| false | デフォルト値です。時刻フィールドへの入力は任意となります。 |
サンプルコード
ここで、Input Time の required プロパティの実際の使用例を見てみましょう。
以下の例では、指導教員とのアポイントメント時刻を入力するフォームを作成しています。「Fix Meeting」ボタンをクリックすると、required プロパティの状態と入力値に応じて表示メッセージが切り替わります。
<!DOCTYPE html>
<html>
<head>
<title>Input Time 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>
<fieldset>
<legend>Time-required</legend>
<label for="TimeSelect">Appointment with Supervisor:</label>
<input type="time" id="TimeSelect" required>
<input type="button" onclick="fixMeeting()" value="Fix Meeting">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputTime = document.getElementById("TimeSelect");
function fixMeeting() {
if(inputTime.required === true && inputTime.value === '')
divDisplay.textContent = 'The meeting time is required';
else
divDisplay.textContent = 'The meeting time fixed at: '+inputTime.value;
}
</script>
</body>
</html>実行結果
このコードを実行すると、次のような動作になります。
時刻フィールドが空のまま「Fix Meeting」ボタンをクリックした場合
required プロパティが true にもかかわらず入力欄が空のため、「The meeting time is required（会議の時刻は必須です）」というメッセージが表示されます。
時刻を入力してから「Fix Meeting」ボタンをクリックした場合
入力された時刻が反映され、「The meeting time fixed at: （入力された時刻）」というメッセージが表示されます。
-
HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説
HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。
-
HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説
HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals