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

HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

HTML DOMのInput URLオブジェクトにおけるnameプロパティは、入力フィールド(type="url")のname属性の値を文字列として返します。また、新しい文字列を代入することで、name属性の値を変更することも可能です。

nameプロパティとは

name属性は、フォーム送信時にサーバーへデータを渡す際の識別子として利用される重要な属性です。JavaScriptからこの値を動的に取得したり書き換えたりすることで、柔軟なフォーム操作が実現できます。

構文

nameプロパティの基本的な構文は以下の通りです。

値を取得する場合

inputURLObject.name

値を設定する場合

inputURLObject.name = '文字列'

サンプルコード

それでは、Input URLのnameプロパティを使用した具体的な例を見てみましょう。以下の例では、URL入力フィールドのname属性の値を取得して画面に表示します。

<!DOCTYPE html>
<html>
<head>
<title>Input URL name</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-name</legend>
<label for="URLSelect">社員のURL:
<input type="url" id="URLSelect" value="https://www.example.com" name="Jack">
</label>
<input type="button" onclick="getName()" value="所有者は誰？">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    function getName() {
        if(inputURL.value === 'https://www.example.com')
            divDisplay.textContent = '上記のURLの所有者は ' + inputURL.name + ' です';
        else
            divDisplay.textContent = '上記のURLに所有者はいません！';
    }
</script>
</body>
</html>

実行結果

このコードを実行すると、以下のように動作します。

ボタンをクリックする前

「所有者は誰？」というボタンが表示された状態で、URL入力フィールドには初期値「https://www.example.com」が設定されています。

HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

ボタンをクリックした後

ボタンをクリックすると、JavaScriptのgetName()関数が呼び出され、入力フィールドのvalueが条件に一致する場合、nameプロパティの値（この例では「Jack」）を取得して表示します。

HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

まとめ

Input URLのnameプロパティを使うことで、JavaScriptからURL入力フィールドのname属性を読み取りや書き換えが簡単に行えます。フォームの動的な制御やバリデーション処理など、実用的なWebアプリケーション開発において役立つプロパティです。

  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）基本的な構文は以下の通りです。正規表