JavaScriptで入力ボックスを追加する方法

最新の Web アプリケーションの台頭により、JavaScript は Web 開発に不可欠な部分になりました。これらの主な用途の 1 つは、データを収集したり、ユーザーからの入力を受信したりするためにユーザーと対話することです。この記事では、JavaScript に入力ボックスを追加してユーザーが入力したデータを収集する方法について詳しく説明します。

1. HTML を使用した入力ボックスの作成

JavaScript で入力ボックスを追加する最も簡単な方法は、次の <input> 要素を使用することです。 HTML 。以下は、テキスト ボックスを作成し、ユーザーが目的の値を入力できるようにガイドするプレースホルダーを提供する、基本的な入力ボックスの例です。

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" placeholder="请输入您的姓名">
  <br>
  <input type="submit" value="提交">
</form>

上の例では、<form> 要素を使用して、テキスト入力ボックスを含むフォームを作成しました。 <label> 要素は、テキスト ボックスによって表されるコンテンツを識別するために使用されるラベル マークです。この場合、<label> の for プロパティは、入力ボックスの id プロパティと一致して、2 つをバインドします。 <input> タグの type 属性は、テキスト入力ボックス、ラジオ ボタン、チェック ボックスなど、入力ボックスの種類を指定します。

より実際的なアプリケーションでは、通常、フォームと複数の入力ボックスを使用してユーザー データを収集します。ラジオ ボタンと複数行のテキスト ボックスの使用例を次に示します。

<form>
  <label>请选择性别:</label>
  <br>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">男</label>
  <br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">女</label>
  <br>
  <br>
  <label for="phone">电话号码:</label>
  <br>
  <input type="tel" id="phone" name="phone" maxlength="11">
  <br>
  <br>
  <label for="msg">留言:</label>
  <br>
  <textarea id="msg" name="msg" rows="5"></textarea>
  <br>
  <input type="submit" value="提交">
</form>

この例では、<input> 要素を使用して、ラジオ ボタンと電話入力ボックスを作成します。 。また、<textarea> 要素を使用して複数行のテキスト ボックスを作成します。

2. JavaScript を使用して入力ボックスを作成する

HTML で入力ボックスを定義するだけでなく、JavaScript を使用して入力ボックスを動的に作成および追加することもできます。以下の例でわかるように、入力ボックスは createElement() メソッドと appendChild() メソッドを使用して作成および追加できます。

let form = document.createElement('form');
let label = document.createElement('label');
let input = document.createElement('input');
let submit = document.createElement('input');

label.textContent = "请输入您的邮箱地址:";
input.type = "email";
input.id = "email";
input.name = "email";
submit.type = "submit";
submit.value = "提交";

form.appendChild(label);
form.appendChild(input);
form.appendChild(submit);

document.body.appendChild(form);

上の例では、最初に createElement() メソッドを使用して <form> 要素と 3 つの子要素を作成しました。 label> 要素、<input> 要素、および送信ボタン。次に、<label> 要素と <input> 要素のテキストと属性値を設定し、最後に appendChild() メソッドを使用して、すべての要素を <form> 要素に追加します。最後に、ドキュメントの本文に <form> 要素を追加します。

入力ボックスからデータを取得する

入力ボックスを作成したら、通常はユーザー入力データを取得する必要があります。 JavaScript では、次のコード スニペットのように、

value 属性を使用して入力ボックスの値にアクセスできます。

let nameInput = document.getElementById('name');
let name = nameInput.value;
console.log(name);

上記のコードでは、最初に

getElementById を使用します。 ()ID「name」を持つ入力ボックスを検索し、value 属性を読み取って入力ボックスの値を取得するメソッド。値を変数に保存し、コンソールに出力します。

テキスト入力ボックスのデータを取得することに加えて、同様の手法を使用して、ラジオ ボタン、チェック ボックス、ドロップダウンなどの他のタイプの入力ボックスの値を取得することもできます。メニュー。以下にいくつかの例を示します。

let genderInput = document.querySelector('input[name="gender"]:checked');
let gender = genderInput.value;
console.log(gender);

let checkboxInput = document.getElementById('agree');
let isChecked = checkboxInput.checked;
console.log(isChecked);

let selectInput = document.getElementById('language');
let language = selectInput.value;
console.log(language);

上記のコードでは、

querySelector() メソッドを使用して、checked## を使用してチェックされたオプションを持つラジオ ボタン要素を選択します。 # 属性 チェックボックス要素の選択状態を取得し、value 属性を使用してドロップダウン メニュー要素の選択された値を取得します。 結論

入力ボックスを HTML で定義する場合でも、JavaScript で作成する場合でも、上記の手法を使用して入力ボックス内のデータにアクセスし、データを取得できます。

実際のアプリケーションでは、通常、ユーザーが入力したデータを検証して、その有効性を確認する必要があります。 JavaScript を使用して入力ボックスとフォームのプロパティとスタイルを動的に変更し、より魅力的で使いやすくすることもできます。

この記事が、JavaScript で入力ボックスを追加して、ユーザーからより簡単にデータを取得できるようにするのに役立つことを願っています。

以上がJavaScriptで入力ボックスを追加する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。