在 JavaScript 中获取 HTML 表单值

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中获取 HTML 表单值

作者：迹忆客最近更新：2024/03/22 浏览次数：

在 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: &nbsp; 
<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();
}