在 JavaScript 中获取 HTML 表单值
在 JavaScript 中，我们可以使用特定输入元素的 id 属性来获取值或触发 name 属性来获取数值。
这两种约定都将继续从用户那里获取原始数据。从技术上讲，目标是获取用户的所有输入并确保流程正常运行。
在这里，我们将使用 HTML DOM 又名 document.forms 从 HTML 表单 中检索所有元素。这里简要介绍了可用于与 HTML 元素和属性交互的方法。
此外，在我们的示例中，我们将使用识别元素的 id 的随意方式从那里提取信息。
在 JavaScript 中使用 document.forms 获取 HTML 表单值
document.forms 方法使用 name 属性来定位表单及其元素。从战术上讲，表单中的所有值都将通过这种启动方式传递。
我们将有一个 select 元素，后跟一个多个 option 元素。我们将从那里选择一个偏好，并将值分开。
稍后，当 document.forms 将被启动时，它将获取分隔值。让我们检查代码块是否正确可视化。
代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e) {
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML = select.toUpperCase();
}
输出：
如你所见，采用 document.forms 方法与 HTML form 值交互的 form 对象将返回所有元素。
onsubmit 方法用于处理该选定值的进一步操作。在该实例中，select 对象使用 form 和 select 元素的相应 name 属性获取所需值。
后来我们在页面上打印了大写格式的值。
在 JavaScript 中使用 id 访问 HTML 表单值
对于这个例子，我们将使用 documnet.getElementById 和 querySelector 来驱动表单输入。
使用这种格式的工具很普遍，并且与 document.forms 方法类似。因此，以下代码行将演示预览。
代码片段：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById('forms');
form.onclick = function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
console.log(name);
document.getElementById('print').innerHTML = name.toUpperCase();
}
输出：
JavaScript 中对象 form 访问的表单，以及输入的值也是从 .value 方法派生的。
在前面的例子中，我们使用 button 元素提交输入，这里我们使用 input type button 执行提交。
这里的区别仅在于 onsubmit 和 onclick，两者的工作方式相似。
