How to add input box in javascript

With the rise of modern web applications, JavaScript has become an indispensable part of web development. One of the main uses of one of these is to interact with the user in order to collect data or receive input from the user. In this article, we’ll take a deep dive into how to add input boxes in JavaScript to collect user-entered data.

1. Creating an input box using HTML

The easiest way to add an input box in JavaScript is by using the <input> element in HTML . Below is a basic input box example that creates a text box and provides a placeholder to guide the user into typing the desired value.

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

In the above example, we used the <form> element to create a form that contains a text input box. The <label> element is a label mark used to identify the content represented by the text box. In this case, the for property of <label> matches the id property of the input box in order to bind the two together. The type attribute of the <input> tag specifies what type the input box should be, such as text input box, radio button, check box, etc.

In a more practical application, you would typically use a form and multiple input boxes to collect user data. Here is an example of using a radio button and a multiline text box:

<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>

In this example, we use the <input> element to create a radio button and a phone input box. We also use the <textarea> element to create a multi-line text box.

2. Create input boxes using JavaScript

In addition to defining input boxes in HTML, you can also use JavaScript to dynamically create and add input boxes. As you will see in the example below, input boxes can be created and added using the createElement() and appendChild() methods.

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);

In the above example, we first created a <form> element and three child elements using the createElement() method: a &lt ;label> element, an <input> element and a submit button. We then set the text and attribute values ​​of the <label> and <input> elements, and finally use the appendChild() method to add all elements to <form> element. Finally, we add the <form> element to the body of the document.

3. Get data from the input box

Once your input box has been created, you usually need to get the user input data. In JavaScript, you can use the value attribute to access the value of the input box, such as the following code snippet:

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

In the above code, we first use getElementById()Method to find the input box with ID "name", and then read the value attribute to get the value in the input box. We store the value in a variable and print it in the console.

In addition to obtaining the data of the text input box, you can also use similar techniques to obtain the values ​​​​of other types of input boxes such as radio buttons, check boxes, and drop-down menus. Here are a few examples:

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);

In the above code, we use the querySelector() method to select a radio button element with a checked option, using the checked attribute Get the selected status of the checkbox element, and use the value attribute to get the selected value of the drop-down menu element.

Conclusion

Whether you define input boxes in HTML or create them in JavaScript, you can use the above techniques to access and get the data in the input boxes.

In real applications, you usually need to verify the data entered by the user to ensure its validity. You can also use JavaScript to dynamically change the properties and styles of input boxes and forms to make them more attractive and easy to use.

Hope this article helps you add input boxes in JavaScript so that you can get data from the user more easily.

The above is the detailed content of How to add input box in javascript. For more information, please follow other related articles on the PHP Chinese website!