html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

02-27 阅读 0评论

一、form元素

html表单是网页中最常见元素之一,通过form元素定义表单,表单中包含各种表单项。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性,html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,接口,第1张
(图片来源网络,侵删)

form的action属性

action:提交表单数据时,后台接收的接口(提交表单数据向何处发送),若设置为空以及#则默认提交当前页面的数据。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

form的method属性

method属性:提交表单数据的方式,分别为get和post两种方式。html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

get方式的地址栏可见

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

二、常见表单项

表单项包含文本框、单选框、复选框、按键等。根据type属性值 ,input元素有多种变化。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性,html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性,词库加载错误:未能找到文件“C:\Users\Administrator\Desktop\火车头9.8破解版\Configuration\Dict_Stopwords.txt”。,使用,我们,接口,第5张
(图片来源网络,侵删)

1.文本框 text

定义一个单行输入文本框。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

maxlength允许输入框中输入字符的最大长度位,这里只能输入10个字符

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

2.单选框 radio

定义一个单行输入文本框。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

其中name的值必须一致,否则将不能进行单选,会全部选中。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

3.多选框checkbox

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

其中name的值可写可不写,可以一致也可以不一致, 没有多大影响。在这里的作用就是提交时将值与提交的结果值连起来,显示的就是"aihao = 打篮球 或者跳舞、学习、rap",但必须设置value值。

checked=“checked”:设置单选框默认选中项。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

4.下拉列表select

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

selectd为默认选中项,此处会默认选中武侯。

这里的 value对应着id的值,切忌不要出现中文,比如这里选中武侯,那么提交的数据就是dizhi = wuhou。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

5.文本域textarea

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

其中rows 代表行数,控制高度

cols 代表列数,控制宽度。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

6.按钮button

6.1 提交按钮type=submit

 

6.2 重置按钮type=reset

 

6.3一般按钮type=button

 

表单外的button按钮

提交

button这个标签在form表单标签里面有默认提交的功能,但是在form标签外面就是一个单纯的按钮

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果如图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

button在form标签里会提交数据。此时button在form里面就会有提交的功能和submit功能一样。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

button在form标签外面不会提交数据,就是一个普通按钮。

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

type="button"也只是一个普通按钮和button在form标签外一样,只是一个单纯的按钮,没有提交数据的功能。

7.密码输入框 password

 

密码输入后显示为不可见,如图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

三、html5新增的表单type属性值

1.type=“email”

type="email"属性:验证只能输入邮箱格式,否则不能通过
 e-mial:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

2. type=“tel”

 type="tel":不进行验证,主要是在移动端打开数字键盘 
    电话:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

3.type=“url”

type=“url”: 验证:只能输入合法的网址,必须包含http://

网址:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

没有按照要求填写的效果:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

按照要求填写的效果(正确的效果):

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

4.type=“range”

type=“range”:产生一个滑动条

 范围:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

5.type=“search”

type=“search”:使搜索框更人性化,提供删除“X”符号,来快速清除所输入的内容

搜索框:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

6.type=“date”

type=“date”:日期框,可以选择年、月、日

 日期:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

7.type=“month”

type=“month”:可以选择年和月

月和年:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

8.type=“week”

type=“week”:可以选择年和第几周

年和周:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

9.type=“time”

type=“time”:可以选择时、分、秒

 
    时间:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

10.type=“datetime-local”

type=“datetime-local”:选择年月日和现在的时刻

时刻:

代码图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

效果图:

html:form表单的常用标签以及属性和html5新增的form的type属性值以及属性

11.type=“number”

type=“number”:只能输入数字的数字框包含小数点 value时=为当前值

数字(1到8之间):
    颜色:

免责声明
本网站所收集的部分公开资料来源于AI生成和互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

发表评论

快捷回复: 表情:
评论列表 (暂无评论,人围观)

还没有评论,来说两句吧...

目录[+]