1、form表单标记

表单标记以<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>

2、form表单的提交与重置

form表单的提交与重置可以通过HTML自带的表单按钮方式，或者使用JavaScript脚本的方式。

2.1 使用表单按钮

<form id="form1" name="myForm" method="post" action="action.html" target="_blank"><input type="submit" value="提交"/><input type="reset" value="重置"/>
</form>

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表单的提交与重置。

<!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"。

执行结果：

3、form表单提交前数据校验

当我们在提交form表单前，需要对表单的数据进行有效性校验。下面将介绍如何使用JavaScript实现对form表单提交前的数据校验。

示例：创建login.html登录页面，并使用JavaScript实现提交表单前的数据校验。

3.1 校验方式一

使用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>

3.2 校验方式二

使用普通按钮的 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>

执行结果：

HTML中Form表单的使用相关推荐

[转]Joomla! 1.5中form表单的实现方式
原文链接:Joomla! 1.5中form表单的实现方式 Joomla! 1.5中JParameter不但提供了一个xml 和ini文件读取和访问的方式,同时它提供了一个render函数,这个rend ...
html中form表单标签的使用
在html中,表单是经常用到的,用来与用户交互并提交数据.今天要介绍的就是表单标签form标签 "form"作为英文单词有"表格"的意思 1.定义和用法标签是 ...
php同时接受get post,php中form表单同时使用POST和GET传递参数说明
摘要腾兴网为您分享:php中form表单同时使用POST和GET传递参数说明,同花顺,淘集集,尚游戏,美食天下等软件知识,以及医联网,recovernt,wifi控制,音效驱动,板栗直播,畅想听吧, ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
vue中form表单支持回车键提交踩坑
平时我们项目中的列表页面通常都有条件搜索,为了使用方便通常都会支持回车搜索. 此功能的实现普遍做法是:为form表单添加 @keydown.enter.native="自定义方法名称&quo ...
HTML中form表单的应用
1.form表单标记 form表单以<form>标记开始,以</form>标记结束而在form表单中的属性 action 规定当提交表单时向何处发送表单数据. method ...
html中form表单提交和阻止表单提交的细节
如何阻止表单提交 HTML禁止表单提交方法源代码如下: form2.html <!DOCTYPE html> <html> <head> <meta cha ...
Vue中form表单提交问题
关于input组件回车后,默认提交form表单出现的问题: <div class="searchArea"><form action="###&quo ...
javascript中FORM表单的submit()方法经验教训.
@author songfeng 因为JS内对象的方法实际上是存储语句的一个类似于指针的东西. 其指向了内存的一个位置, 也就是其函数的位置,当然也可以让其指向一个变量值 ...
antd如何获取表单的值_antd 父组件获取子组件中form表单的值
还是拿代码来讲吧,详情见注释子组件 import React, { Component } from 'react'; import { Form, Input } from 'antd'; con ...

HTML中Form表单的使用