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

2024-03-15 1034阅读

温馨提示:这篇文章已超过376天没有更新,请注意相关的内容是否还可用!

一、form元素

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

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元素有多种变化。

1.文本框 text

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

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

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

效果图:

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

2.单选框 radio

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

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

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

value 是控制传入服务器的值,比如我们这里如果选择了男,则传入的sex的值就是man

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之间):
    颜色:
VPS购买请点击我

免责声明:我们致力于保护作者版权,注重分享,被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明:本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度,360,搜狗等多加搜索引擎自动关键词搜索配图,如有侵权的图片,请第一时间联系我们,邮箱:ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

目录[+]