HTML 表单的简单介绍

HTML 表单用于搜集不同类型的用户输入

一、

元素

定义 HTML 表单

/* form elements */

表单属性

• action：提交表单时，向何处发送数据，取值有

（1）绝对或相对url，一般指向服务器的一个处理程序

（2）使用mailto协议的url地址，表单会以电子邮件形式发送，比较少见

（3）空值，提交给当前页面

• method：提交数据的处理方式，常用是GET，POST

（1）GET提交：浏览器会将表单数据以?name=value&name=value格式附在action指定的url后。由于url长度限制，通常get传送的数据量在1kb以下

（2）POST提交：浏览器将数据作为http请求的一部分发送给服务器，数据量不受限制

• target：规定在何处显示返回结果，取值有_blank（在新窗口打开）， _self（当前框架下打开，默认）， _parent（父级框架中打开）， _top（顶级窗口中打开）

• title：鼠标停留时浮现文本

• enctype：对表单数据进行编码，默认为“application/x-www-form-urlencoded”

• name：name属性是与服务器通信时使用的名称，而id属性是浏览器使用的名称

二、表单内部元素

1. 单行输入

   主要属性

• size：文本框宽度，以字符为单位，缺省值是20
• value：文本框的值
• maxlength：用户输入的最大字符长度
• readonly：只读，用户将不可改变文本框的值
• disabled：禁用，将不能获得文本框焦点，也不能改变值，且提交时此内容不会发送

2. 密码输入

3. 单选按钮

通过使用相同name来确定一组单选按钮，添加checked属性可使其默认选中

男
女

4. 复选按钮

通过相同name确定一组复选按钮，添加checked属性可使其默认选中

唱歌
读书
跑步

5. 隐藏域

主要用来隐藏不需要显示的信息，提交时也会被发送给服务器

6. 文件上传

使用此元素，form的enctype必须为multipart/form-data，method为POST。accept属性用来选择可上传文件的类型，multiple属性可选择多个文件

常见MIME类型

后缀名	MIME名
css	text/css
js	text/javascript, application/javascript
doc	application/msword
xls	application/vnd.ms-excel
gif	image/gif
html	text/html
jpeg	image/jpeg
jpg	image/jpeg
png	image/png
svg	image/vnd.svf
json	application/json
mp3	audio/mpeg
mp4	audio/mp4, video/mp4
ogg	application/ogg, audio/ogg
txt	text/plain
zip	aplication/zip

7. 下拉列表

嵌套标签使用，默认显示第一个option的值，添加size属性可显示多个

    上海
    北京
    杭州

8. 多行文本输入

rows，cols属性分别表示高，宽

内容

9. 区域标签

将内容划分为一个区域，legend标签是他的标题

    
xx表单
    

10. 提交按钮

点击后会将表单数据提交给action指向的地址。提交按钮的name和value不会提交给服务器

11. 重置按钮

点击后清空表单内容，重置为初始值。重置按钮的name和value不会提交给服务器

12. 普通按钮 ,

13. 图片按钮

1-13

以下是HTML5新增元素

14. type=number

包含数值的输入域，min，max可控制范围，value是初始值

15. type=range

包含一定范围内数字值的输入域，滑动条，默认情况下的value范围是0~100

16. type=date，type=time

日期，时间选择器控件

所有时间选择器类型

type类型	值
date	年月日
month	年月
week	年周
time	小时分
datetime	时间、日、月、年（UTC时间）
datetime-local	时间、日、月、年（本地时间）

17. type=color

颜色选择器控件

18. type=search

搜索域，显示为常规的文本域

19. type=email

包含 e-mail 地址的输入域，提交时会自动验证格式

20. type=url

包含 url 地址的输入域，提交时会自动验证格式

21. datalist

实现数据列表下拉效果，列表是通过 datalist 内的 option 元素创建的。把 datalist 绑定到输入域，用输入域的 list 属性必须与 datalist 的 id相同

 列表：
  

14-21