• フォーム部品のnameプロパティ
• フォーム部品のtypeプロパティ
• フォーム部品のformプロパティ
• フォーム部品のvalueプロパティ
• フォーム部品のfocus()メソッド
• フォーム部品のblur()メソッド

フォーム部品のnameプロパティ

nameプロパティは、フォーム要素に設定された名前を取得または設定するために使用されます。この名前は、フォーム送信時にサーバー側でデータを識別するために使われます。

使用例

        // HTML
        <form>
            <input type="text" name="username">
        </form>

        // JavaScript
        const input = document.forms[0].elements["username"];
        console.log(input.name); // 出力: username
    

フォーム部品のtypeプロパティ

typeプロパティは、フォーム要素のタイプを示します。たとえば、”text”、”password”、”checkbox”などが含まれます。このプロパティは読み取り専用ではなく、変更することも可能です。

使用例

        // HTML
        <input type="text" id="myInput">

        // JavaScript
        const input = document.getElementById("myInput");
        console.log(input.type); // 出力: text
        input.type = "password"; // テキストボックスをパスワード入力に変更
    

フォーム部品のformプロパティ

formプロパティは、要素が属しているフォーム要素を取得します。フォーム内に配置された要素に対して有効です。

使用例

        // HTML
        <form id="myForm">
            <input type="text" id="myInput">
        </form>

        // JavaScript
        const input = document.getElementById("myInput");
        console.log(input.form.id); // 出力: myForm
    

フォーム部品のvalueプロパティ

valueプロパティは、フォーム要素の現在の値を取得または設定するために使用されます。

使用例

        // HTML
        <input type="text" value="初期値" id="myInput">

        // JavaScript
        const input = document.getElementById("myInput");
        console.log(input.value); // 出力: 初期値
        input.value = "新しい値"; // 値を変更
    

フォーム部品のfocus()メソッド

focus()メソッドは、フォーム要素にフォーカスを設定します。これにより、ユーザーがその要素に直接入力できる状態になります。

使用例

        // HTML
        <input type="text" id="myInput">

        // JavaScript
        const input = document.getElementById("myInput");
        input.focus(); // 入力ボックスにフォーカスを設定
    

フォーム部品のblur()メソッド

blur()メソッドは、フォーム要素からフォーカスを外します。これにより、他の要素にフォーカスが移動します。

使用例

        // HTML
        <input type="text" id="myInput">

        // JavaScript
        const input = document.getElementById("myInput");
        input.blur(); // 入力ボックスからフォーカスを外す