html5支持4所有的表单控件吗,web day02 表格 表单及HTML常用的表单控件

一、 表格的标签及属性

table属性

Width、height 宽高(单位是像素或百分比)

align 对齐

border 外边框

bgcolor 背景色

background 背景图片

Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0

Cellpadding 单元格边距(表格边框与内容的距离) 一般情况写0

tr属性：

Align 水平对齐

left/center/ right

valign 垂直对齐

Top(上)/middle(中)/bottom(下)

bgcolor 背景色

td的基本属性

Width、height 宽高(单位是像素或%)

align valign 水平对齐、垂直对齐

bgcolor 背景色

background 指定背景图片

Colspan 水平合并 合并多列

rowspan 垂直合并 合并多行

表头th标签 是特殊的单元格，文字会自动加粗、居中。它的用法是取代的位置即可

餐饮类型

主要菜系

价格

中餐厅

生猛海鲜

1000元 表格主体tbody标签 T head 表格页眉(头部)只能出现一次 T body 表格主体可以出现多次 T foot 表格页脚(结尾)只能出现一次 以上三个标签结合使用，可将表格中的一行或几行合成一组 ….….….

二、 表单属性

表单的概念

表单在网页中主要负责数据采集功能，表单的标记是:

表单的属性

action属性：设置表单的提交地址(表单提交的url)指定表单提交后由服务器上的哪个处理程序进行处理

2 method属性：设置表单的提交方法， 属性值为get、post提交方式

3 name属性：设置表单的名称

4 target属性：设置表单的打开方式， 属性值可以是_blank、_self。_self在原窗口中打开，为默认值。_blank

在新窗口打开

enctype:默认编码 或者指定二进制流 【附件的提交形式】

method的值为get:它是通过URL来传递表单数据的，表单元素的数据在地址栏可见，而且有大小限制，传数据量小一般不大于2KB

method的值为post:它是通过请求正文传递表单数据的，URL不可见表单元素数据，比较安全，而且没有大小限制，但往往服务器会控制

输入标记

表单元素中输入标签是,常用属性有type(类型)、name(名称)、value(值)、checked(默认选中)

三、 HTML常用表单控件

文本框

文本框：主要用于输入单行文本内容。代码如下:

代码格式如下：

姓名：

效果如下：

账号：

密码框

密码框：主要用于输入一些保密信息，代码格式如下：

代码格式如下：

密码：

效果如下：

密码：

分组：

用户登录

3. 单选框

单选框主要是让网页浏览者在一组选项里选择一个。

Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称【name=“gender”】。

代码格式如下：

性别：男

女

效果如下：

性别：男

女

复选框

复选框主要是让网页浏览者在一组选项里同时选择多个选项。

选中checked代码格式如下：【disabled="disabled"足球】

爱好：读书

听歌

阅读

效果如下：

兴趣爱好：足球

篮球球

音乐

扩展：隐藏域：

图像域：

文件域

文件域主要是让网页浏览者上传文件。

代码格式如下：

上传文件：

效果如下：

提交按钮

提交按钮用来将输入的信息提交到服务器。Value属性定义按钮的显示文字。

代码格式如下：

效果如下：

重置按钮

重置按钮用来重置表单中输入的信息。代码格式如下：

效果如下：

input重置按钮：

input提交按钮：

input普通按钮：

提交按钮

重置按钮

普通按钮

图片域

图像域标记

代码格式如下:

下拉列表

下拉菜单主要用于在有限的空间里设置多个选项。

下拉菜单选中状态给option添加 selected

代码格式如下： … 居住城市(下拉菜单)： 北京 上海 深圳 厦门

注：Select标记的multiple属性和size属性不要求掌握。

列表框(提供多选ctrl+多选)：

苹果

橙子

香蕉

西瓜

柠檬

香梨

10. 文本域标记及属性

文本域主要用于输入较长的文本信息。

代码格式如下：

默认文字

效果：

Cols属性：定义文本域的宽度 (列)

rows属性：定义文本域的高度 (行)

四、 HTML5新增表单控件

HTML5文本框及placeholder属性

当文本框处于未输入状态并且未获取光标焦点时，模糊显示输入提示文字。

代码格式如下：

效果如下：

HTML5文本框类型tel

提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多的电话号码

还包括其他字符(如+ 、-、(、)等)，如86-0536-8888888

代码格式如下： pattern 属性规定用于验证输入字段的模式。模式指的是正则表达式 -->

电话号码：

电话号码：

效果如下:

HTML5 文本框类型 url 网址

url类型的input 元素提供用于输入url地址这类特殊文本的文本框．当提交表单时，如果所输入的内容是url地址格式的文本，则会提交数据到服务器，如果不是url地址格式的文本，则不允许提交．

代码如下：

效果如下：

4. HTML Email邮件

Email类型的input元素是一种专门用于输入e-mail地址在文本输入框，在提交表单时，会自动验证输入框的值．如果不是一个有效的e-mail地址,则该输入框不允许提交该表单．

代码如下：

效果如下： 5. HTML5文本框类型number 数字 max最大值 min最小值 step步长 Number类型的input 元素提供用于输入数值的文本框．我们还可以设定对所接受数字的限制，包括规定允许的最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示。 代码如下： step(步长)属性值倍数 max最大值 min最小值 效果如下： 6. HTML5文本框类型date Date类型的日期检出器用于选取日、月、年，即选择一个具体的日期，如2016年３月４日，选择后会以2016-03-04的形式显示 代码如下： 效果如下： 7. 视频和音频 您的浏览器不支持Video标签。 8. Your browser does not support this audio format.