CSS设置表单样式

CSS设置表单样式主讲：毛丽娟表单输入类型-文本输入框•语法：–form–姓名：inputtype=text“–/form•主要属性：–name：名称，程序中常会用到。–size：设定此栏位显示的宽度。–value：预设内容。–align：对齐方式。–maxlength：设定可输入的最大长度。表单输入类型-单选按钮•语法案例：–inputtype=radioname=gendervalue=radiochecked=true男–inputtype=“radio”name=“gender”value=“radio”女•主要属性：–checked–name：需要将一组供选择的单选框设置为相同的名称，以保证这一组中只有一个单选按钮被选中。表单输入类型-复选按钮•语法：–兴趣：inputtype=checkboxname=interest–文学–inputtype=checkboxname=interest–音乐–inputtype=checkboxname=interest–美术•主要属性：–checked：–name：表单输入类型-密码输入框•语法：–p密码：–inputtype=passwordname=textfieldid=textfield–/p•主要属性：–type：值为“password”时，输入框内显示为密码形式。表单输入类型-按钮•语法：–inputtype=submitvalue=提交–inputtype=resetvalue=重置•主要属性：–type：设置为“image”时，成为图像按钮。–value：设置按钮上的文字。表单输入类型-多行文本框•语法：–textareaname=textareaid=textareacols=45rows=5/textarea•主要属性：–cols：定义多行文本框的宽度（字符列数）。–rows：定义多行文本框的高度（行数）。–wrap：定义换行方式，有3种选择。•off：输入文字不换行。•virtual：输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器也视为没有换行。•physical：输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。表单输入类型-列表框1•语法1：–selectname=selectid=select–optionvalue=1selected=trueFlash/option–optionvalue=2Dreamweaver/option–optionvalue=3Fireworks/option–optionvalue=4Photoshop/option–/select表单输入类型-列表框2•语法2：列表形式–selectname=selectsize=5id=select–optionvalue=1selected=trueFlash/option–optionvalue=2Dreamweaver/option–optionvalue=3Fireworks/option–optionvalue=4Photoshop/option–/select案例-css设置表单样式•设计网页结构如右图所示案例-HTML代码参考•formmethod=post•p请输入您的姓名:brinputtype=textname=nameid=name/p•p请选择你最喜欢的颜色:br•selectname=colorid=color•optionvalue=red红/option•optionvalue=green绿/option•optionvalue=blue蓝/option•optionvalue=yellow黄/option•optionvalue=cyan青/option•optionvalue=purple紫/option•/select/p•p请问你的性别:br•inputtype=radioname=sexid=malevalue=male男br•inputtype=radioname=sexid=femalevalue=female女/p•p你喜欢做些什么:br•inputtype=checkboxname=hobbyid=bookvalue=book看书•inputtype=checkboxname=hobbyid=netvalue=net上网•inputtype=checkboxname=hobbyid=sleepvalue=sleep睡觉/p•p我要留言:brtextareaname=commentsid=commentscols=30rows=4/textarea/p•pinputtype=submitname=btnSubmitid=btnSubmitvalue=Submit/p•/form案例-css设置表单样式•利用css样式实现右图风格。案例-css代码参考•form{•border:1pxdotted#AAAAAA;•padding:3px6px3px6px;•margin:0px;•font:14pxArial;•}•input{•color:#00008B;•background-color:#ADD8E6;•border:1pxsolid#00008B;•}•select{•width:80px;•color:#00008B;•background-color:#ADD8E6;•border:1pxsolid#00008B;•}•textarea{•width:200px;•height:40px;•color:#00008B;•background-color:#ADD8E6;•border:1pxsolid#00008B;•}ps：此样式代码在IE和FF中浏览有较大的效果差异。案例-修改浏览器差异的css•form{•border:1pxdotted#AAAAAA;•padding:1px6px1px6px;•margin:0px;•font:14pxArial;•}•input{/*所有input标记*/•color:#00008B;•}•input.txt{/*文本框单独设置*/•border:1pxinset#00008B;•background-color:#ADD8E6;•}案例-修改浏览器差异的css•input.btn{/*按钮单独设置*/•color:#00008B;•background-color:#ADD8E6;•border:1pxoutset#00008B;•padding:1px2px1px2px;•}•select{•width:80px;•color:#00008B;•background-color:#ADD8E6;•border:1pxsolid#00008B;•}•textarea{•width:200px;•height:40px;•color:#00008B;•background-color:#ADD8E6;•border:1pxinset#00008B;•}案例-多彩的下拉菜单•css不仅可以控制下拉菜单的整体字体和边框格式，还可以进一步的对下拉菜单的每一个选项设置各自的背景色和文字颜色。案例-HTML结构代码•formmethod=post•plabelfor=color请选择一种颜色/label•selectname=colorid=color•optionvalue=选择/option•optionvalue=blueclass=blue蓝色/option•optionvalue=redclass=red红色/option•optionvalue=greenclass=green绿色/option•optionvalue=yellowclass=yellow黄色/option•optionvalue=cyanclass=cyan青色/option•optionvalue=purpleclass=purple紫色/option•/select/p•pinputtype=submitname=btnSubmitid=btnSubmitvalue=提交/p•/form案例-”数独”游戏网页•“数独”是一种益智类的数字游戏，相传起源于拉丁方阵。•游戏规则是：在9×9的大九宫格中有9个3×3的小九宫格,根据格子里已有的数字,运用逻辑和推理的方法,在其他的空格上填入1到9的数字,要保证每个数字在每个小九宫格内不能重复,同时在每行\每列中也不能重复。案例-”数独”游戏网页•网页效果如图所示：案例-”数独”游戏网页步骤：•搭建基本表格；•设置表格样式；•加入文本输入框；•设置文本输入框的样式。