HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOMのInput URL requiredプロパティとは？構文と使い方を解説

HTML DOMのInput URL requiredプロパティは、フォーム送信時にURL入力フィールド（<input type="url">）への入力が必須かどうかを取得・設定するためのプロパティです。requiredをtrueに設定すると、ユーザーがURLを入力しない限りフォームを送信できなくなります。

構文

requiredプロパティの構文は以下のとおりです。

ブール値を取得する場合（true/falseを返す）

inputURLObject.required

この構文は、requiredプロパティの現在の設定状態をtrue/falseのブール値として返します。

ブール値を設定する場合

inputURLObject.required = booleanValue

ブール値の種類

「booleanValue」には、以下のいずれかの値を指定できます。

booleanValue説明
trueURLフィールドへの入力が必須となり、入力しないとフォームを送信できません。
falseデフォルト値です。URLフィールドへの入力は必須ではありません。

サンプルコード

Input URL requiredプロパティの具体的な使用例を見てみましょう。以下の例では、URLフィールドが空のまま「Go」ボタンをクリックすると警告メッセージが表示され、URLが入力されていればリダイレクト処理に進む仕組みになっています。

<!DOCTYPE html>
<html>
<head>
<title>Input URL 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>URL必須入力</legend>
<label for="URLSelect">URL:
<input type="url" id="URLSelect" required>
</label><br>
<input type="button" onclick="showMessage()" value="Go">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
  var divDisplay = document.getElementById("divDisplay");
  var inputURL = document.getElementById("URLSelect");
  function showMessage() {
    if(inputURL.required === true && inputURL.value === '')
      divDisplay.textContent = 'リダイレクトできません：URLは必須項目です';
    else
      divDisplay.textContent = 'リダイレクト中...';
  }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような出力が得られます。

「Go」ボタンをクリックした場合

HTML DOMのInput URL requiredプロパティとは？構文と使い方を解説

URLフィールドに値が入力された状態で「Go」ボタンをクリックした場合

HTML DOMのInput URL requiredプロパティとは？構文と使い方を解説

  1. HTML DOM入力テキスト（Input Text）のrequiredプロパティとは？使い方とサンプルコードを解説

    HTML DOMのInput Text requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、特定のテキストフィールドへの入力が必須かどうかを設定したり、現在の状態を取得したりすることができます。required属性が設定されたテキストフィールドが空のままの場合、ユーザーがフォームを送信しようとしても、フォームは送信されずブラウザ側で入力を促す警告が表示されます。これにより、JavaScriptによる複雑なバリデーション処理を書かなくても、簡単に入力チェックを実装できます。

  2. HTML DOM入力パスワードのrequiredプロパティとは？使い方をサンプルコード付きで解説

    HTML DOMのInput Password requiredプロパティは、<input>要素のrequired属性に関連付けられたプロパティです。このプロパティを使うことで、フォームをサーバーに送信する前に、パスワード欄の入力が必須かどうかを設定したり、現在の設定状態を取得したりすることができます。required属性が設定されたパスワード欄が空のままの場合、ユーザーはフォームを送信できなくなります。 構文（Syntax） requiredプロパティの基本的な構文は以下の通りです。 requiredプロパティの設定 textObject.required = true|fals