HTML | DOM 输入提交值属性

在HTML和DOM编程中，有一种很重要的属性叫做“输入提交值属性”，也称为“值属性”。它用来指定一个输入字段的值，这个值会在提交表单时被传递到服务器。

语法

输入提交值属性可以应用在任何输入字段上，包括输入框、单选框、复选框、下拉菜单等。属性的语法和属性值的类型取决于具体的输入字段类型。

下面是一些常见的输入提交值属性：

1. value
   用于文本框、密码框等输入框，指定输入框中的文本。属性值为字符串类型。

   <input type="text" value="Hello World">
   

2. checked
   用于单选框和复选框，指定是否选中。属性值为布尔类型。

   <input type="checkbox" checked>
   

3. selected
   用于下拉菜单的选项，指定是否选中。属性值为布尔类型。

   <select>
     <option value="1">Option 1</option>
     <option value="2" selected>Option 2</option>
     <option value="3">Option 3</option>
   </select>
   

JavaScript中的使用

使用JavaScript，我们可以通过DOM来访问和修改输入提交值属性的值。

访问值属性

我们可以使用value和checked属性来分别访问文本框和复选框的输入值。而对于下拉框，我们需要访问其选中的选项的selected属性来获取其值。

const input = document.querySelector('input[type="text"]');
const checkbox = document.querySelector('input[type="checkbox"]');
const select = document.querySelector('select');

console.log(input.value); // 输出：Hello World
console.log(checkbox.checked); // 输出：true 或 false
console.log(select.options[select.selectedIndex].value); // 输出：2

修改值属性

我们可以通过赋值的方式来修改输入提交值属性的值。

const input = document.querySelector('input[type="text"]');
const checkbox = document.querySelector('input[type="checkbox"]');
const select = document.querySelector('select');

input.value = 'New Value'; // 修改文本框的值为“New Value”
checkbox.checked = true; // 选中复选框
select.options[2].selected = true; // 选中下拉框中的第三个选项

注意事项

• 在使用select元素时，应该在选项元素中使用属性value来指定值，而非text属性。
• 对于多选框，需要通过JavaScript来获取选中的多个值。