表单

CSS样式设计
——表单
主要内容：
常用表单控件 表单自身元素样式 表单布局样式 表单文字样式 表单图像的背景样式 圆角表格设计
常用表单控件：
(X）HTML提供了7种常用表单控件, 分别是：
input type="text" 单行文本输入框 input type="submit" 将表单(Form) 里的信息提交给表单里action所指向 的文件 input type="checkbox" 复选框
<form> <fieldset>
<legend > 分组名1 </legend>
</fieldset> …… <fieldset>
<legend > 分组名 2</legend>
</fieldset> </form>
示例
圆角表格的设计：
设计步骤： ①准备四个角的圆角图片
圆角表格的设计：
填背景色 填背 景色 填背景色
多行文本基本格式：
<textarea name="yoursuggest" cols ="50" rows = "3"> </textarea> 其中cols表示textarea的宽度，rows表示 textarea的高度。
表单的样式设计：
新浪 yahoo
126邮箱 表单样式分类： ① 表单元素自身的样式 ② 表单中布局样式 ③ 表单中文字的样式 ④ 表单中图片的样式
常用表单控件：
input type="radio" 单选框 select 下拉框 textArea 多行文本输入框 input type="password" 密码输入 框(输入的文字用*表示)
常用表单控件的基本格式：
<input name="yourname“type=“ ****" >
示例
表单中文字样式的设计：
可以应用文字的所有相关属性 font-size color font-family等
示例
表单中图像与背景样式的使用：
图像的用途： ①修饰页面 ②作为图片按钮 ③作为背景
示例
表单中图像与背景样式的使用：
图像的用途： ①修饰页面 ②作为图片按钮 ③作为背景
示例
ቤተ መጻሕፍቲ ባይዱ
用fieldset标签制作表单 ：
填背景色
设计步骤： ②设计一个三 行三列的无 填背 边框表格 景色 ③将四个圆角 图片分别插 入四个角
圆角表格的设计：
设计效果：
示例
课堂作业
• 设计如图“示例.jpg”所示的注册页面，页面 资源见“作业资源”文件夹。
• 采用圆角表格的设计方法 • 布局设计与定位采用表格或div来实现 • 页面字号12px
Text：文本 Password：密码 Checkbox：复选框 Radio：单选框 Submit/reset：按钮
下拉框基本格式：
<select name="fruit" > <option value="apple“ checked>苹果 <option value="orange">桔子 <option value="mango">芒果 </select>
表单元素自身的样式属性：
原例
盒模式相关属性 Border属性：设置表单元素的边框； Padding属性：设置表单元素内容与边 框的距离； Weight和height属性：设置表单元素的 宽度和高度； 示例
表单中布局样式的设计：
表单中的众多元素，按照设计要求，将这 些元素集合在一个表单中，需要一种布局。 方法一：使用表格布局 方法二：使用div布局 方法三：使用段落P布局 可以将table和div的所有样式用于修饰表 单。