前端基础：表单及DOM操作表单

最近在复习前端原生的知识，仅此记录一下表单相关的内容。

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息 3 个部分组成。

表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的采集和传递。

  <form></form>: 表单的内容都需要定义在 form 标签里面。

  <form>会把它范围内的表单元素信息送给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
    各种表单元素
</form>

表单控件

HTML表单到底是如何采集用户信息的呢？

表单控件（文本框、单选框、多选框、下拉菜单、按钮、分组控件等等）

输入框

<input></input>

属性：

• type：text（默认值）、password、radio、checkbox、submit、reset、button、file
• name：定义 input 元素的名称。（单选和复选都要有相同的 name 值）
• value：定义 input 元素的值。
• checked：首次加载时被选中。
• maxlength：输入字段的字符的最大长度。

文本框和密码框

文本框：<input type="text"></input>

用户可以在里面输入任何文字。

密码框：<input type="password"></input>

用户输入时不可以看见输入的密码。

单选按钮和多选按钮

单选按钮：<input type="radio"></input>

单选按钮可以实现多选一。

多选按钮：<input type="checkbox"></input>

单选按钮（复选框）可以实现多选。

提交按钮和重置按钮

提交按钮：<input type="submit"></input>

提交按钮可以va表单元素里面的值提交给后台服务器。

重置按钮：<input type="reset"></input>

重置按钮可以清除表单中的所有数据，使得表单恢复默认状态。

普通按钮和文件域

普通按钮：<input type="button"></input>

普通按钮即可以点击的按钮，一般结合 JS 使用。

文件域：<input type="file"></input>

文件域用于上传文件。

标注标签

<label></label>一般用于为 input 元素定义标注。

使用场景：用于绑定一个表单元素，当点击标签内的文本时没浏览器会自动将焦点转到对应的表单元素上，用于增加用户体验。

<input type="radio" name="sex" id="sex"></input>
<label for="sex">男</label>

核心：label 标签的 for 属性应当与相关元素的 id 属性相同。

选择框（select）

语法：

<select>
    <option></option>
    <option></option>
    ……
</select>

1. select 标签中至少包含一对 标签

2. <select>元素有常用的属性如下：

   1. multiple：是否支持多选，默认单选
   2. size：设置同时可见的行数

3. <option>元素的常用属性如下：

   1. selected：默认选中的列表项（在 标签 中 定义 selected = "selected" 时，当前项为默认选中选项。）
   2. value：表示该选项被选中时提交给表单的值，如果省略了这个属性，值就从选项元素的文本内容中获取

多行文本域

适用场景：当用户输入内容较多的情况下，可以使用 <textarea> 标签。

语法：

<textarea rows="3" cols="20">
    文本内容
</textarea>

1. cols=”每行中的字符数”
2. rows=”显示的行数”

一般在实际开发用 css 控制样式

通过原生DOM操作表单

在 Web 开发中，表单是不可或缺的一部分，它们使用户能够与网站进行交互并提供信息。虽然现代框架提供了方便的表单处理方法，但理解原生 DOM 操作表单的原理仍然是需要的。

1. 获取表单元素

（1）使用 Document 对象提供的定位页面元素的方法：

// 通过 getElementById 获取表单
const formById = document.getElementById('formId');

// 通过 getElementsByTagName 获取表单（如果只有一个表单的话）
const formByTagName = document.getElementsByTagName('form')[0];

// 通过 querySelector 获取表单
const formByQuerySelector = document.querySelector('form');

// 通过 querySelectorAll 获取表单（如果有多个表单的话）
const formsByQuerySelectorAll = document.querySelectorAll('form');

（2）使用 Document 对象提供的 forms 属性：

// 获取当前 HTML 页面中的所有表单集合
const allForms = document.forms;

// 通过索引访问特定表单
const specificForm = document.forms[0];

（3）使用 HTMLFormElement 对象的 elements 属性：

// 获取指定表单的所有组件集合
const formComponents = specificForm.elements;

// 通过 getElementById 获取表单组件
const inputById = specificForm.elements['inputId'];

// 通过索引获取表单组件
const inputByIndex = specificForm.elements[0];

2. 表单事件监听

input 事件

当用户修改输入字段的值时，input 事件会在相应的 <input>、<select> 和 <textarea> 元素上触发。

<input type="text" id="inputField">
<p id="output"></p>

<script>
  const inputField = document.getElementById('inputField');
  const output = document.getElementById('output');

  inputField.addEventListener('input', function(event) {
    const value = event.target.value;
    output.textContent = value;
  });
</script>

change 事件

change 事件则在用户修改这些元素（<input>、<select> 和 <textarea> ）的值后触发。

<select id="selectField">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>
<p id="output"></p>

<script>
  const selectField = document.getElementById('selectField');
  const output = document.getElementById('output');

  selectField.addEventListener('change', function(event) {
    const selectedValue = event.target.value;
    output.textContent = selectedValue;
  });
</script>

表单的常见事件

包括 submit（提交）、reset（重置）等。

form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单提交默认行为
    // 在这里执行表单提交前的验证和处理逻辑
});

3. 下拉列表的操作

在DOM中，<select>元素对应 HTMLSelectElement 对象，<option>元素对应 HTMLOptionElement 对象。

HTMLSelectElement 对象

HTMLSelectElement对象表示<select>元素在DOM中的对象。

属性：

• length：表示当前<select>元素中<option>元素的个数。
• multiple：表示<select>元素是否允许多项选择，等价于HTML中的multiple属性。
• options：当前<select>元素中<option>元素对象的集合。
• selectedIndex：代表第一个被选中的<option>元素的索引值。如果没有元素被选中，则返回 -1。
• size：当前<select>元素中可见的行数，等价于 HTML 中的size属性。

方法：

• add(item [, before])：将<option>元素添加到当前<select>元素的选项集合中。
• item(index)：返回索引值为 index 的<option>元素。如果没有，则返回null。
• remove(index)：从当前<select>元素的选项集合中删除指定索引值的<option>元素。

<select id="mySelect" multiple size="3">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>

<script>
  // 获取 <select> 元素
  var selectElement = document.getElementById("mySelect");
  
  // 添加一个新选项
  selectElement.add(new Option("Option 4", "4"));

  // 移除索引为 2 的选项
  selectElement.remove(2);
  
  // 获取当前选中的索引
  var selectedIndex = selectElement.selectedIndex;
  
  // 获取当前选中的选项
  var selectedOption = selectElement.options[selectedIndex];
</script>

HTMLOptionElement 对象

HTMLOptionElement对象是<option>元素在其所属的选项列表中的索引值。

属性：

• index：当前<option>元素在其所属的选项列表中的索引值。

• selected：表示当前<option>元素是否被选中。

• text：当前<option>元素的文本属性。

• value：当前<option>元素的value属性值。

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

<script>
  // 获取所有 <option> 元素
  var options = document.getElementById("mySelect").options;
  
  // 遍历所有选项并输出其属性
  for (var i = 0; i < options.length; i++) {
    var option = options[i];
    console.log("Index: " + option.index);
    console.log("Text: " + option.text);
    console.log("Value: " + option.value);
    console.log("Selected: " + option.selected);
    console.log("----------------------");
  }
</script>

4. 一般表单元素获取值

（1）使用元素的属性获取值

直接通过元素的属性来获取值。对于输入框、单选按钮、复选框等表单元素，它们通常用 value 属性来存储用户输入的值。

// 获取文本框的值
var inputValue = document.getElementById("textboxID").value;

// 获取单选按钮的值
var selectedValue = document.querySelector("input[name='xxx']:checked").value;

（2）使用表单对象 (Form Object) :

• 通过表单对象来访问表单中的各个元素。
• 步骤：给表单添加一个 ID，然后使用 document.getElementById() 来获取表单对象，最后使用表单对象的属性来访问表单元素的值。

var form = document.getElementById("formID");
var input1Value = form.elements["input1"].value;
var input2Value = form.elements["input2"].value;

原文链接：https://juejin.cn/post/7355287413818261513 作者：睡得好没烦恼