1、HTML表单结构： 表单是搜集用户数据信息的各种表单元素的集合区域
*表单的作用的作用 >实现网页上的数据交互 >搜集客户端输入的数据信息,提交到网站服务器端进行处理(搜集录入/对比验证等)
*常见表单的应用 >注册/登录 >搜索 >留言/评论 >文件上传/文章编辑
*表单的结构 >表单区域+表单控件
*表单标签<form></form> >双标签，块状元素 >用来定义网页中的交互输入的区域(表单区) >所有的表单控件必须包含在<form>元素中
*<form>基本属性： >action：url路径，必须属性，规定提交表单时向何处发送表单数据 >method：get/post，必须属性，规定用于发送form-data的HTTP方法 >name：自定义名称，规定表单的名称(针对服务器端或脚本端) >name和id的区别： >id在页面中具有唯一性，name可以重复 >name主要对应服务器端，用于对提交到服务器后的表单数据进行标识。要实现数据交互功 能，表单和表单控件都需要使用name属性 >name的另一个功能是对应脚本(javascript)，来处理表单中的各种数据值。而id主要对应css 样式的应用。
2、表单控件的类型 >输入型：用户在控件中可以直接输入数据信息 >选择型：用户根据提供的控件选择数据内容 >事件型：用户点击控件发生的事件
3、通用文本输入型控件 1、类型： *文本框（单行文本框) ><input>标签创建文本框，type属性指定其具体类型 *文本域（多行文本） ><textarea>标签创建文本域 2、通用文本框 类型说明 标签 type属性 普通文本 <input> <input type="text"> 密码 <input> <input type="password"> 隐藏框 <input> <input type="hidden">
PS:隐藏是用户看不到的表单控件，一般用来传递不需要显示在客户端的数据。 3、<input>标签及常用属性 >value：定义表单默认值，如文本字段的默认文本内容，按钮上的文字等。 4、<textarea>标签 *没有value属性，标签形成的内容中放置的内容实质上就是value的值 *创建的文本域有默认样式，可以通过CSS来控制和修改 5、HTML5新增输入型控件 输入类型 type设定 补充说明 网址 <input type="url"> 包含创建url地址的输入框，提交时验证 邮箱 <input type="email"> 创建包含email地址的输入框 数字 <input type="number"> 创建仅允许数值的的输入框 数字范围 <input type="range"> 创建滑动条，呈现数值范围，可具体设定 时间选择器 <input type="date"> 创建时间选择器，type类型有:date,month,week,time等。 色彩拾取器 <input type="color"> 创建色彩拾取器，用于可点选颜色 搜索 <input type="search"> 创建有清除内容(X)功能的输入框 电话 <input type="tel"> 创建具有电话号码规则的输入框
4、事件型按钮 1、按钮分类： >普通按钮<input type="button">:定义可点击按钮(多数情况下启动JS脚本) >提交按钮<input type="submit">:点击按钮会把表单所有数据发送到服务器 >重置按钮<input type="reset">:点击按钮会重置表单中的所有数据(恢复成初始默认) >图像按钮<input type="image" src="路径" alt="替代文本">:用自定义图像来呈现提交按钮 >上传按钮<input type="file">:点击按钮选择本机文件,用于文件上传/提交 2、按钮的应用 >每个表单都应该有一个提交按钮来实现表单数据的发布 >按钮上的文本用value属性来定义 3、按钮控件：<button></button> ><button>控件定义一个按钮，双标签 >在<button>元素内部,可以放置内容,比如文本或图像,这是与<input>元素创建的按钮不同之处, 它提供了更强大的功能和丰富的内容。 >使用<button>按钮时,需要规定type属性来定义其功能,实际应用中不多见 type的值有：reset、submit、button
5、选择型控件 1、单选： ><input type="radio">标签创建选择框,type属性指定其具体类型 2、多选： ><select>标签创建下拉列表区，<option>创建子级选项
3、单选按钮组 >name属性:实现按钮的编组,name属性值相同的单选框不能同时选中 >checked属性设定按钮的已选中状态 4、复选框(组)： ><input type="checkbox"> >单个使用时,用来接收用户回答是或否 >成组使用时，提供给用户在一组可选项中做多项选择 >name属性：实现按钮的编组 >checked：用来设定按钮的已选中状态 5、下拉列表的应用技巧 >给<option>添加selected属性,可以设定在首次显示下拉列表时默认的选中状态 >给<select>添加multiple属性,可选择多个选项 ><select>的size属性可以规定下拉列表中可见选项的数目 >使用<optgroup>给列表中的选项进行分组，类似树形的分级选择控件 ><optgroup>标签的label属性用于定义选项组的文本描述 6、datalist控件： >用来定义一个输入框的潜在选项，为输入框提供一个可选择的提示列表 >用户输入数据时,可以直接选择提示列表,免去输入的麻烦 >列表值：<option> >datalist和input的关系 >datalist作为输入提示,实际应用中需要和input输入框搭配使用 >使用input(输入框)的list属性来引用datalist的id值，例如： <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox> <option value="Chrome"> </datalist> >datalist目前的缺陷和不足 >无法使用css对其进行UI设计和样式定义 >部分浏览器不支持或支持度不好,且不同浏览器对datalist中的属性或值判断不同 >即便使用datalist,通常也需要配合脚本来实现和完善其功能。
6、应用技巧 1、使用<label>提高用户操作交互体验 >双标签，行间元素，默认无任何特殊样式 >为表单控件提供辅助标记。点击<label>中的标记内容，浏览器就会自动将焦点转到和 <label>相关的表单控件上 >使用<label>将标记内容和表单控件括在一起，增加控件的可操作性 >使用<label>标签的for属性将其和相关控件关联在一起，for的值为控件的id名 2、使用<fieldset>协助表单控件或数据归类分组 >表单控件分组标签:<fieldset> >双标签，块状元素，创建一个分组区域 >主要用于将表单内的相关控件进行分组，便于辨识或区分，默认会呈现区域边界效果 >表单控件分组标题标签:<legend> >双标签，块状元素 >用来为<fieldset>分组定义一个标题，作为表单内容的说明或描述
7、表单控件常用属性总结 1、value >定义各种表单控件的值 >不同的控件类型，value的用法也不同 >对于输入框控件:定义初始值 >对于选择类控件:定义相关联的值 >对于事件类控件:定义按钮呈现的文本 2、readonly >只读属性 >规定规定输入字段为"只读"，不能修改 >应用对象主要针对输入框类型的控件 3、disabled >禁用属性，规定输入字段为"禁用"，无法使用，无法点击 >应用对象包括所有的表单控件，除了<input type="hidden"> >提交表单数据时，被禁用的控件不会被提交 4、placeholder >规定可描述输入字段预期值的简短提示信息，来提示用户输入 >输入框显示placeholder的文本内容，在用户输入时自动消失，不会形成干扰 >应用对象针对输入型表单控件，如<input>的text类型或<textarea> >placeholder内容不是value的值，也不会被表单提交>html5新增属性，IE9及以前版本不支持 5、required >规定必需在提交表单之前填写输入字段 >应用对象适用于下面的input类型:text,search,url,tel,email,password, date,pickers,number, checkbox, radio,file >应用对象适用于textarea文本域 >html5新增属性，Safari，IE9及以前版本浏览器不支持 6、autofocus >规定当页面加载时，<input>元素应该自动获得焦点 >应用对象针对大多数表单控件，都可以应用 >html5新增属性，IE9及以前版本不支持 7、autocomplete >规定表单是否应该启用自动完成功能，即是否让浏览器自动记录之前输入的值 >值为on，表示开启功能，值为off，表示关闭功能 >可应用于整体的<form>对象，也可应用于输入型<input>控件>通常，autocomplete="on"适 用于表单(默认),"off"适用于特定的输入字段 >html5新增属性
8、示例：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form action="#" method="post" name="form-demo" autocomplete="on">
<fieldset>
<legend>通用的的输入型控件</legend>
普通文本框：<input type="text" value="百度一下" onClick="this.value=''" /><br />
密码：<input type="password" /><br />
文本域：<textarea placeholder="请输入你的感想：" autofocus></textarea>
</fieldset>
<fieldset>
<h3>HTML5新增表单控件</h3>
<p>网址：<input type="url"></p>
邮箱：<input type="email"><br />
数字：<input type="number" min="0" max="5"><br />
范围：<input type="range" min="0" max="10" step="2"><br />
时间选择器：<input type="date"><br />
类型3：<input type="week"><br />
色彩拾取器：<input type="color" value="#f00"><br />
搜索：<input type="search"><br />
</fieldset>
<fieldset>
性别：<label><input type="radio" value="man" name="sex" checked>男</label><label><input type="radio" value="woman" name="sex">女</label><br />
复选框的组合应用：<input type="checkbox">我同意****协议<br />
请选择你的爱好：<input type="checkbox" name="interest" value="eat">吃饭<input type="checkbox" name="interest" value="sleep">睡觉<br />
</fieldset>
<fieldset>
<p>下拉列表：
<select multiple size="3">
<option>我的世界</option>
<option>请选择你的爱好：</option>
<option>我的天使</option>
<option>天龙之上</option>
</select>
</p>
<p>
<select>
<optgroup><option value="陕西">陕西</option></optgroup>
<optgroup><option>咸阳</option></optgroup>
<optgroup><option>乾县</option></optgroup>
</select>
</p>
<p>
您的浏览器是：<input type="text" list="browsers">
<datalist id="browsers">
<option value="IE" label="top1">IE</option>
<option value="Chrome" label="top2">Chrome</option>
<option value="Firefox">FireFox</option>
</datalist>
</p>
<input type="submit">
<input type="button" value="普通按钮">
<input type="reset"><br />
<input type="image" src="timg.jpg" alt="图片" width="50" height="50">
<input type="file" multiple>
</fieldset>
<button type="submit">MyWorld!</button>
</form>
</body>
</html>
