html表单属性有哪些,web表单属性

html中表单的定义标记中三个常用的属性。

通俗的讲 form标签是用来进行表单提交用的

form标签里面的常见属性如下

action: 表单提交的地址, 肯定是要提交给某个服务器的,action的地址就是要提交的服务器的地址

method:以何种方式提交,常见的为get和post. 区别在于一个是明文(在url中显示),一个是暗文

form标签是和服务器交互用的, 以用户注册为例

用户在浏览器中的注册页面添加信息后,点击提交,此时是将这些信息提交至某个服务器

服务器根据提交的信息将注册信息保存. 这个过程就需要使用form标签了

form中action属性应该是服务器注册模块的地址

form标签下应该有input,textarea,select等表单标签以及input type=" submit"标签

当点击submit按钮时,浏览器会自动将表单信息封装提交至action中的地址

所谓的提交就是访问action中地址并携带着form表单中input,textarea,select的信息

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用于标识“小型文本”等

HTML5有哪些新的表单属性

表单结构更灵活要提交数据的控件可以布局在form标签之外，看下面的代码，表单元素可以写到form元素之外，只需在元素中加入form="form1"属性，也可提交到form元素指定的服务器地址新增表单元素我们以前学过的表单元素包括“text”、“button”、“file”、"radio"等，html5中新增加了一些表单元素，下面列出这些元素及其作用email类型用于验证email的格式，当提交表单时会自动验证email域的值url类型用于验证URL地址的格式，当提交表单时会自动验证url域的值number类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持range类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100日期和时间类型：HTML5拥有多个可供选取日期和时间的新输入类型：date-选取日、月、年month-选取月、年week-选取周和年time-选取时间（小时和分钟）datetime-选取时间、日、月、年（UTC时间）datetime-local-选取时间、日、月、年（本地时间）search类型用于搜索域，比如站点搜索或Google搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中案例如下，大家可以将代码拷贝或者自己编写之后，在浏览器中查看效果浏览器的支持情况chrome：firefox：Opera：MicrosoftEdge：好，我们对微软的进步进行表扬！新增表单属性除了新增的表单元素之外，html5中还新增了一些表单属性新的form属性：autocompletenovalidate新的input属性：autocompleteautofocusformformoverrides(formaction,formenctype,formmethod,formnovalidate,formtarget)height和widthlistmin,max和stepmultiplepattern(regexp)placeholderrequired在下面的案例中，我们对一些常用的属性做了解释，大家直接看代码和代码旁边的注释，然后对照浏览器的运行结果就理解其意义了

html表单元素有哪些？

HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框（SELECT），文本输入框（INPUT type=text），密码输入框（INPUT type=password），单选输入框（INPUT type=radio），复选输入框（INPUT type=checkbox），重置按钮、提交按钮、隐藏域、等等。

一、文本域input type="text" name="text" value="" /

二、密码域

密码跟文本框类似，但是在里面输入的内容显示为圆点。

input type="password" name="text" value="" /

三、单选按钮

男人:input type="radio" name="sex" value="male" / Malebr /

女人：input type="radio" name="sex" value="female" / Female

四、复选框

input type="checkbox" name="check1" value="" /

五、按钮

input type="button" value="确认" /

六、重置按钮

当点击重置按钮时，重置按钮所在的表单将全部清空，而其他表单不受影响。input type="reset" value="重置" /

七、提交按钮

当点击提交按钮时，浏览器将自动提交表单。input type="submit" value="提交" /

八、隐藏域

隐藏域在浏览器中并不显示，仅仅为保存一些不太重要的资料而存在。input type="hidden" value="我是一个隐藏域" /

九、上传域input type="file" value="" /

十、图片按钮input type="image" src="123.gif" /

十一、下拉列表select

option value="0"0/option

option value="1"1/option

option value="2"2/option

例如：

属性：disabled，可选值：disabled?，说明：规定禁用该下拉列表。 ?

十二、label

abel 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。例如，当将单选按钮放在label内。则点击label内的文字也会触发单选按钮，而不必只是点中小圆点。

例如：

labelinput type="radio" name="male" /男人/label/p

labelinput type="radio" name="male" /女人/label/p

十三、禁用（disabled）与只读（readonly）

禁用和只读属性。readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去。

禁用文本框：input type="text" disabled="disabled" /

只读文本框: input type="text" readonly="readonly" //form

十四、TextArea

十五、fieldset ? ?定义域

fieldset用于给表单元素分组，legend用于设置分组标题。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分： 表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

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 元素用于不同类型的输出，比如计算或脚本输出。

根据具体问题类型，进行步骤拆解／原因原理分析／内容拓展等。

具体步骤如下：／导致这种情况的原因主要是……