HTML学习笔记（五）_HTML5表单相关元素和属性

1. HTML表单元素：        <form../>元素用于生成输入表单，该元素不会生成可视化部分，在HTML5之前，其他表单控件，如单行文本框、多行文本域、单选按钮、复选框等必须放在form元素内部。可指定如下属性：
   (1).action:指定当前单击表单内的”确认“按钮时，该表单被提交到哪个地址，可以是绝对地址，也可以是相对地址。该属性必填。

   (2).method:指定提交表单是发送何种类型的请求，值可以是get或者post，通常建议用post，默认为get。
        get请求和post请求的区别：
        get方式的请求：直接在浏览器地址栏中输入访问地址所发送的请求，或提交表单发送请求时，该表单对应的form元素没有设置method属性，或设置为get，这几种请求都是get方式的请求，get方式的请求会将请求参数的名和值转换成字符串，并附加在原URL之后，因此可以在地址栏中看到请求参数名和值，且get请求传送的数据量较小，一般不能大于2kb。
       post方式的请求：这种方式通常使用提交表单的方式来发送，且需要设置form元素的mehtod属性为post，post方式传送的数据量较大，通常认为post请求参数的大小不受限制，但往往取决于服务器的限制，post请求传输的数据量总比get传输的数据量大，而且post方式的发送的请求参数以及相应的值放在html header中传输，用户不能再地址栏中看到请求参数名和值，安全性相对较高。
   (3).enctype:指定表单内容进行编码所使用的字符集。
   (4).name:指定表单的唯一名臣，建议该属性值与id属性值保持一致。
   (5).target:指定以哪种方式打开目标URL，与超链接的target完全以弘扬，可以是_blank,_parent,_self,_top.
    当在form元素里边定义一个或多个表单控件时，一旦提交该表单，该表单里的表单控件将会转换成请求参数，关于表单控件转换为请求参数的规则如下：
            每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数。
            如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。
            表单控件的name属性指定请求参数名，value指定请求参数值。
            如果某个表单控件设置了disabled或disabled=“disabled”属性，则该表单控件不会产生请求参数。
     大部分表单控件，包括input元素所生成的绝大部分表单控件（除了指定type=“hidden”），如button生成的按钮，select生成的列表框和下拉菜单，textarea生成的多行文本域，他们都可以获得鼠标焦点，相应鼠标事件，因为他们都可以指定onfocus、onblur属性，分别用于设置得到焦点，失去焦点的事件响应。而且这些表单控件可指定tabIndex属性，例如a控件设置tabIndex为1，b控件设置为2，则在a控件拥有输入焦点的情况下，按tab键，焦点将会转移到b控件上。


2.Input元素：
     (1).单行文本框，指定input元素的type属性为text即可。
     (2).密码输入框，指定input元素的type属性为password即可。
     (3).隐藏框，指定input元素的type属性为hidden即可。不能接受用户输入，用于提交额外的请求参数，请求参数的值为隐藏域的value值，因此定义隐藏域的同时应指定value属性值。
     (4).单选框，指定input元素的type属性为radio即可。不能接受用户输入，所以定义是同时也会指定value值，用于设置它们所对应的请求参数值。浏览器吧具有相name属性的单选框当成一组，多个具有相同name属性的单选框只能转中其中一个，不同name属性的单选框之间互不干扰。
     (5).复选框，指定input元素的type属性为checkbox即可。
     (6).图像域，指定input元素的type属性为image即可。
     (7).文件上传域，指定input元素的type属性为file即可。会生成一个单行文本框和一个“浏览”按钮。
    (8).提交，重设，无动作按钮：分别指定input元素的type属性为submit、reset、button即可。
    input元素还可以指定如下属性：
    (1).checked:设置单选框、复选框初始转台是否处于选中状态，该属性值只能是checked，表示初始即选中，只有当type是radio和checkbox时才可以指定该属性值。
    (2).disabled:设置首次加载时金庸此元素，该属性值只能是disabled，表示被金庸，则该元素无法获得输入焦点，无法选中，无法在其中输入文本，无法响应焦点事件，当type=“hidden”是不能指定该属性。
   (3).maxlength:允许输入的最大字符数。
   (4).readonly:不允许用户输入，只能使用js脚本修改。
   (5).size:指定该元素的宽度，当type=“hidden”时不能指定该属性。
   (6).src:指定图片域所显示图片的URL，只有当type=“image”时才可以指定该属性。


3.使用label定义标签：
   label元素不需要生成请求参数，因此不要指定value属性值。此标签可以指定for属性，指定该标签与哪个表单控件关联。此元素除了用于输出普通文本之外，还有一个额外作用：当用户单击label元素所生成的标签时，该标签关联的表单控件就会获得焦点。
   让标签和表单控件关联的两种方式：
   (1).隐式使用for属性：指定label属性的for属性值为所关联表单控件的id属性值。
   (2).显式关联：将普通文本、表单控件一起放在label元素内部使用。
        （尽量不要用显式关联，有的IE浏览器不支持）


4.使用button定义按钮：
   button元素和<inout type="button"/>的区别：button元素提供了更为强大的功能和更丰富的内容。<button>与</button>标签之间的所有内容都是该按钮的内容，其中包括普通文本、文本格式化标签、图像等内容。
   button元素可以指定如下属性：
   (1).disabled:指定是否禁用此按钮，该属性值只能是disabled，或者省略属性值。
   (2).name:指定该按钮的唯一名称。该属性值应该与id属性值保持一致。
   (3).type:指定该按钮属于哪种类型。button，reset，submit。
   (4).value:指定按钮的初始值。


5.列表框和下拉菜单：
   select元素用于创建列表框或下拉菜单，该元素必须和option元素结合使用，每个option元素代表一个列表项或菜单项。不能指定value值，参数值由option来指定，可指定以下属性：
   (1).disabled:禁用列表框和下拉菜单，属性值只能是disabled或省略值。
   (2).multiple:是否允许多选，属性值只能是multiple，一点设置允许多选，select元素会自动生成列表框。
   (3).size:同时显示多少个列表项，一旦指定该属性，select元素就会自动生成列表框。
   （一个select元素是生成下拉框还是列表框，完全是由指定了size或multiple属性来决定的，只要指定了这两个属性之一，浏览器就会生成列表框，否则就是下拉框）。
   select元素里，只能包含如下两种子元素：
   (1).<option>:只能包含文本内容。
   (2).<optgroup>:用户定义组，只能包含option子元素，处于optgroup里的option就属于该组。
   option可以指定如下属性：
   (1):disabled:禁用该选项。值只能是disabled。
   (2).selected:初始状态是否选中。值只能是selected。
   (3).value:指定对应的请求参数值。
   optgroup可以指定如下属性：
   (1).label:指定该选项组的标签，必填。
   (2).disabled:禁用该选项组里的所有选项，属性值只能是disabled。


6.使用textarea定义文本域：
   该元素可指定如下几个属性：
   (1).cols:指定文本域的宽度，必填。
   (2).ros:指定文本域的高度，必填。
   (3).disabled:指定禁用该文本框。属性值只能为disabled。
   (4).redonly:指定该文本域只读。
   此元素不能指定value属性，<textarea>和</textarea>标签之间的内容作为textarea对应请求参数的参数值。