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

HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

HTML DOM の Input URL value プロパティは、type="url" が指定された input 要素の value 属性が定義されている場合に、その値を文字列として返します。さらに、新しい文字列を代入することで、ユーザー側から値を設定（変更）することも可能です。

構文

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

値を取得する場合

inputURLObject.value

値を設定する場合

inputURLObject.value = '文字列'

使用例

Input URL value プロパティの具体的な使い方を、サンプルコードで確認してみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input URL value</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-value</legend>
<label for="URLSelect">URL Id:
<input type="url" id="URLSelect">
<input type="button" onclick="getUserURL('google')" value="Google">
<input type="button" onclick="getUserURL('bing')" value="Bing"><br>
<input type="button" onclick="redirection()" value="Go">
</label>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    function getUserURL(userName) {
        if(userName === 'google')
            inputURL.value = 'https://www.google.com';
        else
            inputURL.value = 'https://www.bing.com';
    }
    function redirection() {
        if(inputURL.value !== '')
            divDisplay.textContent = 'Redirecting to '+inputURL.value;
        else
            divDisplay.textContent = 'Enter URL';
    }
</script>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような動作になります。

URL フィールドが空の状態で「Go」ボタンをクリックした場合 −

HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

「Bing」ボタンをクリックした後 −

HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

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

HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

ポイントまとめ

  • value プロパティは常に文字列型の値を返します。
  • value 属性が未設定の場合は、空文字列（''）が返されます。
  • JavaScript から値を代入すれば、フォーム送信前に URL をプログラム的に操作できます。
  • 主要なブラウザ（Chrome、Firefox、Edge、Safari など）すべてでサポートされています。
  1. HTML DOM Input URLのplaceholderプロパティ解説！構文・使い方・実行例を紹介

    HTML DOM の Input URL placeholder プロパティは、<input type=url> 要素に対してプレースホルダー（入力ヒント用の文字列）を設定・取得するためのプロパティです。プレースホルダーは、ユーザーがどのような形式でテキストを入力すればよいのかを視覚的に伝える手がかりとして、Web フォームで広く活用されています。 構文 このプロパティは、以下のように記述して使用します。 プレースホルダーの文字列値を取得する場合 inputURLObject.placeholder placeholder に文字列値を設定する場合 inputURLObj

  2. HTML DOM Input URLのpatternプロパティとは？使い方をサンプルコードで解説

    Input URL patternプロパティとはHTML DOMのInput URL patternプロパティは、URL入力フィールド（<input type=url>）に対応する正規表現を設定・取得するためのプロパティです。pattern属性に指定された値は、ユーザーがURLフィールドに入力したテキストに対して検証され、形式が一致しない場合はフォーム送信時にバリデーションエラーが表示されます。このプロパティを活用することで、JavaScriptから動的に入力チェックのルールを読み取ったり、変更したりすることが可能になります。構文（Syntax）基本的な構文は以下の通りです。正規表