网页设计基础-表格与表单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
– 注册表单 – 登录表单
表单的工作原理
form标记符
• form包含所有表单内容
– action 属性
• 服务器端脚本程序（ASP、JSP、PHP、Perl等） • mailto:mailbox@mailserver.com
– method属性（get、post） – enctype属性
• 文本框 • 复选框 • 单选框 • 按钮 • 选项菜单 • ……
table {border-collapse: separate(默认值); border-spacing: 5px;} table {border-collapse: collapse; }
• cellpadding属性
td {padding:10px;}
表格对齐
l 表格的页面对齐<table align> l 表格内容的对齐
– <style> input.required{background:darkred; color:white}</style> <input class=“required” type=“text” size=“30” />
谢谢！
第5章 表格与表单
（3）综合实例
谢谢！
选项菜单
表单控件分组
• <fieldset> • <legend>group1</legend> • <p><input type="radio" id="sleep" name="hobby2"><label
for="sleep">睡觉</label></p> • <p><input type="radio" id="doze" name="hobby2"><label
第5章 表格与表单
（1）使用表格
本章目标
• 掌握构造表格和设置表格属性。 • 掌握使用CSS设置表格显示效果。 • 理解表单的概念。 • 掌握创建表单的过程。 • 掌握设置表单控件标签的方法。 • 掌握使用CSS对表单进行布局。
表格的组成
• 表格标记符table • 表格标题 caption • 表格行 tr （table row） • 表格数据 td （table data） • 表格表头 th （table heading）
– 水平对齐(align) (CSS: text-align) – 垂直对齐(valign) (CSS: vertical-align)
7/52
谢谢！
第5章 表格与表单
（2）使用表单
什么是表单
• 表单是用于实现网页浏览者与服务器之间信息交互的一种 页面元素，它由表单控件和一般内容组成。 例如：
for="doze">发呆</label></p> • </fieldset>
表单的显示效果
• 使用 CSS 修饰表单控件
– <input type=“submit” value=“SUBMIT” style=“fontfamily:Impact, sans-serif; color:white; font-size:14px; background:black” />
按钮
• 提交按钮
– <input type=“submit”> – <input type=“image”>
• 重置按钮
– <input type=“reset”>
• 自定义按钮
– <input type=“button”>
Leabharlann Baidu
• select标记符
– size属性 – multiple属性
• option标记符
复选框和单选框
• 复选框
– <input type=“checkbox” checked=“checked”>
• 单选框
– <input type=“radio” name=“...” checked=“checked”> – 注意：单选框 name 属性相同者为一组！
设置表单控件的标签
• <label for=“controlID”>标签文本</label> • <input id=“controlID” />
表格的构造
• 在 th 或 td 标记符中使用 rowspan 属性进行行合并 • 在 th 或 td 标记符中使用 colspan 属性进行列合并
表格边框
• <table frame=”” rules=”” border=””> • CSS border
控制单元格空白
• cellspacing属性
表单控件的类型
文本框
• 单行文本框
– <input type="text" name="" value="" size="" maxlength="" placeholder="" />
• 口令/密码框
– <input type="password" name="" value="" size="" maxlength="" placeholder="" />
表单的工作原理
form标记符
• form包含所有表单内容
– action 属性
• 服务器端脚本程序（ASP、JSP、PHP、Perl等） • mailto:mailbox@mailserver.com
– method属性（get、post） – enctype属性
• 文本框 • 复选框 • 单选框 • 按钮 • 选项菜单 • ……
table {border-collapse: separate(默认值); border-spacing: 5px;} table {border-collapse: collapse; }
• cellpadding属性
td {padding:10px;}
表格对齐
l 表格的页面对齐<table align> l 表格内容的对齐
– <style> input.required{background:darkred; color:white}</style> <input class=“required” type=“text” size=“30” />
谢谢！
第5章 表格与表单
（3）综合实例
谢谢！
选项菜单
表单控件分组
• <fieldset> • <legend>group1</legend> • <p><input type="radio" id="sleep" name="hobby2"><label
for="sleep">睡觉</label></p> • <p><input type="radio" id="doze" name="hobby2"><label
第5章 表格与表单
（1）使用表格
本章目标
• 掌握构造表格和设置表格属性。 • 掌握使用CSS设置表格显示效果。 • 理解表单的概念。 • 掌握创建表单的过程。 • 掌握设置表单控件标签的方法。 • 掌握使用CSS对表单进行布局。
表格的组成
• 表格标记符table • 表格标题 caption • 表格行 tr （table row） • 表格数据 td （table data） • 表格表头 th （table heading）
– 水平对齐(align) (CSS: text-align) – 垂直对齐(valign) (CSS: vertical-align)
7/52
谢谢！
第5章 表格与表单
（2）使用表单
什么是表单
• 表单是用于实现网页浏览者与服务器之间信息交互的一种 页面元素，它由表单控件和一般内容组成。 例如：
for="doze">发呆</label></p> • </fieldset>
表单的显示效果
• 使用 CSS 修饰表单控件
– <input type=“submit” value=“SUBMIT” style=“fontfamily:Impact, sans-serif; color:white; font-size:14px; background:black” />
按钮
• 提交按钮
– <input type=“submit”> – <input type=“image”>
• 重置按钮
– <input type=“reset”>
• 自定义按钮
– <input type=“button”>
Leabharlann Baidu
• select标记符
– size属性 – multiple属性
• option标记符
复选框和单选框
• 复选框
– <input type=“checkbox” checked=“checked”>
• 单选框
– <input type=“radio” name=“...” checked=“checked”> – 注意：单选框 name 属性相同者为一组！
设置表单控件的标签
• <label for=“controlID”>标签文本</label> • <input id=“controlID” />
表格的构造
• 在 th 或 td 标记符中使用 rowspan 属性进行行合并 • 在 th 或 td 标记符中使用 colspan 属性进行列合并
表格边框
• <table frame=”” rules=”” border=””> • CSS border
控制单元格空白
• cellspacing属性
表单控件的类型
文本框
• 单行文本框
– <input type="text" name="" value="" size="" maxlength="" placeholder="" />
• 口令/密码框
– <input type="password" name="" value="" size="" maxlength="" placeholder="" />