表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。
<form>标记的基本语法如下：
<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form><form>标记的属性说明：
示例：创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理。
<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
</form>
form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。
<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>//提交表单
myForm.method = 'POST';
myForm.action = "action.html";
myForm.submit();//重置表单
document.getElementsByName("myForm")[0].reset();示例：使用JavaScript脚本实现form表单的提交与重置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用JavaScript脚本实现form表单的提交与重置</title>
<meta name="author" content="pan_junbiao的博客">
</head>
<body>
<form name="myForm">
<table align="center">
<caption>用户注册</caption>
<tr>
<td>博客信息：</td>
<td>
<label>您好，欢迎访问 pan_junbiao的博客</label>
</td>
</tr>
<tr>
<td>博客地址：</td>
<td>
<label>https://blog.csdn.net/pan_junbiao</label>
</td>
</tr>
<tr>
<td>登录账户：</td>
<td>
<input type="text" name="loginName" />
</td>
</tr>
<tr>
<td>登录密码：</td>
<td>
<input type="password" name="loginPwd" />
</td>
</tr>
<!-- 以下是提交、取消按钮 -->
<tr>
<td colspan="2" style="text-align: center; padding: 5px;">
<input type="button" value="提交" onclick="submitFrom()"/>
<input type="button" value="重置" onclick="resetFrom()"/>
</td>
</tr>
</table>
</form>
</body>
<script>
//提交
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();
}
</script>
</html>注意：使用JavaScript脚本实现form表单的提交与重置时，按钮是普通按钮：type="button"。
执行结果：
当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。
示例：创建login.html登录页面，并使用JavaScript实现提交表单前的数据校验。
使用form表单的 onsubmit 提交事件。
注意：
（1）登录按钮的类型必须是：type="submit" 。
<input type="submit" value="登录"/>（2）提交方法是写在form元素的 onsubmit 提交事件上，并且方法名前面必须加上 return 。
<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
</form>完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="author" content="pan_junbiao的博客">
</head>
<body>
<div align="center">
<form action="action.html" method="post" name="myForm" onsubmit="return SubmitLogin()">
<table>
<caption>请输入登录信息</caption>
<tr>
<td>博客信息：</td>
<td>
<label>您好，欢迎访问 pan_junbiao的博客</label>
</td>
</tr>
<tr>
<td>博客地址：</td>
<td>
<label>https://blog.csdn.net/pan_junbiao</label>
</td>
</tr>
<tr>
<td>登录账户：</td>
<td>
<input type="text" name="loginName" />
</td>
</tr>
<tr>
<td>登录密码：</td>
<td>
<input type="password" name="loginPwd" />
</td>
</tr>
<!-- 以下是提交、取消按钮 -->
<tr>
<td>
<input type="submit" value="登录"/>
</td>
<td>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
<span id="tips" style="color: red; font-weight: bold"></span>
</form>
</div>
</body>
<script>
//提交登录
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;
}
</script>
</html>使用普通按钮的 onclick 点击事件。
注意：
（1）登录按钮的类型必须是：type="button"。
（2）提交方法是写在按钮的 onclick 点击事件上。
<input onclick="SubmitLogin()" type="button" value="登录"/>完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<meta name="author" content="pan_junbiao的博客">
</head>
<body>
<div align="center">
<form action="action.html" method="post" name="myForm">
<table>
<caption>请输入登录信息</caption>
<tr>
<td>博客信息：</td>
<td>
<label>您好，欢迎访问 pan_junbiao的博客</label>
</td>
</tr>
<tr>
<td>博客地址：</td>
<td>
<label>https://blog.csdn.net/pan_junbiao</label>
</td>
</tr>
<tr>
<td>登录账户：</td>
<td>
<input type="text" name="loginName" />
</td>
</tr>
<tr>
<td>登录密码：</td>
<td>
<input type="password" name="loginPwd" />
</td>
</tr>
<!-- 以下是提交、取消按钮 -->
<tr>
<td>
<input onclick="SubmitLogin()" type="button" value="登录"/>
</td>
<td>
<input type="reset" value="取消"/>
</td>
</tr>
</table>
<span id="tips" style="color: red; font-weight: bold"></span>
</form>
</div>
</body>
<script>
//提交登录
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();
}
</script>
</html>执行结果：
