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

HTML DOMのInput URL disabledプロパティとは？構文と実装例を解説

HTML DOM Input URL disabledプロパティとは

HTML DOMのInput URL disabledプロパティは、<input type="url">で作成されたURL入力フィールドが現在有効（enabled）なのか、無効（disabled）なのかを取得・設定するためのプロパティです。

このプロパティを活用すると、JavaScriptから動的にフォームのURL入力欄を制御できます。たとえば、「送信ボタンが押された後に入力欄を編集不可にする」といった操作が簡単に実装できます。

構文

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

現在の状態を取得する場合（true / false を返す）

inputURLObject.disabled

無効状態を設定する場合

inputURLObject.disabled = booleanValue

booleanValueに指定できる値

booleanValueには、次のブール値を指定できます。

booleanValue説明
trueURL入力フィールドが無効（disabled）であることを示します。
falseURL入力フィールドが無効化されていないことを示します。これがデフォルト値です。

サンプルコード

それでは、Input URL disabledプロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<title>Input URL disabled</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-disabled</legend>
<label for="URLSelect">WebサイトURL :
<input type="url" id="URLSelect" value="https://example.com">
</label>
<input type="button" onclick="getdisabled()" value="URLを確認">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    function getdisabled() {
        inputURL.disabled = true;
        divDisplay.textContent = 'URL: '+inputURL.value+' を送信しました';
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

「URLを確認」ボタンをクリックする前 −

HTML DOMのInput URL disabledプロパティとは？構文と実装例を解説

「URLを確認」ボタンをクリックした後 −

HTML DOMのInput URL disabledプロパティとは？構文と実装例を解説

ボタンをクリックすると、getdisabled()関数が呼び出され、disabledプロパティにtrueが設定されます。その結果、URL入力フィールドはグレーアウトして編集できなくなり、同時に送信完了のメッセージが表示されます。このように、disabledプロパティを使えばユーザーの誤操作を防ぎながら、フォームの状態を柔軟に制御できます。

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

    HTML DOMのInput URLオブジェクトにおけるnameプロパティは、入力フィールド(type=url)のname属性の値を文字列として返します。また、新しい文字列を代入することで、name属性の値を変更することも可能です。 nameプロパティとは name属性は、フォーム送信時にサーバーへデータを渡す際の識別子として利用される重要な属性です。JavaScriptからこの値を動的に取得したり書き換えたりすることで、柔軟なフォーム操作が実現できます。 構文 nameプロパティの基本的な構文は以下の通りです。 値を取得する場合 inputURLObject.name 値を設定する場合 in

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

    HTML DOM の Input URL maxLength プロパティは、URL入力フィールド（<input type=url>）に入力できる最大文字数を取得・設定するためのプロパティです。このプロパティが定義されていない場合、戻り値は「-1」となります。構文maxLength プロパティの基本的な構文は以下の通りです。maxLength 属性の値を取得する場合inputURLObject.maxLengthmaxLength プロパティに数値を設定する場合inputURLObject.maxLength = number使用例ここでは、Input URL の maxLength