JavaScript 表单控件

1. 简介

JavaScript 是一种广泛用于 Web 开发的脚本语言，它可以使网页更加动态和交互。在网页中，表单是用户和网站进行交互的重要组成部分。JavaScript 提供了一系列的表单控件，可以让我们更好地处理用户输入和展示数据。本文将介绍常见的 JavaScript 表单控件，并给出相应的代码示例。

2. 常见的表单控件

2.1 文本框

文本框（Text Input）是最常见的表单控件之一，用于接收用户的文本输入。在 HTML 中，文本框可以通过<input>标签来创建，并通过type属性指定为"text"。

<input type="text" id="myInput">

在 JavaScript 中，可以通过 DOM 操作获取文本框的值并进行处理。

const input = document.getElementById('myInput');
console.log(input.value); // 输出文本框的值

2.2 复选框

复选框（Checkbox）用于让用户从一组选项中选择一个或多个选项。在 HTML 中，复选框可以通过<input>标签来创建，并通过type属性指定为"checkbox"。

<input type="checkbox" id="myCheckbox" value="apple">
<input type="checkbox" id="myCheckbox" value="banana">
<input type="checkbox" id="myCheckbox" value="orange">

在 JavaScript 中，可以通过 DOM 操作获取复选框的状态并进行处理。

const checkboxes = document.querySelectorAll('input[type="checkbox"]');
checkboxes.forEach(checkbox => {
  console.log(checkbox.value, checkbox.checked); // 输出复选框的值和是否被选中
});

2.3 单选按钮

单选按钮（Radio Button）用于让用户从一组选项中选择一个选项。在 HTML 中，单选按钮可以通过<input>标签来创建，并通过type属性指定为"radio"。

<input type="radio" id="myRadio" name="fruit" value="apple">
<input type="radio" id="myRadio" name="fruit" value="banana">
<input type="radio" id="myRadio" name="fruit" value="orange">

在 JavaScript 中，可以通过 DOM 操作获取单选按钮的状态并进行处理。

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
  console.log(radio.value, radio.checked); // 输出单选按钮的值和是否被选中
});

2.4 下拉列表

下拉列表（Select）用于让用户从一组选项中选择一个选项。在 HTML 中，下拉列表可以通过<select>标签来创建，并通过<option>标签定义选项。

<select id="mySelect">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

在 JavaScript 中，可以通过 DOM 操作获取下拉列表的选中项并进行处理。

const select = document.getElementById('mySelect');
console.log(select.value); // 输出选中项的值

2.5 文本域

文本域（Textarea）用于接收用户的多行文本输入。在 HTML 中，文本域可以通过<textarea>标签来创建。

<textarea id="myTextarea"></textarea>

在 JavaScript 中，可以通过 DOM 操作获取文本域的值并进行处理。

const textarea = document.getElementById('myTextarea');
console.log(textarea.value); // 输出文本域的值

3. 计算相关的数学公式

在处理表单输入时，经常需要进行计算操作。下面是一些常见的数学公式的 JavaScript 实现。

3.1 计算圆的面积

圆的面积计算公式为：

面积 = π * 半径²

function calculateCircleArea(radius) {
  return Math.PI * radius ** 2;
}

console.log(calculateCircleArea(5)); // 输出圆的面积

3.2 计算三角形的面积

三角形的面积计算公式为：

面积 = 底边 *