Form元素总结

1、.Form元素：作用：表单主要用于收集用户的信息 凡是用于收集用户信息的控件都必须要有name属性，有些控件(例如checkbox、radio)必须 明确指明value属性，大部分控件可以指定默认的value值，也可以不指定直接获取用户输入的就可以了Form元素的属性：action、method：get&post enctype、name、accept-charset、accept、target、autocomplete、novalidate:类型 Text、password、submit、reset、image、hidden、email、url、tel、number、range(date)d

2、atetime/datetime-local/date/month/week/time、color、search、file、multiple、checkbox、radio：checked元素的属性：Type、name、value、maxlength、readonly、disabled、required、placeholder、autofocus、accesskey、tabindex、autocomplete、size的属性：for、accesskey的属性：option（optgroup可以分组）、autofocus、disabled、的属性：option的属性：name、disabled、r

3、eadonly、form、reauired、autofocus、placeholder、Cols、rowsbutton元素的属性Submit、reset、buttonname、vlue、disableautofocus、form、formmethodFormnovalidate、Fomaction、Formenctype、formtarget、的属性name、form、for、oninput表单事件：当用户对元素数据的输入时触发parseInt() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。元素用来建立一个进度条；通常与JavaScript 一同使用，来显示任务的进

4、度。progress元素的属性：max属性：规定当前进度的最大值。value属性设定进度条当前默认显示值form属性：规定进度条所属的一个或多个表单。元素是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的评定meter元素的属性：value属性设定进度条当前默认显示值max属性：规定范围的最大值，默认值为1.min属性：规定范围的最小值，默认值为0.low属性：规定被视作低的标准。high属性：规定被视作高标准。form属性：规定所属的一个或多个表单。元素的用法fieldset元素：可将表单内的相关元素分组。当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，

5、通常会有一个边框。没有必需的或唯一的属性。form/disabled属性可用。legend元素：为 fieldset 元素定义标题元素是HTML5中新增的元素，用来建立一个密钥生成器当提交表单时，私钥存储在本地，公钥发送到服务器。主要作用是提供一种用户验证身份的方法使用时注意不同浏览器支持程度不同；目前Internet Explorer 和 Safari暂不支持keygen元素元素的属性：name/form/autofocus/disabledchallenge属性:将 keygen 的值设置为在提交时询问。keytype属性：定义密钥类型，如设置为rsa（一种密码的算法），则生成 RSA 密

6、钥。了解内容，非本课程内容，有兴趣的同学课下课自己查阅相关资料：RSA是目前最有影响力的公钥加密算法，它能够抵抗到目前为止已知的绝大多数密码攻击，已被ISO推荐为公钥数据加密标准。details元素：用于描述文档或文档某个部分的细节。通常与summary元素配合使用，可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details中的内容。details元素的属性：open属性：规定在 HTML 页面上 details 是可见的。目前还不是所以浏览器都支持，但是相信以后都会支持的 FORM属性详细讲解：accept属性：指定服务器处理表单时所能接受的数据形态，一般默认即

7、可accept-charset: （仅作了解）指定表单处理数据时所能接受的字符编码target属性:指定在何处打开action属性所指定的URL目标enctype属性：规定在发送到服务器之前应该如何对表单数据进行编码。当method设定发送方式为get时，不必设置该属性；当method设定发送方式为post时该属性才有效；默认地，表单数据会编码为 application/x-www-form-urlencoded。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 + 加号，特殊符号转换为 ASCII HEX 值）。当值设为multipart/form-data时表示：不对字符编码。

8、在使用包含文件上传控件的表单时（比如当input的type值为file时），必须使用该值。text/plain:空格转换为 + 加号，但不对特殊字符编码。reset：重写 form 元素的某些属性设定。表单重写属性适用于提交按钮formaction - 重写表单的 action 属性formenctype - 重写表单的 enctype 属性formmethod - 重写表单的 method 属性formnovalidate - 重写表单的 novalidate 属性formtarget - 重写表单的 target 属性button元素用来建立一个按钮从功能上来说，与input元素建立的按钮

9、相同button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计不仅可以在表单中使用，还可以在其他块元素和内联元素中使用button元素的属性type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同name/vlue/disable属性：与input的用法相同autofocus属性：设置按钮自动获得焦点。form属性：设定按钮隶属于哪一个或多个表单formmethod属性：设定表单的提交方式，将覆盖原本的提交方式formnovalidate属性：设定表单将会覆盖原本的novalidate属性fomaction属性：指定表单数据发送对象，

10、将覆盖原来的action属性设定formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定formtarget属性：将覆盖原本的target属性设定重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮Form元素的子元素：:类型 Text、password、submit、reset、image、hidden、email、url、t

11、el、number、range(date)datetime/datetime-local/date/month/week/time、color、search、file、multiple、checkbox、radio元素的属性：Type、name、value、maxlength、readonly、disabled、required、placeholder、autofocus、accesskey、tabindex、autocompletetype属性：指定输入内容的类型，默认为text:单行文本框name属性:输入内容的识别名称，传递参数时候的参数名称value属性:默认值maxlength:输入

12、的最大字数readonly属性：只读属性，设置内容不可变更，提交时会以前发送至服务器disabled属性：设置为不可用（不可操作）required属性：设置该内容为必须填写项，否则无法提交placeholder属性：设置默认值，当文本框获得焦点时被清空，对text/url/tel/email/password/search有效autofocus属性：自动获得焦点accesskey属性：指定快捷键windows中，指定快捷键后，按Alt+“快捷键”,便会获得焦点tabindex属性：指定按Tab键时，项目间的移动顺序autocomplet属性： HTML5新增属性属性值为on/off,定义是否开

13、启浏览器自动记忆功能的类型详解默认为textpassword：密码状态输入submit:提交按钮，点击将数据发送至服务器reset:重置按钮button:普通按钮imge：图片式提交按钮hidden；隐藏字段该内容不会显示页面上一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器email:表示要输入一个电子邮箱这是HTML5新增的元素他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异url:表示要输入一个网址这是HTML5新增的他会对输入内容进行验证，在之前需要编写大段的JS代码来进行这项工作浏览器版

14、本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异tel:表示输入的内容是一个电话号码这是HTML5新增的他不会对输入内容进行验证浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异number:这是HTML5新增的可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异range(活动条)这是HTML5新增的；与number类型类似，也是表示一定范围的数值输入，但是以一个活动条的状态显示可以配合input的max/min/step/value规定的最大值/最小值/

15、步长/默认值浏览器版本比较低的话有可能不支持，不同的浏览器提示的效果可能有差异时间类这是HTML5新增的；包括datetime/datetime-local/date/month/week/time浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同color这是HTML5新增的；可以建立一个颜色的选择输入框浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同seacrch这是HTML5新增的；用于建立一个搜索框，用来供用户输入搜素的关键词浏览器版本比较低的话有可能不支持，不同的浏览器支持程度不同file用来创建一个文件选取的输入框可通过accept属性规定选取文件的类型，比如图片

16、/视频multipe属性可以设定一次允许选择多个文件checkbox/复选框用来创建一个复选框（可以多项选择）通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取radio/单选框用来创建一个单选框（可以多项选择）通过checked属性可讲某个选项设为默认的选取状态，再次单击取消选取必须将同一组单选项设置一个相同的name属性值其他子元素：的属性：for、accesskey用来为 input 元素定义标注（标记）,建立一个与之相关联的标签for属性，让标签与指定的input元素建立关联将input元素包含在label标签中可以通过accesskey建立快捷键（已经讲过内容，不

17、再演示）lable属性在option元素中可以设定比标签内容更优先的选项optgroup的分组名称select元素用来建立一个下拉菜单选项列表不仅可以在表单中使用，还可以在其他块元素和内联元素中使用select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立option元素可以用来建立一个选项，即下拉列表的一个菜单项optgroup元素用来对option元素进行组合分组size用来定义列表中显示的列表项multiple属性用来定义是否可以多选可以添加disabled属性和autofocus属性datalist元素HTML5新增元素，用来建立一个选项列表datalist元素的内容

18、不会直接显示在网页上，只是会在用户输入时作为候选项通常与input元素配合使用textarea元素用来建立多行输入文本框元素标签中的内容将一文本框默认值的形式呈现不仅可以用在表单中，也可以在其他块元素或内联元素中textarea元素的属性：name/disabled/readonly/form/reauired/autofocus/placeholder属性，这些属性的用法之前课程中已经有讲解，就不再一一演示rows属性：设置多行文本的行数（高度）cols属性：设置多行文本的每行显示的字数（宽度）补充内容，input元素的size属性button元素用来建立一个按钮从功能上来说，与input元

19、素建立的按钮相同button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计不仅可以在表单中使用，还可以在其他块元素和内联元素中使用button元素的属性type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同name/vlue/disable属性：与input的用法相同autofocus属性：设置按钮自动获得焦点。form属性：设定按钮隶属于哪一个或多个表单formmethod属性：设定表单的提交方式，将覆盖原本的提交方式formnovalidate属性：设定表单将会覆盖原本的novalidate属性fomaction属性：指定表单数

20、据发送对象，将覆盖原来的action属性设定formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定formtarget属性：将覆盖原本的target属性设定重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用button创建按钮form元素的属性小结action/method/enctype/name/accept-charset/accept/

21、target/autocomplete/novalidateaccept属性：（仅作了解）指定服务器处理表单时所能接受的数据形态，一般默认即可accept-charset: （仅作了解）指定表单处理数据时所能接受的字符编码target属性:指定在何处打开action属性所指定的URL目标enctype属性：(了解即可)规定在发送到服务器之前应该如何对表单数据进行编码。当method设定发送方式为get时，不必设置该属性；当method设定发送方式为post时该属性才有效；默认地，表单数据会编码为 application/x-www-form-urlencoded。就是说，在发送到服务器之前，所

22、有字符都会进行编码（空格转换为 + 加号，特殊符号转换为 ASCII HEX 值）。当值设为multipart/form-data时表示：不对字符编码。在使用包含文件上传控件的表单时（比如当input的type值为file时），必须使用该值。text/plain:空格转换为 + 加号，但不对特殊字符编码。表单的重写：重写 form 元素的某些属性设定。表单重写属性适用于提交按钮formaction - 重写表单的 action 属性formenctype - 重写表单的 enctype 属性formmethod - 重写表单的 method 属性formnovalidate - 重写表单的 n

23、ovalidate 属性formtarget - 重写表单的 target 属性button元素用来建立一个按钮从功能上来说，与input元素建立的按钮相同button元素是双标签，其内部可以配置图片与文字，进行更复杂的样式设计不仅可以在表单中使用，还可以在其他块元素和内联元素中使用button元素的属性type属性：可以设置三个值 submit/reset/button与input元素设置的按钮含义相同name/vlue/disable属性：与input的用法相同autofocus属性：设置按钮自动获得焦点。form属性：设定按钮隶属于哪一个或多个表单formmethod属性：设定表单的提交

24、方式，将覆盖原本的提交方式formnovalidate属性：设定表单将会覆盖原本的novalidate属性fomaction属性：指定表单数据发送对象，将覆盖原来的action属性设定formenctype属性;指定表单的数据发送类型，将覆盖原本的enctype属性设定formtarget属性：将覆盖原本的target属性设定重要事项：如果在表单中使用 button 元素，不同的浏览器会提交不同的值。Internet Explorer 将提交 button元素开始标签与结束标签之间的文本，而其他浏览器将提交 value 属性的内容。最好就是在表单中使用 input 元素来创建按钮。其他地方使用

25、button创建按钮output元素：数据的输出output元素是HTML5新增的元素，用来设置不同数据的输出output元素的输出内容是由代码控制的这节课的演示需要用到简单的javascript知识,暂时不理解没关系，主要是了解output元素的使用方法，后边的课程中我们安排了专门的章节讲解javascriptoutput元素的属性：name属性：定义对象的唯一名称。（表单提交时使用）form属性：定义所属的一个或多个表单。for属性：定义输出域相关的一个或多个元素。案例演示需要用到两个没有学过的知识，表单事件oninput表单事件：当用户对元素数据的输入时触发parseInt() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。progress元素是HTML5中新增的元素，用来建立一个进度条通常与JavaScript 一同使用，来显示任务的进度。使用时注意浏览器的支持情况：Internet Explorer 9 以及更早的版本不支持progress元素的属性：max属性：规定当前进度的最大值。value属性设定进度条当前默认显示值form属性：规定进度条所属的一个或多个表单。meter元素是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的