HTML中Form表单的使⽤
1、form表单标记
表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。
<form>标记的基本语法如下：
1<form action="url" method="get | post" name="formName" onsubmit="" target="">
2</form>
<form>标记的属性说明：
⽰例：创建表单，设置表单名称为 myForm，传送⽅式为 post，当⽤户提交表单时，提交⾄ action.html 页⾯进⾏处理。
1<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
2</form>
2、form表单的提交与重置
form表单的提交与重置可以通过HTML⾃带的表单按钮⽅式，或者使⽤JavaScript脚本的⽅式。
2.1 使⽤表单按钮
1<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
2 <input type="submit" value="提交"/>
3 <input type="reset" value="重置"/>
4</form>
2.2 使⽤JavaScript脚本
2.2.1 使⽤JavaScript脚本提交form表单
1//提交表单
3myForm.action = "action.html";
4myForm.submit();
2.2.2 使⽤JavaScript脚本重置form表单
1//重置表单
⽰例：使⽤JavaScript脚本实现form表单的提交与重置。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>使⽤JavaScript脚本实现form表单的提交与重置</title>
6 <meta name="author" content="pan_junbiao的博客">
7</head>
8<body>
9 <form name="myForm">
10 <table align="center">
11 <caption>⽤户注册</caption>
12 <tr>
13 <td>博客信息：</td>
14 <td>
15 <label>您好，欢迎访问 pan_junbiao的博客</label>
html中提交表单用什么属性16 </td>
17 </tr>
18 <tr>
19 <td>博客地址：</td>
20 <td>
21 <label>blog.csdn/pan_junbiao</label>
22 </td>
23 </tr>
24 <tr>
25 <td>登录账户：</td>
26 <td>
27 <input type="text" name="loginName" />
28 </td>
29 </tr>
30 <tr>
31 <td>登录密码：</td>
32 <td>
33 <input type="password" name="loginPwd" />
34 </td>
35 </tr>
36 <!-- 以下是提交、取消按钮 -->
37 <tr>
38 <td colspan="2" >
39 <input type="button" value="提交" onclick="submitFrom()"/>
40 <input type="button" value="重置" onclick="resetFrom()"/>
41 </td>
42 </tr>
43 </table>
44 </form>
45</body>
46<script>
47 //提交
48 function submitFrom()
49 {
50 //验证数据
51 if(!myForm.loginName.value)
52 {
53 alert("请输⼊登录账户！");
54 myForm.loginName.focus();
55 return;
56 }
57
58 if(!myForm.loginPwd.value)
58 if(!myForm.loginPwd.value)
59 {
60 alert("请输⼊登录密码！");
61 myForm.loginPwd.focus();
62 return;
63 }
64
65 //提交表单
66 hod = 'POST';
67 myForm.action = "action.html";
68 myForm.submit();
69 }
70
71 //重置
72 function resetFrom()
73 {
74 //重置表单
75 ElementsByName("myForm")[0].reset();
76 }
77</script>
78</html>
注意：使⽤JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type="button"。
执⾏结果：
3、form表单提交前数据校验
当我们在提交form表单前，需要对表单的数据进⾏有效性校验。下⾯将介绍如何使⽤JavaScript实现对form表单提交前的数据校验。⽰例：创建login.html登录页⾯，并使⽤JavaScript实现提交表单前的数据校验。
3.1 校验⽅式⼀
使⽤form表单的 onsubmit 提交事件。
注意：
（1）登录按钮的类型必须是：type="" 。
<input type="submit" value="登录"/>
（2）提交⽅法是写在form元素的 onsubmit 提交事件上，并且⽅法名前⾯必须加上 return 。
1<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
2</form>
完整代码：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>登录</title>
6 <meta name="author" content="pan_junbiao的博客">
7</head>
8<body>
9<div align="center">
10 <form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
11 <table>
12 <caption>请输⼊登录信息</caption>
13 <tr>
14 <td>博客信息：</td>
15 <td>
16 <label>您好，欢迎访问 pan_junbiao的博客</label>
17 </td>
18 </tr>
19 <tr>
20 <td>博客地址：</td>
21 <td>
22 <label>blog.csdn/pan_junbiao</label>
23 </td>
24 </tr>
25 <tr>
26 <td>登录账户：</td>
27 <td>
28 <input type="text" name="loginName" />
29 </td>
30 </tr>
31 <tr>
32 <td>登录密码：</td>
33 <td>
34 <input type="password" name="loginPwd" />
35 </td>
36 </tr>
37 <!-- 以下是提交、取消按钮 -->
38 <tr>
39 <td>
40 <input type="submit" value="登录"/>
41 </td>
42 <td>
43 <input type="reset" value="取消"/>
44 </td>
45 </tr>
46 </table>
47 <span id="tips" ></span>
48 </form>
49</div>
50</body>
51<script>
52 //提交登录
53 function SubmitLogin() {
54 let tips = ElementById("tips");
55
56 //判断⽤户名是否为空
57 if (!myForm.loginName.value) {
58 tips.innerText = "请输⼊登录账户！"
59 myForm.loginName.focus();
60 return false;
61 }
62 //判断密码是否为空
63 if (!myForm.loginPwd.value) {
64 tips.innerText = "请输⼊登录密码！"
65 myForm.loginPwd.focus();
65 myForm.loginPwd.focus();
66 return false;
67 }
68 //校验成功
69 return true;
70 }
71</script>
72</html>
3.2 校验⽅式⼆
使⽤普通按钮的 onclick 点击事件。
注意：
（1）登录按钮的类型必须是：type="button"。
（2）提交⽅法是写在按钮的 onclick 点击事件上。
<input onclick="SubmitLogin()" type="button" value="登录"/>
完整代码：
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>登录</title>
6 <meta name="author" content="pan_junbiao的博客">
7</head>
8<body>
9<div align="center">
10 <form action="action.html" method="post" name="myForm">
11 <table>
12 <caption>请输⼊登录信息</caption>
13 <tr>
14 <td>博客信息：</td>
15 <td>
16 <label>您好，欢迎访问 pan_junbiao的博客</label>
17 </td>
18 </tr>
19 <tr>
20 <td>博客地址：</td>
21 <td>
22 <label>blog.csdn/pan_junbiao</label>
23 </td>
24 </tr>
25 <tr>
26 <td>登录账户：</td>
27 <td>
28 <input type="text" name="loginName" />
29 </td>
30 </tr>
31 <tr>
32 <td>登录密码：</td>
33 <td>
34 <input type="password" name="loginPwd" />
35 </td>
36 </tr>
37 <!-- 以下是提交、取消按钮 -->
38 <tr>
39 <td>
40 <input onclick="SubmitLogin()" type="button" value="登录"/>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论