HTML 5_CSS 3_JavaScript讲义（二）-HTML5表单相关元素和属性

（1）.HTML原有的表单及表单控件

1.表单元素

action:表单提交到的地址
method:指定提交表单时发送何种类型的请求，如get（默认），post
enctype:对表单内容进行编码使用的字符集

• application/x-www-form-urlencoded:默认编码方式
• multipart/form-data:以二进制流的方式处理表单数据,如表单上传文件
• text/plain:当表单的action属性值为mailto:URL的形式时使用这种编码方式比较简单，使用于通过表单发送数据

name:指定表单唯一的名称,建议和id值一致
target:指定使用何种方式打开目标URL

---

2.使用input元素

单行文本框type="text"
密码输入框type="password"
隐藏域type="hidden"
单选框type="radio"
复选框type="checkbox"
图像域type="image"
文件上传域type="file"
提交，重置，无动作按钮：type="submit","reset","button"
属性：
-checked
-disabled
-maxlength
-readonly
-size
-src:只有图像域可使用

    单行文本框：

    不能编辑的文本框：

    密码框：

    隐藏域：

    第一组单选框：

    
    
    

    第二组单选框：

    
    

    两个复选框：

    
    

    文件上传域：

    图像域：

    下面是四个按钮：

    
    
    
    

表单控件效果

---

3.使用lable定义标签

    单行文本框：
    

    密码框：
    

    

使用label生成标签

---

4.使用button定义按钮

属性：

• disabled
• name
• type
• value

提交



使用button生成的按钮

---

5.列表框和下拉菜单

属性：

• disabled
• multiple
• size

定义列表框项或菜单项
属性：

• disabled
• selected
• value

定义列表项或菜单项组

    下面是简单下拉菜单：

    

Java语言 C语言 Ruby语言


下面是允许多选的列表框：
疯狂Java讲义 疯狂Android讲义 轻量级Java EE企业应用实战
下面是允许多选的列表框：
疯狂Java讲义 疯狂Android讲义 轻量级Java EE企业应用实战 Struts 2.1权威指南 RoR敏捷开发最佳实践
提交


下拉菜单和列表框

---

6.textarea定义文本域

属性：

• cols:宽度
• rows:高度
• disabled
  -readonly

    简单多行文本域：

    

    只读的多行文本域：

    疯狂Java讲义
轻量级Java EE企业应用实战
    

    提交

多行文本域

---

（2）.HTML5新增的属性和元素

1.HTML5为表单空间新增的属性

form属性:

    物品名：
    

物品描述：

formaction属性:动态地让表单提交到不同的URL

    用户名：

    密码：

    
    

formXXX属性:
formenctype formmethod formtarget

    用户名：

    密码：

    
    

autofocus属性：自动获得焦点
placeholder属性:单行文本框和多行文本域的提示信息

    用户名：

    密码：

    
    

使用placeholder指定的提示信息

list属性:

    请输入图书：

    

image.png

autocomplete属性:on-文本框下方显示下拉菜单 off-文本框下方不会显示下拉菜单

2.功能丰富的input元素

type="color"的文本框:

type="date"的文本框:

type="time"的文本框:

type="datetime"的文本框:

type="datetime-local"的文本框:

type="month"的文本框:

type="time"的文本框:

type="week"的文本框:

type="email"的文本框:

type="tel"的文本框:

type="url"的文本框:

type="number"的文本框:

type="range"的文本框:

type="search"的文本框:

3.HTML5新增的表单控件

for

---

（3）.HTML5增强的文件上传域

1.FileList对象和File对象

HTML5为type="file"的元素增加了两个属性

• accept: 控制允许上传的文件类型
• multiple: 设置允许选择多个文件

浏览图片：

2.使用FileReader读取文件内容

FileReader的方法

• readAsText(file,encoding):以文本方式读取文件内容
• readAsBinaryString(file)：读取二进制文件
• readAsDataURL(file):也可以读取二进制文件，但它返回的是该二进制文件编码成DataURL格式的字符串
• abort() 停止读取

浏览文件：

实时监控文件上传的进度

浏览文件：

上传进度：

---

（4）.HTML5新增的客户端校验

1.使用校验属性执行校验

required
pattern
min,max,step : 只对数值类型和日期类型的有效

    图书名：

    图书ISBN：

    图书价格：

    

---

2.调用checkValidity方法进行校验

    生日：

    邮件地址：

    

---

3.自定义错误提示

通过setCustomValidity()方法来定制错误提示

    图书名：

    图书ISBN：

    图书价格：