button元素的id,form,type,action属性

button元素的作用:

英文词意表示按钮,点击按钮就会产生一些作用,比如向后台提交数据,重置输入的内容等等。button是一个表单控件,和表单元素form元素配合起来使用。button元素可以放在form元素内,也可以放在它的外面,接下来再介绍。

首先我们先大概看看button元素到底如何使用,再详细介绍它的一些属性:

从视频中,我们看到点击提交按钮就会将输入的数据提交到你设定的地方,我是直接提交给百度,不过百度是不会接受我提交的数据;点击重置按钮时,输入框里的内容就会恢复到初始状态;对于button按钮,目前刚学html的初学者是没必要了解,需要学了Javascript后才能展示其效果

现在就来详细介绍button的一些属性

1.form属性和id属性:

上文我讲过button元素既可以放在form元素里面也可以外面,主要功劳就是form属性和id属性。

先看一下它们的效果吧!

从视频中看到,我创建了两个form元素,它们的id分别为hello和world,而button元素中form属性值我设置的是hello,所以我们在视频中看到只有id为hello的表单的内容被重置为初始状态。总结一下,id属性是用在form元素里,form属性用在button元素中,在button元素和form元素建立起联系。

2.type属性

(1)type="reset"

功能:重置form元素(表单)里的内容

(2)type="submit"

功能:将表单的数据提交action属性设定的地方

(3)type="button"

功能:暂定,需要学习Javascript后才需要了解

4.action属性

功能:它的属性值是一个url(统一资源定位符),简单来说,就是网址,就是你提交数据的地方

button元素的id,form,type,action属性

html添加了哪些表单元素和属性

html5 新增了的表单元素和属性如下:
属性:
1、 form属性
在HTML5中表单元素可放在表单之外,通过给该元素添加form属性即可。
2、 formaction属性
HTML5给提交按钮(如button、submit、image等)增加了formaction属性,以便提交到不同的服务器地址
3、formmethod属性
既然对提交按钮有了formaction属性,就相应的有了formmethod属性
4、 placeholder属性
给文本框(text或textarea)处于未输入状态时的一种文字提示
5、autofocus属性
自动获得焦点,一个页面只能有一个控件具有该属性
6、 list属性
HTML5为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id,增加该属性后的单行文本框类似选择框(select),但允许用户自定义输入,为了避免没有支持该蒜素的浏览器出现错误,我们通常使用CSS设置不显示
6、autocomplete属性
自动完成允许浏览器预测对字段的输入,在HTML5之前自动完成不能自定义设置,任何人都可以看到,所以存在安全隐患,在HTML5中可以通过此属性来指定“on”、”off“或“”(不指定)三种,不指定时使用浏览器的默认值,这取决于各浏览器的决定。
元素:
HTML5大幅度地增加和改良了input元素的种类
search 与text文本框类似,用于搜索;
tel 与text文本框类似,用于电话;
url 与text文本框类似,用于url格式的地址;
email 与text文本框类似,用于email格式的地址;
number 与text文本框类似,用于数值;
range 只允许输入一段范围内的数值,通过min和max属性来设置范围;
color 颜色文本框,“#000000”格式的文字;
file 文件选择文本框,HTML5中通过multiple属性可以多选;
datetime、date、month、week、time、datetime-local 各种日期与时间输入的文本框;
output 定义不同类型的输出;
表单验证
自动验证
所谓自动验证,就是通过为元素添加相应的属性来达到验证的要求
1、 required属性
具有该属性的元素,如果其内容为空则不允许提交,并给出相应的提示
2、pattern属性
具有该属性的元素,如果内容不为空则把内容与pattern的值进行正则匹配,匹配不成功则不通过并提示
3、min属性和max属性
它们是值类型和日期类型的input元素专用属性,限制了输入的范围
4、 step属性
控制元素的值增加或减少的步幅,如输入11-100之间的数字,且步幅是5,那么只能输入11、16、21....
显示验证
除了给元素添加属性来自动验证外,在HTML5中,form元素与输入元素(input)包括select元素和textarea都具有一个checkValidity方法,调用该方法可以进行手动验证,checkValidity方法以boolean的形式返回验证结果。
取消验证
取消表单验证有两个属性:用于form的novalidate和用于submit的formnovalidate:
自定义错误
在HTML5中没经过验证的表单浏览器会有默认的提示,但也提供了通过JavaScript的来设置自定义错误提示信息
增强的页面元素
1、figure元素
figure是个组合元素,可以带标题figcaption,一个figure只允许放置一个figcaption
2、details元素
details提供了一种替代Javascript的、将画面上局部区域进行展开或收缩的方法
3 、mark元素
mark元素表示页面需要突出显示或高亮显示的部分,经典的是搜索结果
4、progress元素
可以给progress设置value和max属性,value表示已经进行的,max表示总数,value和max只能为有效的浮点数,value必须大于0小于等于max。如果不给progress设置这两个属性,则是动态显示正在进行,进度不确定。
5、 meter元素
定义度量衡
6、改良的ol列表
在HTML5中为ol元素添加了start属性和reversed属性
7、改良的dl列表
dl是专门用来定义术语的列表,在HTML5中为dt增加了名字dfn
8、 另外还有cite用于表示作者,small用于标识“小型文本”等

button元素的id,form,type,action属性

html5新增的表单元素有哪些

html5新增的表单元素有以下几种:

datalist,keygen,output三种无素。

1.datalist 元素

datalist 元素规定输入域的选项列表。

列表是通过 datalist 内的 option 元素创建的。

如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id。

2.keygen 元素

keygen 元素的作用是提供一种验证用户的可靠方法。

keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。

私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

3.output 元素

output 元素用于不同类型的输出,比如计算或脚本输出。

上一篇: 女销售原来靠这样卖房(楼盘置业顾问提成大概多少)
下一篇: 究竟什么是Metaverse元宇宙又为何物