HTML笔记三，表单相关元素和属性

表单元素

<form>:用于生成输入表单，该元素不可视化

　　action:指定当前表单提交的地址，必填

　　method:指定提交表单时发送何种类型的请求，post或者get，一般post，必填；其中GET方式可以在地址栏种看到传送的数据，POST方法看不到较安全

　　enctype:指定对表单内容进行编码的字符集

　　name:名称

　　target:以何种方式打开目标url，_self,_blank,_top,_parent四个中的一个

 

<input>:

　　type=

　　　　text:单行文本框

　　　　password:密码输入框

　　　　hidden:隐藏域

　　　　radio:单选框

　　　　checkbox:复选框

　　　　image:图像域

　　　　file:文件上传域

　　　　submit,reset,button：———

　　checked:设置单选框复选框的选中状态

　　disabled:表示元素被禁用

　　maxlength:指定文本框中所允许输入的最大字符数

　　readonly:表示不允许用户修改

　　size:指定元素的宽度

　　src:指定图像域所显示图像的URL

 

<label>:定义标签

　　for:表示所相关联表单控件的id值

 

<button>:定义一个按钮

　　disable:指定是否禁用按钮

　　name:指定唯一名称，一般与id值相同

　　type:指定按钮类型，button,reset,submit其中之一

　　value:指定按钮的初始值

 

<select>:创建列表框和下拉菜单，必须和<option>结合使用

　　multiple:允许多选

　　size:设置该列表框的高度

<option>表示一个列表项或者菜单项

<optgroup>用于定义列表项或者菜单项，只能包含<option>

 

<textarea>:设置多行文本框

　　cols:指定文本域的宽度，必填

　　rows:指定文本框的高度，必填

　　disabled:禁用此文本域

　　readonly:设置为只读

 

HTML5新增表单中的属性与元素

1、为表单控件添加了form属性，form=“一个form表单的id”，则它也属于这个表单的，当提交表单时，此控件也会提交相关参数

2、formaction:对按钮设置不同的formaction则会提交到不同的对应逻辑

3、formXXXX属性：formenctype,formmethod,formtarget通过这些属性均可以让按钮动态的改变表单的相关属性

4、autofocus属性：自动获得焦点

5、placeholder属性：文本框中的灰色字体提示信息

6、list与datalist属性：文本框中类似历史记录的东西

7、autocomplete属性：为on则会显示datalist下拉菜单，off则不会显示datalist下拉菜单

8、<output>元素：用于显示输出，比如计算结果或者脚本的输出，必须属于某个表单；使用for属性来表示显示那个元素的值(本次未显示出output数据)

9、type=“file”,允许进行多个文件的上传，accept:控制允许上传文件的类型;multiple:设置是否允许选择多个文件。

 

<input>中的type=：

　　color:颜色选择器

　　date:日期选择器

　　time:时间选择器

　　datetime:UTC日期、时间选择器

　　datetime-local:本地日期、时间选择器

　　week:供用户选择第几周的文本框

　　month:月份选择器

　　email:Email输入框，需要符合emaile的格式

　　tel:只能输入电话号码的输入框，输入任意字符串

　　url:URL输入框

　　number:只能输入数字的数字输入框

　　range:拖动条，min设置最小值，max设置最大值，step设置步长

　　search:专门用于搜索的文本框，与type=“text”无太大区别

 

使用FileReader获取文件内容

readAsText(file,encoding):以文本方式来读取文件，encoding为编码方式，默认为utf-8。

readAsBinaryString(file):以二进制方式来读取文件，这样就可以通过Ajax方式来上传至服务器。

readAsDataURL(file):以DataURL方式来读取文件

abort():停止读取

onloadstart:开始读取数据时，触发该事件指定的函数

onprogress:正在读取时，触发该事件指定的函数

onload:成功读取数据后，触发该事件的函数

onloadend:读取数据完成后，无论成功与失败，都触发该事件指定的函数

onerror:读取失败时，触发该事件指定的函数

<progress>可以用来显示文件的读取进度

 

HTML5新增的客户端校验

require:指定该控件必须填写

pattern:此控件的值必须符合指定的正则表达式

min,max,step

调用checkValidity方法来进行校验

使用setCustomValidity来自定义错误提示