HTML中Form表单的使用 |
您所在的位置：网站首页 › 在表单标签中,用什么属性来提交填写的信息不包括 › HTML中Form表单的使用 |
HTML中Form表单的使用
|
1、form表单标记
表单标记以标记开头，以标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。 标记的基本语法如下： 标记的属性说明：
示例：创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理。 2、form表单的提交与重置 form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。 2.1 使用表单按钮 2.2 使用JavaScript脚本 2.2.1 使用JavaScript脚本提交form表单 //提交表单 myForm.method = 'POST'; myForm.action = "action.html"; myForm.submit(); 2.2.2 使用JavaScript脚本重置form表单 //重置表单 document.getElementsByName("myForm")[0].reset();示例：使用JavaScript脚本实现form表单的提交与重置。 使用JavaScript脚本实现form表单的提交与重置 用户注册 博客信息： 您好，欢迎访问 pan_junbiao的博客 博客地址： https://blog.csdn.net/pan_junbiao 登录账户： 登录密码： //提交 function submitFrom() { //验证数据 if(!myForm.loginName.value) { alert("请输入登录账户！"); myForm.loginName.focus(); return; } if(!myForm.loginPwd.value) { alert("请输入登录密码！"); myForm.loginPwd.focus(); return; } //提交表单 myForm.method = 'POST'; myForm.action = "action.html"; myForm.submit(); } //重置 function resetFrom() { //重置表单 document.getElementsByName("myForm")[0].reset(); }注意：使用JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type="button"。 执行结果：
3、form表单提交前数据校验 当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。 示例：创建login.html登录页面，并使用JavaScript实现提交表单前的数据校验。 3.1 校验方式一使用form表单的 onsubmit 提交事件。 注意： （1）登录按钮的类型必须是：type="submit" 。 （2）提交方法是写在form元素的 onsubmit 提交事件上，并且方法名前面必须加上 return 。 完整代码： 登录 请输入登录信息 博客信息： 您好，欢迎访问 pan_junbiao的博客 博客地址： https://blog.csdn.net/pan_junbiao 登录账户： 登录密码： //提交登录 function SubmitLogin() { let tips = document.getElementById("tips"); //判断用户名是否为空 if (!myForm.loginName.value) { tips.innerText = "请输入登录账户！" myForm.loginName.focus(); return false; } //判断密码是否为空 if (!myForm.loginPwd.value) { tips.innerText = "请输入登录密码！" myForm.loginPwd.focus(); return false; } //校验成功 return true; } 3.2 校验方式二使用普通按钮的 onclick 点击事件。 注意： （1）登录按钮的类型必须是：type="button"。 （2）提交方法是写在按钮的 onclick 点击事件上。 完整代码： 登录 请输入登录信息 博客信息： 您好，欢迎访问 pan_junbiao的博客 博客地址： https://blog.csdn.net/pan_junbiao 登录账户： 登录密码： //提交登录 function SubmitLogin() { let tips = document.getElementById("tips"); //判断用户名是否为空 if (!myForm.loginName.value) { tips.innerText = "请输入登录账户！" myForm.loginName.focus(); return; } //判断密码是否为空 if (!myForm.loginPwd.value) { tips.innerText = "请输入登录密码！" myForm.loginPwd.focus(); return; } //提交表单 myForm.submit(); }执行结果：
|
【本文地址】
今日新闻 |
推荐新闻 |