CSS设置表单样式课件.pptx

1、表单输入类型-文本输入框 语法：姓名：主要属性：name：名称，程序中常会用到。size：设定此栏位显示的宽度。value：预设内容。align：对齐方式。maxlength：设定可输入的最大长度。表单输入类型-单选按钮 语法案例：男 女 主要属性：checked name：需要将一组供选择的单选框设置为相同的名称，以保证这一组中只有一个单选按钮被选中。表单输入类型-复选按钮 语法：兴趣：文学 音乐 美术 主要属性：checked：name：表单输入类型-密码输入框 语法：密码：主要属性：type：值为“password”时，输入框内显示为密码形式。表单输入类型-按钮 语法：主要属性：type

2、：设置为“image”时，成为图像按钮。value：设置按钮上的文字。表单输入类型-多行文本框 语法：主要属性：cols：定义多行文本框的宽度（字符列数）。rows：定义多行文本框的高度（行数）。wrap：定义换行方式，有3种选择。off：输入文字不换行。virtual：输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器也视为没有换行。physical：输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。表单输入类型-列表框1 语法1：Flash Dreamweaver Fireworks Photoshop 表单输入类型-列表框2 语法2：列表

3、形式 Flash Dreamweaver Fireworks Photoshop 案例-css设置表单样式 设计网页结构如右图所示案例-HTML代码参考请输入您的姓名:请选择你最喜欢的颜色:红绿蓝黄青紫请问你的性别:男女你喜欢做些什么:看书上网睡觉我要留言:案例-css设置表单样式 利用css样式实现右图风格。案例-css代码参考form border:1px dotted#AAAAAA;padding:3px 6px 3px 6px;margin:0px;font:14px Arial;input color:#00008B;background-color:#ADD8E6;border:1

4、px solid#00008B;select width:80px;color:#00008B;background-color:#ADD8E6;border:1px solid#00008B;textarea width:200px;height:40px;color:#00008B;background-color:#ADD8E6;border:1px solid#00008B;ps：此样式代码在：此样式代码在IE和和FF中浏览有较大的中浏览有较大的效果差异。效果差异。案例-修改浏览器差异的css formborder:1px dotted#AAAAAA;padding:1px 6px 1

5、px 6px;margin:0px;font:14px Arial;input/*所有input标记*/color:#00008B;input.txt/*文本框单独设置*/border:1px inset#00008B;background-color:#ADD8E6;案例-修改浏览器差异的cssinput.btn/*按钮单独设置*/color:#00008B;background-color:#ADD8E6;border:1px outset#00008B;padding:1px 2px 1px 2px;selectwidth:80px;color:#00008B;background-co

6、lor:#ADD8E6;border:1px solid#00008B;textareawidth:200px;height:40px;color:#00008B;background-color:#ADD8E6;border:1px inset#00008B;案例-多彩的下拉菜单 css不仅可以控制下拉菜单的整体字体和边框格式，还可以进一步的对下拉菜单的每一个选项设置各自的背景色和文字颜色。案例-HTML结构代码请选择一种颜色 选择 蓝色红色绿色黄色青色紫色案例-”数独”游戏网页“数独”是一种益智类的数字游戏，相传起源于拉丁方阵。游戏规则是：在99的大九宫格中有9个33的小九宫格,根据格子里已有的数字,运用逻辑和推理的方法,在其他的空格上填入1到9的数字,要保证每个数字在每个小九宫格内不能重复,同时在每行每列中也不能重复。案例-”数独”游戏网页 网页效果如图所示：案例-”数独”游戏网页步骤：搭建基本表格；设置表格样式；加入文本输入框；设置文本输入框的样式。