3、HTML表单

1、HTML表单结构：                                                                                                                                  表单是搜集用户数据信息的各种表单元素的集合区域

    *表单的作用的作用                                                                                                                                  >实现网页上的数据交互                                                                                                                        >搜集客户端输入的数据信息,提交到网站服务器端进行处理(搜集录入/对比验证等)

    *常见表单的应用                                                                                                                                    >注册/登录                                                                                                                                            >搜索                                                                                                                                                    >留言/评论                                                                                                                                            >文件上传/文章编辑

    *表单的结构                                                                                                                                            >表单区域+表单控件

    *表单标签

                                                                                                                        >双标签，块状元素                                                                                                                              >用来定义网页中的交互输入的区域(表单区)                                                                                        >所有的表单控件必须包含在

元素中

    *基本属性：                                                                                                                                >action：url路径，必须属性，规定提交表单时向何处发送表单数据                                                    >method：get/post，必须属性，规定用于发送form-data的HTTP方法                                                >name：自定义名称，规定表单的名称(针对服务器端或脚本端)                                                          >name和id的区别：                                                                                                                                >id在页面中具有唯一性，name可以重复                                                                                              >name主要对应服务器端，用于对提交到服务器后的表单数据进行标识。要实现数据交互功                能，表单和表单控件都需要使用name属性                                                                                        >name的另一个功能是对应脚本(javascript)，来处理表单中的各种数据值。而id主要对应css              样式的应用。

2、表单控件的类型                                                                                                                                   >输入型：用户在控件中可以直接输入数据信息                                                                                   >选择型：用户根据提供的控件选择数据内容                                                                                       >事件型：用户点击控件发生的事件

3、通用文本输入型控件                                                                                                                           1、类型：                                                                                                                                                *文本框（单行文本框)                                                                                                                           >标签创建文本框，type属性指定其具体类型                                                                          *文本域（多行文本）                                                                                                                             >标签创建文本域                                                                                                             2、通用文本框                                                                                                                                          类型说明            标签                              type属性                                                                                普通文本           <input>                    <input type="text">                                                                        密码                <input>                 <input type="password">                                                                隐藏框                <input>                    <input type="hidden"></p> <p>       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">      创建具有电话号码规则的输入框</p> <p>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</p> <p>5、选择型控件                                                                                                                                          1、单选：                                                                                                                                                  ><input type="radio">标签创建选择框,type属性指定其具体类型                                                      2、多选：                                                                                                                                                  ><select>标签创建下拉列表区，<option>创建子级选项</p> <p>    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,通常也需要配合脚本来实现和完善其功能。</p> <p>6、应用技巧                                                                                                                                              1、使用<label>提高用户操作交互体验                                                                                                     >双标签，行间元素，默认无任何特殊样式                                                                                           >为表单控件提供辅助标记。点击<label>中的标记内容，浏览器就会自动将焦点转到和                       <label>相关的表单控件上                                                                                                                   >使用<label>将标记内容和表单控件括在一起，增加控件的可操作性                                                 >使用<label>标签的for属性将其和相关控件关联在一起，for的值为控件的id名                              2、使用<fieldset>协助表单控件或数据归类分组                                                                                       >表单控件分组标签:<fieldset>                                                                                                               >双标签，块状元素，创建一个分组区域                                                                                               >主要用于将表单内的相关控件进行分组，便于辨识或区分，默认会呈现区域边界效果                     >表单控件分组标题标签:<legend>                                                                                                         >双标签，块状元素                                                                                                                               >用来为<fieldset>分组定义一个标题，作为表单内容的说明或描述</p> <p>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新增属性</p> <p>8、示例：</p> <p><!doctype html></p> <p><html></p> <p><head></p> <p><meta charset="utf-8"></p> <p><title>无标题文档</title></p> <p></head></p> <p><body></p> <p> <form action="#" method="post" name="form-demo" autocomplete="on"></p> <p> <fieldset></p> <p> <legend>通用的的输入型控件</legend></p> <p> 普通文本框：<input type="text" value="百度一下" onClick="this.value=''" /><br /></p> <p> 密码：<input type="password" /><br /></p> <p> 文本域：<textarea placeholder="请输入你的感想：" autofocus>

HTML5新增表单控件

网址：

邮箱：

数字：

范围：

时间选择器：

类型3：

色彩拾取器：

搜索：

性别：男女

复选框的组合应用：我同意****协议

请选择你的爱好：吃饭睡觉

下拉列表：

我的世界

请选择你的爱好：

我的天使

天龙之上

陕西

咸阳

乾县

您的浏览器是：

IE

Chrome

FireFox

  

  

  

MyWorld!