JavaScript DOM 学习第五章 表单简介

下面是本人对JavaScript DOM学习第五章 表单简介的完整攻略。本章主要讲解表单相关的知识点，包括表单的基本组成部分以及如何使用JavaScript对表单进行操作。

表单的基本组成部分

表单是由一组表单元素组成，包括文本输入框、密码输入框、单选框、复选框、下拉框、文件上传等。每个表单元素都有其独有的属性和方法，我们可以使用这些属性和方法对表单元素进行操作。

一个表单通常由以下组成部分：

• 表单标签 <form>：用于声明一个表单的开始和结束。
• 表单元素：比如文本输入框、密码输入框、单选框、复选框、下拉框等。
• 提交按钮：用于提交表单数据。

表单元素的属性和方法

每个表单元素都有其独有的属性和方法，下面我们简单介绍一下几个常用的属性和方法。

value属性

value属性用于获取和设置表单元素的值，比如文本输入框、密码输入框、下拉框等。

var input = document.getElementById('username');
console.log(input.value);  //获取输入框的值
input.value = 'new value'; //设置输入框的值

checked属性

checked属性用于获取和设置单选框和复选框的选中状态。

var radio = document.getElementById('radio');
console.log(radio.checked);  //获取单选框的选中状态
radio.checked = true;       //设置单选框为选中状态

var checkbox = document.getElementById('checkbox');
console.log(checkbox.checked);  //获取复选框的选中状态
checkbox.checked = true;        //设置复选框为选中状态

selectedIndex属性

selectedIndex属性用于获取和设置下拉框中选中的项的索引。

var select = document.getElementById('select');
console.log(select.selectedIndex);  //获取下拉框中选中的项的索引
select.selectedIndex = 1;           //设置下拉框中选中的项为第二项（索引从0开始）

使用JavaScript操作表单

我们可以使用JavaScript对表单进行操作，比如获取表单元素的值、修改表单元素的属性、提交表单等。

获取表单元素的值

使用value属性可以获取表单元素的值，比如获取文本输入框的值、单选框的值、复选框的值、下拉框中选中的项的值等。

<form>
  <input type="text" id="username">
  <br>
  <input type="radio" id="radio" name="sex" value="male">
  <label for="radio">男</label>
  <input type="radio" id="radio2" name="sex" value="female">
  <label for="radio2">女</label>
  <br>
  <input type="checkbox" id="checkbox" value="yes">
  <label for="checkbox">同意协议</label>
  <br>
  <select id="select">
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
  </select>
</form>

<script>
  var input = document.getElementById('username');
  console.log(input.value);  //获取输入框的值

  var radio = document.getElementById('radio');
  console.log(radio.value);  //获取选中的单选框的值

  var checkbox = document.getElementById('checkbox');
  console.log(checkbox.value);  //获取复选框的值

  var select = document.getElementById('select');
  console.log(select.value);  //获取选中的下拉框的值
</script>

修改表单元素的属性

使用属性可以修改表单元素的属性，比如修改文本输入框的值、设置单选框的选中状态、设置复选框的选中状态、设置下拉框中选中的项等。

<form>
  <input type="text" id="username" value="old value">
  <br>
  <input type="radio" id="radio" name="sex" value="male">
  <label for="radio">男</label>
  <input type="radio" id="radio2" name="sex" value="female">
  <label for="radio2">女</label>
  <br>
  <input type="checkbox" id="checkbox" value="yes">
  <label for="checkbox">同意协议</label>
  <br>
  <select id="select">
    <option value="1">选项1</option>
    <option value="2" selected>选项2</option>
    <option value="3">选项3</option>
  </select>
</form>

<script>
  var input = document.getElementById('username');
  input.value = 'new value';  //设置输入框的值

  var radio = document.getElementById('radio');
  radio.checked = true;  //设置单选框为选中状态

  var checkbox = document.getElementById('checkbox');
  checkbox.checked = true;  //设置复选框为选中状态

  var select = document.getElementById('select');
  select.selectedIndex = 2;  //设置下拉框中选中的项为第三项（索引从0开始）
</script>

提交表单

使用submit方法可以提交表单。

<form id="myform">
  <input type="text" name="username">
  <br>
  <input type="submit" value="提交">
</form>

<script>
  var form = document.getElementById('myform');
  form.onsubmit = function() {
    //在这里可以处理表单提交的数据
    console.log(form.username.value);  //获取输入框的值
    return false;  //阻止表单提交
  };
</script>

以上就是本人对JavaScript DOM学习第五章 表单简介的完整攻略，希望对您有所帮助。