JS获取表单中的元素和取值方法

JS获取表单中的元素和取值方法是网页开发中非常基础和重要的知识点。在网页开发过程中，除了表单元素之外，其他元素并不会搜集到浏览器向服务器请求数据的参数中，因此我们需要使用Javascript来获取表单中的元素，并取值传递给服务器，实现表单的提交等操作。下面是获取表单中元素和取值方法的攻略：

获取表单中元素

表单元素可以通过id、name、标签名或者其他自定义属性来获取。常见的获取表单元素的方法有：

通过id属性获取元素

var element = document.getElementById("idValue");

通过id属性获取表单元素，需要在HTML代码中为元素添加id属性。

通过name属性获取元素

var element = document.getElementsByName("nameValue");

通过name属性获取表单元素，需要注意同一表单内不要有多个name相同的元素。

通过标签名获取元素

var element = document.getElementsByTagName("tagName");

通过标签名获取表单元素，需要注意同一表单内不要有多个标签名相同的元素。

通过自定义属性获取元素

var element = document.querySelector("[attr='value']");

通过querySelector方法，可以根据包含自定义属性的元素来获取表单元素。

获取表单元素的取值

获取表单元素的取值同样可以使用id、name等属性来获取，也可以使用更加直观的value属性来获取。

通过获取表单元素id或name属性来获取取值

var value = document.getElementById("idValue").value;
或
var value = document.getElementsByName("nameValue")[0].value;

通过直接获取表单元素的value属性来获取取值

var value = document.formName.inputName.value;

通过表单元素的value属性来获取取值，需要使用表单元素所在表单的name属性。

示例

下面是两个获取表单元素及其取值的示例：

示例1

HTML代码如下：

<form name="form1">
  <input type="text" id="username" name="username" value="张三">
  <input type="password" id="password" name="password" value="123456">
  <input type="button" value="登录" onclick="getFormValue()">
</form>

Javascript代码如下：

function getFormValue() {
  var username = document.getElementById("username").value;
  var password = document.getElementsByName("password")[0].value;
  alert("用户名：" + username + "，密码：" + password);
}

点击登录按钮，即可弹出"用户名：张三，密码：123456"。

示例2

HTML代码如下：

<form name="form2">
  <select id="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou" selected>广州</option>
    <option value="shenzhen">深圳</option>
  </select>
  <input type="button" value="选择" onclick="getSelectedCity()">
</form>

Javascript代码如下：

function getSelectedCity() {
  var city = document.getElementById("city").value;
  alert("您选择的城市是：" + city);
}

点击选择按钮，即可弹出"您选择的城市是：广州"。