<form>标签
常用属性：
[name]： 规定表单的名称
[action]： 规定当提交表单时向何处发送表单数据
[method]： 规定用于发送表单数据的HTTP方法 （post, get）
[target]： 规定在何处打开action的URL
[enctype]： 规定在向服务器发送表单数据之前如何对其进行编码
[autocomplete]： 规定表单是否应该启用自动完成功能 （在表单提交并且表单输入页面刷新后，表单输入界面刚才提交的输入记录会在你点击了input域并获取焦点之后浏览器会自动将它们作为填入选项显示出来，它们存储在浏览器cookie下作为用户使用记录）
[novalidate]： 通过将novalidate属性放置到form标签上，form标签的原生校验特征就会忽略，这样就可以防止它同你的自己写的JavaScript的校验方法起冲突
类别：
容器级标签
作用：
用于创建一个供用户输入的HTML表单
说明：
标签包含一个或多个如下的表单标签：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>
全局属性： 支持
事件属性： 支持
<input>标签
常用属性：
[form]： 规定<input>标签所属的一个或多个表单
[name]： 规定<input>标签的名称
[value]： 指定<input>标签value的值
[type]： 规定要显示的 <input> 标签类型 （根据type值的不同，input会有不同的效果）
[readonly]： 规定输入字段是只读的
[placeholder]： 规定可描述输入<input>字段预期值的简短的提示信息 （当用户输入时它会消失）
[pattern]： 规定用于验证<input>标签的值的正则表达式
[required]： 规定必需在提交表单之前填写输入字段
[maxlength]： 规定<input>标签中允许的最大字符数
[max]： 属性规定<input>标签的最小值
[min]： 属性规定<input>标签的最大值
[checked]： 规定在页面加载时应该被预先选定的<input> 标签。(只针对type="checkbox"或者type=“radio”)
[src]： 规定显示为提交按钮的图像的URL。(只针对type=“image”)
[alt]： 定义图像输入的替代文本。(只针对type=“image”)
[accept]： 规定通过文件上传来提交的文件的类型。(只针对type=“file”)
[disabled]： 规定应该禁用的 <input> 标签
[type]属性常用值：
（text）：定义普通文本
（number）：定义数字文本，在提交该内容时会有格式验证
（password）：定义密码文本，加密显示
（radio）：定义单选（单选项input中的name要相同，单选效果才会出现）
（checkbox）：定义多选盒（多选盒input中的name要相同，多选提交才会有效）
（email）：在提交该内容时会有格式验证
（file）：定义文件，点击后在浏览器中默认打开文件选择窗口，用于文件上传
（hidden）：无效果，隐藏input，用于向后台携带数据且不想让客户看见的场景
（button）：普通按钮，可用事件+javascript配合该标签使用
（submit）：提交按钮，提交地址为form中的action值，提交方法为form中的method值
（reset）：重置按钮，清空所属表单内所有可输入的控件内的内容
（date）：定义日期选择控件
（time）：定义时间选择控件
（week）：定义星期选择控件
（month）：定义月份选择控件
（datetime）：定义日期+时间选择控件
（datetime-local）：定义本地日期+时间选择控件
（color）：定义颜色选择菜单
类别：
文本级标签
作用：
定义一个允许用户输入数据的input控件
说明：
输入字段可通过多种方式改变，取决于 type 属性
全局属性： 支持
事件属性： 支持
注意：
1.<input> 标签是空的,它只包含标签属性
2.<input> 标签没有结束标签
3.在XHTML中 <input> 标签必须被正确地关闭
<textarea>标签
常用属性：
[form]： 定义文本区域所属的一个或多个表单
[name]： 规定文本区域的名称
[placeholder]： 规定一个简短的提示，描述文本区域期望的输入值
[readonly]： 规定文本区域为只读
[required]： 规定文本区域是必需的/必填的
[maxlength]： 规定文本区域允许的最大字符数
[disabled]： 规定禁用文本区域
类别：
文本级标签
作用：
定义一个多行的文本输入控件
说明：
文本区域中 可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是Courier）可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过 更好的办法 是使用 CSS 的 height和width属性
全局属性： 支持
事件属性： 支持
<button>标签
常用属性：
[form]： 规定按钮属于一个或多个表单
[name]： 规定按钮的名称
[value]： 规定按钮的初始值。可由脚本进行修改
[type]： 规定按钮的类型（button）、（submit）、（reset）
[disabled]： 规定应该禁用该按钮
[formaction]： 规定当提交表单时向何处发送表单数据。覆盖form标签的action属性。该属性与type="submit"配合使用
[formmethod]： 规定用于发送表单数据的HTTP方法。覆盖form标签的method属性。该属性与type="submit"配合使用
[fortarget]： 规定在何处打开actionURL。覆盖form标签的target属性。该属性与type="submit"配合使用
[formenctype]： 规定在向服务器发送表单数据之前如何对其进行编码。覆盖form标签的enctype属性。该属性与type="submit"配合使用
类别：
文本级标签
作用：
定义一个 按钮
说明：
在 <button> 标签 内部，可以放置内容，比如文本 或 图像。这是该标签与使用 <input> 标签创建的按钮之间的 不同 之处
全局属性： 支持
事件属性： 支持
注意：
1.始终要为 <button>标签 规定 type属性。不同的浏览器对 <button>标签 的 type属性 使用不同的默认值
2.如果在HTML表单中使用 <button> 标签，不同的浏览器可能会提交不同的按钮值。要使用 <input> 在HTML表单中 创建按钮
<label>标签
常用属性：
[form]： 规定label字段所属的一个或多个表单
[for]： 规定label与哪个表单标签绑定，把for属性的值设置为相关标签的id属性的值
类别：
文本级标签
作用：
为input标签定义标注 （标记）
说明：
该标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在label标签内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上
全局属性： 支持
事件属性： 支持
注意：
1.label标签有两种与表单标签绑定的方式：显式绑定、隐式绑定
2.显式绑定： 将表单标签嵌套到label标签内部。
2.隐式绑定： 将for属性的值指定为要与之绑定的表单标签的id值
<select>标签
常用属性：
[form]： 定义 select 字段所属的一个或多个表单
[name]： 定义下拉列表的名称，option中value变量提交的name值
[required]： 规定用户在提交表单前必须选择一个下拉列表中的选项。
[multiple]： 当该属性为 true 时，可选择多个选项
[disabled]： 当该属性为 true 时，会禁用下拉列表
类别：
文本级标签
作用：
创建一个下拉列表
说明：
元素中的 <option> 标签定义了列表中的可用选项。<select> 元素是一种表单控件，可用于在表单中接受用户输入
全局属性： 支持
事件属性： 支持
<optgroup>标签
常用属性：
[label]： 为选项组规定描述
[disabled]： 规定禁用该选项组
类别：
容器级标签
作用：
把相关的选项组合在一起
说明：
如果你有很多的选项组合, 你可以使用 <optgroup> 标签能够很简单的将相关选项组合在一起
全局属性： 支持
事件属性： 支持
<option>标签
常用属性：
[value]： 定义送往服务器的选项值
[label]： 定义当使用 <optgroup> 时所使用的标注
[selected]： 规定选项 （在首次显示在列表中时） 表现为选中状态
[disabled]： 规定此选项应在首次加载时被禁用
类别：
文本级标签
作用：
定义下拉列表中的一个选项 （一个条目）
说明：
该标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value 属性，此属性会指示出被送往服务器的内容，标签中的内容作为 <select> 或者 <datalist> 一个元素使用
全局属性： 支持
事件属性： 支持
注意：
1.必须与select标签配合使用，单独使用无意义
<fieldset>标签
常用属性：
[name]： 规定 fieldset 的名称
[form]： 规定 fieldset 所属的一个或多个表单
[disabled]： 规定该组中的相关表单元素应该被禁用
类别：
容器级标签
作用：
该标签将表单内的相关元素分组
说明：
它会在相关表单元素周围绘制边框
全局属性： 支持
事件属性： 支持
<legend>标签
作用：
元素为 <fieldset> 元素定义标题
说明：
为 fieldset 标签添加 1px 的 border，并在其border的 左上角 上显示legend中的 内容，
全局属性： 支持
事件属性： 支持
综合示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>HTML表单标签学习</title>
<style type="text/css">
.button {
border: none;
border-radius: 5px;
width: 50px;
height: 30px;
background: dodgerblue;
color: white;
}
form {
border: 1px solid red;
height: 600px;
padding: 10px;
}
</style>
</head>
<body>
<form id="firstForm" name="firstForm" action="http://www.baidu.com" method="post" target="_self" enctype="text/plain" autocomplete="off">
<fieldset name="field1" form="firstForm">
<legend>个人资料</legend>
<label form="firstForm" for="nameIn">姓名：</label>
<input form="firstForm" id="nameIn" type="text" name="name" placeholder="请输入姓名" maxlength="5" required="required" /><br/>
<label form="firstForm">
性别：
<input form="firstForm" name="sex" type="radio" value="0" checked="checked" />男
<input form="firstForm" name="sex" type="radio" value="1" />女
</label><br/>
<label form="firstForm" for="ageIn">年龄：</label>
<input form="firstForm" id="ageIn" type="text" name="age" max="120" min="0" maxlength="3" placeholder="请输入年龄" /><br/>
<label form="firstFrom" for="addressSel">所在地：</label>
<select form="firstForm" id="addressSel" name="address">
<option value="null">--- 请选择 ---</option>
<optgroup label="北京市">
<option value="1">海淀区</option>
<option value="2">朝阳区</option>
<option value="3">丰台区</option>
<option value="4">顺义区</option>
</optgroup>
<optgroup label="上海市">
<option value="1">黄埔区</option>
<option value="2">徐汇区</option>
<option value="3">静安区</option>
<option value="4">杨浦区</option>
</optgroup>
<optgroup label="上海市">
<option value="1">其他一</option>
<option value="2">其他二</option>
<option value="3">其他三</option>
<option value="4">其他四</option>
</optgroup>
</select><br/>
<label form="firstform" for="professionIn">职业：</label>
<input form="firstForm" id="professionIn" type="text" name="profession" max="5" placeholder="请输入职业" /><br/>
<label form="firstform" for="telIn">电话：</label>
<input form="firstForm" id="telIn" type="tel" name="tal" maxlength="11" placeholder="请输入电话" /><br/>
<label form="firstForm" for="emailIn">邮箱：</label>
<input form="firstForm" id="emailIn" type="email" name="email" placeholder="请输入邮箱" /><br/>
爱好：
<input form="firstForm" id="lobookBox" type="checkbox" name="hobby" checked="checked" />
<label form="firstForm" for="lobookBox">看书</label>
<input form="firstForm" id="sportBox" type="checkbox" name="hobby"/>
<label form="firstForm" for="sportBox">运动</label>
<input form="firstForm" id="musicBox" type="checkbox" name="hobby"/>
<label form="firstForm" for="musicBox">音乐</label>
<input form="firstForm" id="movieBox" type="checkbox" name="hobby"/>
<label form="firstForm" for="movieBox">看电影</label>
<br/>
<label form="firstForm" for="remarkArea">备注：</label>
<textarea form="firstForm" id="remarkArea" name="remark" placeholder="最多输入50个字符" maxlength="50" cols="50" rows="10"></textarea>
<hr/>
<input id="submitBtn" class="button" type="submit" value="提交" />
<input id="resetBtn" class="button" type="reset" value="重置" />
<button id="interceptBtn" class="button" type="button" formaction="https://www.csdn.net/" formmethod="post" formtarget="_self">发送</button>
</fieldset>
</form>
</body>
</html>
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
