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

HTML DOM Input Text typeプロパティの使い方を徹底解説

HTML DOMのInput Text typeプロパティは、テキスト入力フィールド（<input type="text">）のtype属性の値を取得または設定するためのプロパティです。JavaScriptから動的に入力フィールドの種類を確認したり変更したりしたい場合に活用できます。

構文

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

  • type属性の値を取得する場合（文字列として返却）
inputTextObject.type
  • type属性に新しい値を設定する場合
inputTextObject.type = stringValue

設定できる文字列値

「stringValue」には、以下の値を指定することができます。

stringValue説明
email入力タイプがメールアドレス用であることを示します
text入力タイプが通常のテキストであることを示します
radio入力タイプがラジオボタンであることを示します
tel入力タイプが電話番号であることを示し、モバイル端末では数字キーパッドが表示されます

サンプルコード

それでは、Input Text typeプロパティの具体的な使用例を見ていきましょう。ボタンをクリックすると、対象の入力フィールドのtype属性の値がラベルに表示される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input Text type</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>Text-type</legend>
<label for="TextSelect"></label>
<input type="text" id="TextSelect" >
<input type="button" onclick="getTypeOfInput()" value="What to enter?">
</fieldset>
</form>
<script>
    var labelSelect = document.querySelector("label");
    var inputText = document.getElementById("TextSelect");
    function getTypeOfInput() {
        labelSelect.innerHTML = ' Plain '+inputText.type+': ';
    }
</script>
</body>
</html>

コードのポイント

このサンプルでは、document.getElementById()で入力フィールドの要素を取得し、ボタンクリック時にgetTypeOfInput()関数が呼び出されます。関数内ではinputText.typeによってtype属性の値を参照し、その結果をラベル要素のinnerHTMLに出力しています。

実行結果

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

「What to enter?」ボタンをクリックする前 −

HTML DOM Input Text typeプロパティの使い方を徹底解説

「What to enter?」ボタンをクリックした後 −

HTML DOM Input Text typeプロパティの使い方を徹底解説

ボタンをクリックすると、入力フィールドのtype属性が「text」であることがラベル部分に表示されることが確認できます。

  1. HTML DOM Input Submit typeプロパティとは？構文とサンプルコードで解説

    HTML DOMのInput Submit typeプロパティは、type=submitが設定されたinput要素に関連付けられたプロパティです。このプロパティは、送信ボタン（submit）型のinput要素に対して常に文字列「submit」を返します。フォームの送信ボタンがどの種類の入力要素なのかをJavaScriptから動的に確認したい場合に役立ちます。構文（シンタックス）Submit typeプロパティの基本的な構文は以下の通りです。submitObject.type対象となるinput要素のオブジェクトに対して.typeを指定するだけで、その要素のtype属性値を文字列として取得できま

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

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