1.form表单的作用

form表单的功能：用于搜集不同类型用户的输入的内容，我们可以利用表单创建一些网页。

2.form表单的常用元素

2.1 form元素

form元素：用于创建一个表单
form元素书写格式： < form action=“这里是表单提交地址” method=“这里是表单提交数据的方式”> < /form>
两个重要属性：

action：表单的提交地址
post：表单提交数据的方式有两种 post get
post和get的区别：

	数据安全性	数据长度	传输效率
get(默认）	会将数据暴露在地址栏	数据长度受到地址栏宽度的影响，过长会导致数据丢失	传输效率高
post	不会将数据暴露在地址栏	数据不会受地址栏长度影响，数据长度不受限	传输效率低

2.2 input元素

input元素：表示输入框
格式： < input type=“text” name=“user” required placeholder=“提示内容” id=“username” title=“我是框框” maxlength=“10” minlength：“4” value=“name” >
重要属性：

type：表示输入框的类型，具体类型我会在下面列表介绍
name：值我们自己设定，不影响什么
required：表示必填项，如果不填，用户无法提交
placeholder：表示输入框内的提示内容
id：表示元素编号有开发人员自己定义
maxlength：设置输入的最大长度
minlength：设置输入字符的最小长度
input输入框的常用类型：

属性取值	功能
text（默认取值）	单行文本输入框
password	密码输入框
checkbox	复选框
radio	单选框
select	下拉框，selected表示被选中，option是指选项
submit	提交，提交地址是form action所配置的地址
reset	重置按钮
button	按钮
hidden	隐藏域

2.2 textarea元素

textarea：提供输入大量文本的输入框，比如，QQ空间中发表状态，贴吧发表贴子等。

书写格式：< textarea></ textarea>

HTML之form表单相关推荐

form表单提交前进行ajax或js验证，校验不通过不提交
在使用form表单进行提交数据前,需要进行数据的校验->表单的校验(如:两次密码输入是否相同)+后台数据的校验(如:账号是否存在),这个时候,如果哪步校验不通过,表单将停止提交,同时避免后台主键 ...
form表单提交编码的问题
浏览器在form提交后,会生成一个HTTP的头部信息"content-type",标准规定其形式为Content-type: application/x-www-form-urle ...
js异步提交form表单的解决方案
1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span sty ...
SpringMVC的form：form表单的使用
为什么要使用SpringMVC的form:form表单,有两个原因:一是可以更加快捷的完成表单的开发,比如会替你做好数据类型装换等本来需要你自己动手的工作.其次就是能够更加方便的实现表单回显. 首先要 ...
Form表单提交前进行JS验证的3种方式
1. 提交按钮的onclick事件中验证 <script type="text/javascript"> function check(form) { ...
form表单的reset
form表单的reset 重置表单(把表单的所有输入元素重置为它们的默认值.): 1.使用reset按钮,条件reset按钮必须在form表单内部. 2. <input id="But ...
HTML中的form表单有一个关键属性 enctype
HTML中的form表单有一个关键属性 enctype＝application/x-www-form-urlencoded 或multipart/form-data. 1.enctype=" ...
一个接口同时支持 form 表单、form-data、json 的优雅写法
欢迎关注方志朋的博客,回复"666"获面试宝典来源:https://juejin.cn/post/7054441239839506446 最近重写个项目遇到个比较棘手的问题,老项 ...
react antd form 表单清空
关于react_antd_desgin的学习这两天也是获取到的知识零零散散,大多在网上也能获取的到,所以隔了很长的时间,没有编写关于react相关的文章.今天之所以写也是因为公司中秋节放假,在郑州,窗 ...
flask与简单的form表单
flask与简单的form表单文章目录 flask与简单的form表单视频代码 flask html 视频 https://www.bilibili.com/video/BV17W41177oE ...

HTML之form表单