JS document form表单元素操作完整示例

示例1：获取表单中的数据并进行处理

1. 编写HTML代码

首先，我们需要编写HTML代码，创建一个表单，并添加表单元素：输入框、单选按钮、复选框、下拉框。

<form id="myForm">
  <label>姓名：</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label>性别：</label>
  <input type="radio" name="gender" value="male" checked>男
  <input type="radio" name="gender" value="female">女
  <br>
  <label>爱好：</label>
  <input type="checkbox" name="hobby" value="reading">阅读
  <input type="checkbox" name="hobby" value="music">音乐
  <input type="checkbox" name="hobby" value="sports">运动
  <br>
  <label>城市：</label>
  <select name="city">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
  <br>
  <button type="button" onclick="getData()">提交</button>
</form>

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码，通过document.forms属性获取到表单元素，然后处理表单数据并输出到控制台。

<script>
function getData() {
  var form = document.forms["myForm"];
  var name = form.elements["name"].value;
  var gender = form.elements["gender"].value;
  var hobby = [];
  for (var i = 0; i < form.elements["hobby"].length; i++) {
    if (form.elements["hobby"][i].checked) {
      hobby.push(form.elements["hobby"][i].value);
    }
  }
  var city = form.elements["city"].value;
  console.log("姓名：" + name);
  console.log("性别：" + gender);
  console.log("爱好：" + hobby.join(", "));
  console.log("城市：" + city);
}
</script>

3. 运行程序

最后，我们运行程序，输入数据并提交，然后在浏览器控制台中查看输出结果。例如，我们输入姓名为“张三”，选择性别为“男”，选择爱好为“阅读”和“音乐”，选择城市为“上海”，则输出结果如下：

姓名：张三
性别：male
爱好：阅读, 音乐
城市：shanghai

示例2：动态修改表单元素

1. 编写HTML代码

同样地，我们需要编写HTML代码，创建一个包含文本框、按钮和图片预览区域的表单。

<form>
  <label>选择图片：</label>
  <input type="file" id="imageInput" onchange="previewImage()">
  <br>
  <img id="imagePreview">
  <br>
  <button type="button" onclick="disableInput()">禁用输入框</button>
  <button type="button" onclick="enableInput()">启用输入框</button>
</form>

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码，用于动态修改表单元素。具体来说，我们实现以下功能：

预览选择的图片
禁用输入框
启用输入框

<script>
function previewImage() {
  var input = document.getElementById("imageInput");
  var preview = document.getElementById("imagePreview");
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      preview.setAttribute("src", e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  } else {
    preview.setAttribute("src", "");
  }
}
function disableInput() {
  document.getElementById("imageInput").disabled = true;
}
function enableInput() {
  document.getElementById("imageInput").disabled = false;
}
</script>