JavaScript：作为DOM元素的表单

最新推荐文章于 2024-09-09 09:35:48 发布

kllo__

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量410

点赞数

分类专栏： javascript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/kllo__/article/details/122966769

版权

javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中使用<form>标签访问和处理表单输入字段，包括通过name属性或索引访问字段。同时，展示了提交和重置按钮的功能。当用户提交表单时，可以监听提交事件，获取用户输入并进行验证，例如检查用户名、密码和电子邮件等信息。通过调用event.preventDefault()可以阻止表单的默认提交行为。文章还提供了一个示例，演示了如何在控制台显示用户输入并取消表单数据的发送。

摘要由CSDN通过智能技术生成

访问表单域

一个 <form> 标签对应一个 DOM 元素，这个 element 有一个元素属性，它将所有的表单输入字段集合在一起。您可以使用这个属性通过 name 属性或索引（在表单出现是顺序）访问字段。

下面的示例显示了示例表单的输入字段的一些信息。

<html>
 <head>
 </head>
 <body>
   <form>
     <label for="username"> Username</label>
			<input type="text" name="username" id="username" required>
     <label for="password">Password</label>:
			<input type="text" name="password" id="password" required>
   </form>
 </body>
</html>

// Show some info about the first form element
const formElement = document.querySelector("form");
console.log(`Number of fields: ${formElement.elements.length}`); //

输出结果：

提交一个表单

当用户点击提交按钮时，表单将被提交，该按钮用 <input type="submit">标签标记。<input type="reset">标签标记了一个重置表单的按钮，即取消按钮。

下面是两个按钮的示例：

<html>
 <head>
 </head>
 <body>
   <form>
	<input type="submit" value="Submit">
	<input type="reset" value="Cancel">
   </form>
 </body>
</html>

显示结果：

当用户提交表单时，浏览器的默认行为是联系 web 服务器并请求由 <form> 标签的action 属性标签标识的资源，并在此过程中发送表单数据。在此之前，提交事件会在表单对应的 DOM 元素上触发。通过为这种类型的事件添加处理程序，您可以在表单数据被发送之前访问它。您可以通过调用与事件关联的 Event 对象上的 preventDefault() 方法来取消对服务器的请求。

下面的代码在控制台中显示表单中的所有用户输入，然后取消对服务器的请求。

html:

<html>
 <head>
 </head>
 <body>
   <form>
     
   <label for="username">Username</label>:
		<input type="text" name="username" id="username" required>
     
   <label for="password">Password</label>:
		<input type="text" name="password" id="password" required>
     
     <label for="emailAddress">Email Address</label>:
		<input type="text" name="emailAddress" id="emailAddress" required>
     <br>
		<input type="checkbox" name="confirmation" id="confirmation">
		<label for="confirmation">Send me a confirmation email</label>
  	<br>
   <input type="radio" name="subscription" id="newsroom" value="newspromo">
	<label for="newsroom">Subscribe me to newsletters and promotions</label>
	<br>
	<input type="radio" name="subscription" id="news" value="news">
	<label for="news">Subscribe me only to the newsletter</label>
	<br>
	<input type="radio" name="subscription" id="no" value="no" checked>
	<label for="no">No subscriptions</label>
	<br>
     
   <label for="nationality">Nationality</label>:
	<select name="nationality" id="nationality">
  <option value="US" selected>American</option>
  <option value="FR">French</option>
  <option value="ES">Spanish</option>
  <option value="XX">Other</option>
	</select>
   	<br><br>
     
	<input type="submit" value="Submit">
	<input type="reset" value="Cancel">
     
   </form>
 </body>
</html>

js:

const formElement = document.querySelector("form");

// Shows all user input and cancels form data sending
formElement.addEventListener("submit", e => {
  const username = e.target.elements.username.value;
  const password = e.target.elements.password.value;
  const email = e.target.elements.emailAddress.value;
  console.log(`Username: ${username}, password: ${password}, email: ${email}`);

  if (e.target.elements.confirmation.checked) {
    console.log("You asked for email confirmation");
  } else {
    console.log("You didn't asked for email confirmation");
  }
  switch (e.target.elements.subscription.value) {
    case "newspromo":
      console.log("You are subscribed to newsletters and promotions");
      break;
    case "news":
      console.log("You are subscribed to newsletters only");
      break;
    case "no":
      console.log("You are not subscribed to anything");
      break;
    default:
      console.error("Unknown subscription code");
  }
  switch (e.target.elements.nationality.value) {
    case "US":
      console.log("Hello! You are a US citizen");
      break;
    case "FR":
      console.log("Bonjour! You are a French citizen");
      break;
    case "ES":
      console.log("Hola! You are a Spanish citizen");
      break;
    default:
      console.log("Your nationality is unknown");
  }
  e.preventDefault(); // Cancel form data sending
});

输出结果：

kllo__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：作为DOM元素的表单

访问表单域一个 <form> 标签对应一个 DOM 元素，这个 element 有一个元素属性，它将所有的表单输入字段集合在一起。您可以使用这个属性通过 name 属性或索引（在表单出现是顺序）访问字段。下面的示例显示了示例表单的输入字段的一些信息。<html> <head> </head> <body> <form> <label for="username"> User...
复制链接

扫一扫

专栏目录