CSS设置表单样式.ppt

CSS设置表单样式 主讲：毛丽娟 表单输入类型-文本输入框 语法： form 姓名：input type=text“ /form 主要属性： name：名称，程序中常会用到。 size：设定此栏位显示的宽度。 value：预设内容。 align：对齐方式。 maxlength：设定可输入的最大长度。 表单输入类型-单选按钮 语法案例： input type=radio name=gender value=radio checked=true 男 input type=“radio” name=“gender” value=“radio” 女 主要属性： checked name：需要将一组供选 择的单选框设置为相同的 名称，以保证这一组中只有 一个单选按钮被选中。 表单输入类型-复选按钮 语法： 兴趣：input type=checkbox name=interest 文学 input type=checkbox name=interest 音乐 input type=checkbox name=interest 美术 主要属性： checked： name： 表单输入类型-密码输入框 语法： p密码： input type=password name=textfield id=textfield /p 主要属性： type：值为“password”时， 输入框内显示为密码形式。 表单输入类型-按钮 语法： input type=submit value= 提 交 input type=reset value= 重 置 主要属性： type：设置为“image”时， 成为图像按钮。 value：设置按钮上的文字。 表单输入类型-多行文本框 语法： textarea name=textarea id=textarea cols=45 rows=5/textarea 主要属性： cols：定义多行文本框的宽度（字符列数）。 rows：定义多行文本框的高度（行数）。 wrap：定义换行方式，有3种选择。 off：输入文字不换行。 virtual：输入文字在屏幕上会自动换行，但是如果访问者没有按回车键换行，则提交到服务器也视为没有换行。 physical：输入文字时会自动换行，提交到服务器时，会将屏幕上的自动换行视为换行效果提交。 表单输入类型-列表框1 语法1： select name=select id=select option value=1 selected=trueFlash/option option value=2Dreamweaver/option option value=3Fireworks/option option value=4Photoshop/option /select 表单输入类型-列表框2 语法2：列表形式 select name=select size=5 id=select option value=1 selected=trueFlash/option option value=2Dreamweaver/option option value=3Fireworks/option option value=4Photoshop/option /select 案例-css设置表单样式 设计网页结构如右图所示 案例-HTML代码参考 form method=post p请输入您的姓名:brinput type=text name=name id=name/p p请选择你最喜欢的颜色:br select name=color id=color option value=red红/option option value=green绿/option option value=blue蓝/option option value=yellow黄/option option value=cyan青/option option value=purple紫/option /select/p p请问你的性别:br input type=radio name=sex id=male value=male男br input type=radio name=sex id=female value=female女/p p你喜欢做些什么:br input type=checkbox name=hobby id=book value=book看书 input type=checkbox name=hobby id=net val