首页 > html5+css > html5基础知识 > HTML5中的表单元素标签
2016
12-16

HTML5中的表单元素标签

form 表示 HTML 表单
input 表示用来收集用户输入数据的控件
textarea 表示可以输入多行文本的控件
select 表示用来提供一组固定的选项(下拉列表)
option 表示提供提供一个选项(配合select使用)
optgroup 表示一组相关的 option 元素
button 表示可用来提交或重置的表单按钮(或一般按钮)
datalist 定义一组提供给用户的建议值
fieldset 表示一组表单元素
legend 表示 fieldset 元素的说明性标签
label 表示表单元素的说明标签
output 表示计算结果
datalist 规定输入域的选项列表(可以修改内容的下拉列表)

 

所有要求输入的表单控件验证:

<input type="text" required> //必须填写一个值

<input type="number" min="10" max="100"> //限定在某一个范围内

<input type="text" placeholder="请输入区号+座机" required pattern="^[\d]{2,4}\-[\d]{6,8}$"> //使用正则表达式

<form action="http://li.cc" novalidate> //禁止表单验证

一、form的几个属性:

action:表示表单提交的页面

method:表示表单的请求方式,有 POST 和 GET 两种,默认 GET

accept-charset:规定服务器可处理的表单数据字符集。这个在IE上不支持,在IE上要用onsubmit="document.charset='utf-8';"表示:

<form method="post" action="" accept-charset="utf-8" onsubmit="document.charset='utf-8';"></form>

enctype:表示浏览器对发送给服务器的数据所采用的编码格式。 有三种:application/x-www-form-urlencoded(默认编码,不能将文件上传到服务器)、multipart/form-data(用 于上传文件到服务器)、text/plain(未规范的编码,不 建议使用,不同浏览器理解不同)

name:设置表单名称,以便程序调用

target:设置提交时的目标位置:_blank、_parent、_self、_top

autocomplete:设置浏览器记住用户输入的数据,实现自动完成表单。有“on”和“off”两个值,默认为on。

novalidate:设置是否执行客户端数据有效性检查。

二、input的几个属性:

name:定义 input 元素的名称,以便接收到相应的值

value:该input的默认值。

type:input 元素的类型

autofocus:单属性,让光标聚焦在某个input 元素上,让用户直接输入

disabled:单属性,禁用 input 元素

autocomplete:单独设置 input 元素的自动完成功能

form:让表单外的元素和指定的表单挂钩提交

<form method="get" id="register"> ... </form>

<input name="email" form="register">

三、select:下拉列表:

name:设定提交时的名称

disabled:将下拉列表禁用

form:将表单外的下拉列表与某个表单挂钩

size:设置下拉列表的高度,多少行

selected:单属性,设置初始化时默认选择

multiple:单属性,设置是否可以多选

autofocus:获取焦点

required:单属性,选择验证,设置后必须选择才能通过

<select name="fruit">

<option value="1">苹果</option>

<option value="2">橘子</option>

</select>

select的子标签:

option:提供具体的选项。

optgroup:对下拉列表中的option进行分组

<optgroup label="水果类">

<option value="1">苹果</option>

<option value="3" label="香蕉" selected>香蕉</option>

</optgroup>

label为分组的名字,默认为粗体斜体显示。

四、textarea:多行文本框:

name:设定提交时的名称

form:将表单外的多行文本框与某个表单挂钩

readonly:设置多行文本框只读

disabled:将多行文本框禁用

maxlength:设置最大可输入的字符长度

autofocus:获取焦点

placeholder:设置输入时的提示信息

rows:设置行数

cols:设置列数

wrap:设置是否插入换行符,有soft(默认)和hard两种,前者不会提交输入框中的换行,后者会把换行转换成换行符进行提交。

required:单属性,设置必须输入值,否则无法通过验证

五:label:表单空间的说明标签。可以关联input,让用户体验更好,且更加容易设置 CSS 样式。

两种用法:

<label for="user">用户名:</label><input id="user" name="user">

<label>用户名:<input id="user" name="user"></label>

作用是点击“用户名”三个字光标直接移到该input控件内进而可以进行输入。

六、fieldset:对表单进行分组。该标签会把包含的表单元素用一个有边框的方块包起来。

<fieldset><input>....</fieldset>,属性为:

name:给分组定义一个名称

form:让表单外的分组与表单挂钩

disabled:禁用分组内的表单

七、legend:添加分组说明标签,给分组加上一个标题

<fieldset> <legend>注册表单</legend></fieldset>

显示效果为fieldset的上访边框中间显示,即用legend的文字内容代替一部分边框。

八、button:添加按钮 标签对之间的文字为按钮上显示的文字内容<button>按钮显示内容</button>。

submit:表示按钮的作用是提交表单,默认

reset:表示按钮的作用是重置表单,表单内容会重置为value的默认值。

button:表示按钮为一般性按钮,没有任何作用

如果button元素的属性type值为submit时,还会提供额外的属性:

form:指定按钮关联的表单

formaction:覆盖form元素的action属性

formenctype:覆盖form元素的enctype属性

formmethod:覆盖form元素的method属性

formtarget:覆盖form元素的target属性

formnovalidate:覆盖form元素的novalidate属性

九、output:计算结果:

<form oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">

<input type="number" id="num1"> x <input type="number" id="num2">

<output for="num1 num2" name="res">

</form>

for属性写出所有参与计算的id,form中oninput中的res为output的name值。

十、datalist元素规定输入域的选项列表(可以修改内容的下拉列表)。

列表是通过datalist内的option元素创建的。用输入域(input)的list属性引用datalist的id把 datalist绑定到输入域

<input type="url" list="url_list" name="link" />

<datalist id="url_list">

<option label="W3School" value="http://www.W3School.com.cn" />

<option label="Google" value="http://www.google.com" />

<option label="Microsoft" value="http://www.microsoft.com" />

</datalist>

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。