1.概念 表单是搜集用户信息的各种表单元素的集合区域; |
2.表单的作用 a.实现网页上的数据交互; b.搜集客户端输入的数据信息,提交到网站服务器端进行处理; |
3.常见的应用 a.注册/登录 b.搜素 c.留言/评论 d.文件上传/文章编辑 |
4.表单标签<form> a.双标签,块状元素 b.用来定义网页中的交互输入的区域(表单区) c.所有的表单控件中必须包含再<form>元素中; |
5.<form>基本属性 a.action url路径 ;必须属性!规定当提交表单时向何处发送表单数据 b.method get/post; 必须属性;规定用于发送form-data的http方法; c.name 自定义名称;规定表单的名称(针对服务器端或脚本处理) |
6.name和id的区别 a.id在页面中具有唯一性,name可以重复 b.name主要对应服务器端,用于对提交到服务端的表单数据进行标识,要实现数据交互功能,表单和表单控件都需要使用name属性; c.name的另一个功能是对应脚本(JavaScript),来处理表单中的各种数据值.而id主要对应css样式的应用; |
7.表单元素的类型 1.输入型:(用户在控件中可以直接输入数据信息) a.文本框(单行文本); <input>通过type指定类型 <input type="text" /> 普通文本框 <input type="password" />密码框 <input type="hidden" /> 隐藏域 隐藏域是用户看不见的表单控件,一般用来传递不需要显示在客户端的数据; b.文本域(多行文本); <textarea></textarea> 2.选择性:(用户根据提供的控件选择数据内容) a.下拉框;(select标签创建下拉列表,option标签常见列表中的子级选项) 1.行间元素 2.给option标签添加select属性,可以设定在首次显示的下拉列表是为默认的选中状态; 3.给select标签添加multiple 属性可以选择多个选项;(h5新增) 4.select的size属性可以规定下拉列表中的可选项的数目;(h5新增) 5.使用optgroup 给列表中的选项进行分组,形成类型树形的分级选择控件;(h5新增) optgroup标签的label属性可以用于定义选项组的文本描述; 请选择你的所在省份: <select id="" name=""> <option value="">请选择省份</option> <option value="1">湖南</option> <option value="2">湖北</option> <option value="3">上海市</option> </select> b.单选按钮;(input标签创建选择框,type指定其具体类型) 1.单选按钮具有互斥性,必须成组出现,没有单个应用的场景; 2.name 属性:实现按钮的编组,当若干个按钮name相同的时候,就形成了一个按钮组; 3.checked:设定按钮的已选中的状态; <input type="radio" name="sex" checked="true" value="man" />男 <input type="radio" name="sex" value="female" />女 c.复选框;(input标签创建选择框,type指定其具体类型) 1.复选框可以单个使用,也可以成组使用; 2.单个使用时,用来接收用户回答“是”,“否”。 3.成组使用,提供用户在一组可选项中农做多项选择; 4.name属性:实现按钮的编组,当若干个按钮的name属性相同时,就形成了按钮组; 5.checked属性:设定按钮的已选中状态; 爱好:<input type="checkbox" name="hobby" value="volleyball" />打排球 <input type="checkbox" name="hobby" value="soccer"/>踢足球 <input type="checkbox" name="hobby" value="basketball"/>打篮球 是否同意相关协议:<input type="checkbox" name="ischecked" value="0"/> 3.事件型:按钮;(用户点击控件发生的事件) 可以点击的按钮(一般通过js/jquery启动脚本) <input type="button" value="普通按钮"/> 发送数据到服务器 <input type="submit" value="提交按钮" /> 点击按钮会重置表单中的所有数据(恢复成初始默认) <input type="reset" value="重置按钮" /> 自定义图像来呈现提交按钮 <input type="image" src="" alt="" value="图像按钮" /> 上传文件 multiple 多文件上传; <input type="file" value="上传按钮" /> <button></button> a.在 <button>元素内部,可以放置内容,比如文本,图像,这个是和input元素创建按钮之间的区别; 它提供了更强大的功能和更丰富的内容; b.使用button按钮时,需要规定type属性来定义其功能,在实际应用中并不多见; type:button 单纯按钮,无功能; reset 重置 submit 提交 |
8.HTML5中新增的输入控件 a.html增加了新的表单输入input的类型。其目的是赋予input更具体的“语义”, 同时提供更好的输入控制和浏览器原生验证(不需要附加脚本验证); b.各个浏览器对这些input控件支持度不一样; c.不管浏览器是否支持都可以使用它们,因为就算不支持,也可以显示为常规的普通文本框; 创建包含url地址的输入框,提交时验证; <input type="url" /> 创建包含email地址的输入框,提交时验证; <input type="email" /> 创建仅允许包含数值的输入框,可具体设定; <input type="number" /> 创建滑动条,呈现数值范围区域,可具体设定; <input type="range" /> 创建时间选择器,type类型有date/month/week/time等 <input type="date" /> 创建色彩拾取器,用于点击选颜色; <input type="color" /> 创建有清除内容功能的输入框; <input type="search" /> 创建包含电话号码规则的输入框; <input type="tel" /> |
9.5.HTML5中新增的选择型控件; a.datalist控件 1.用来预先定义一个输入框的潜在选项,为输入框提供一个可选择的提示列表; 2.用户输入数据时,可以直接选择提示列表,免去输入的麻烦; 常用的浏览器 3.datalist目前的缺陷 a.无法使用css对其进行UI设计和样式设计 b.部分浏览器不支持或支持的不好,且不同的浏览器对datalist中的属性和值判断不同; c.即是使用datalist,通常也需要配合脚本来实现和完善其功能; d.在实际开发中,还是使用传统的方法; <input list="browsers"> <datalist id="browsers"> <option value="chrom">chrom</option> <option value="firefox">firefox</option> <option value="IE">IE</option> <option value="Opera">Opera</option> <datalist> |
HTML表单/表单控件常用属性总结 1.value属性的用法 a.定义各种表单控件的值; b.不同控件类型,value的用法也不同; value:属性 a.输入框控件:定义初始化值 b.选择性控件:定义相关联的值(必须设置) c.事件类控件:定义按钮呈现的文本; 2.readonly:只读属性 a.规定输入字段为只读,不能修改; b.应用对象主要针对输入框类型的控件; 3.disabled 禁用属性 a.规定字段为禁用,无法使用,无法点击的; b.应用对象包括所有的表单控件,除了<input type="hidden"> c.提交表单数据时,被禁用的控件不会被提交; 4.placeholder 占位符属性 a.规定可描述输入字段预期值的简短提示信息,来提示用户输入; b.输入框显示placeholder的文本的内容,在用户输入时自动消失,不会形成干扰; c.应用对象针对输入型表单控件,如<input>的text类型或<textarea> d.placeholder 内容不是value的值,也不会被表单提交; e.HTML5新增属性,IE9及以前的浏览器不支持; 5.required 必填属性 a.规定必须在提交表单之前填写输入字段; b.应用对象适用于input类型:text,serach,url,tel,email,password,date, picker,number,checkbox,radio,file; c.应用对象适用于<textarea>文本域; d.html5新增属性,safari,IE9及以前的浏览器不支持; 6.autofocus 自动获得焦点属性 a.规定当前页面加载时input元素应该自动获得焦点; b.应用对象针对大多数表单控件,都可以用; c.html5新增属性,IE9及以前的浏览器不支持; 7.autocomplete自动完成属性 a.规定表单是否应该给启动完成功能,即是否自动让浏览器自动记录之前输入的值; b.值为on,表示开启功能;值为off表示关闭功能; c.可以应用整体的form对象,也可以用于输入型的input控件; d.通常autocomplete="on"适用于表单(默认),"off"适用于特定的输入字段; f.HTML5新增属性; |
表单应用技巧 1.使用<label>提高用户操作交互体验 a.双标签,行间元素,默认无任何特殊样式; b.为表单控件提供辅助标记,点击label中的标记内容, 浏览器会自动将焦点转到和label标签相关的表单控件上; c.使用label标签将标记内容和表单控件括在一起,增加控件的可操作性; <label>标记内容+表单控件</label> d.使用<label>标签的for属性将其他和相关控件关联在一起,for 属性的值为控件的id名;<label for="对应元素的id名">标记内容</label> 2.使用<fieldset>标签协助表单控件或数据归类分组; a.表单控件分组标签<fieldset> 1.双标签,块状元素,创建一个分组区域; 2.主要用于将表单内的相关控件进行分组,便于识别和区分,默认呈现区域边框的效果; b.表单控件分组标题标签<legend> 1.双标签,块状元素; 2.用来为<fieldset>分组定义一个标题,作为表单内容的说明或描述; |
css:表单样式 a.表单样式默认存在的问题和缺陷; 1.在不同的浏览器或操作系统中,表单呈现的效果会有差异; 2.这些差异主要表现在选择类的表单元素上(单选/多选/下拉列表) b.编写表单样式的基本原则 1.着重于整体的排版整体美观,针对表单元素的样式尽可能简单; 2.针对具有表现有差异的表单元素(单选/多选/下拉列表),尽可能采用默认样式效果,不要太大改动; c.表单样式的应用技巧 1.针对整个表单区域的内容,结合布局类标签进行排版; 2.将单个表单元素,都看成盒子模型容器来进行样式的美化; 3.针对控件的样式美化,重点放到输入框类控件和按钮类控件; |