第6章表格与表单_补充案例(1)

2018-12-17 12:34

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

第六章补充案例

案例6-6 简单的用户登陆界面一、案例描述

1、考核知识点

input控件

2、练习目标

? ? ? ?

熟悉表单的构成

掌握

标记的用法理解标记相关属性

掌握input控件属性中的单行文本输入框、密码输入框以及提交按钮属性

3、需求分析

在网页中，通常会使用表单来收集用户信息，并将这些信息传递给后台服务器，实现人机交互。同时，为了明确信息分类、便于用户操作，还会用到一系列的表单控件，用于定义不同的表单功能。为了便于初学者的理解和掌握，接下来，通过一个登陆界面的案例做具体演示。

4、案例分析

1) 最终实现效果，如图6-11所示。

图6-1 登陆界面

2）分析效果图，具体实现步骤如下：

a) 定义表单域。

b) 定义用于输入用户名的单行文本输入框。 c) 定义密码输入框。

d) 定义用于输入验证码的单行文本输入框。 e) 定义登陆按钮。

第1章 Java开发入门

二、案例实现

图6-2

简单的登陆界面

案例6-7 简单的交规考试答卷一、案例描述

1、考核知识点

input控件

2、练习目标

? ? ? ?

熟悉表单的构成

掌握标记的用法

掌握input控件属性中单选框和复选框属性熟悉标记的使用方法

3、需求分析

浏览网页时，经常会看到带有小图标的列表项，这些小图标不仅可以美化网页，还能提供更好的用户体验。虽然无序列表和有序列表都有自带的列表项目符号，但是，它们在不同浏览器中显示的效果不同。因此，在实际工作中，经常通过给列表项定义背景图像来设置列表项目符号。

4、案例分析

1) 最终实现效果，如图6-13所示。

传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训

图6-3 交规考试答卷效果

2）分析效果图，具体实现步骤如下：

a) 定义一个名为“交通考试选择题”的

标题。 b) 定义表单域
c) 使用
标记定义单选题的题干。
d) 使用标记的单选按钮属性定义选项。 e) 使用
标记定义多选题的题干。
f) 使用标记的复选框属性定义选项。
二、案例实现
案例6-8 制作字符批量替换工具界面一、案例描述
1、考核知识点
控件 </p><p>2、练习目标 </p><p>? 掌握<textarea>控件的使用方法 </p><p>? 掌握input控件属性中的单行文本输入框、复选框、文件域以及三种按钮属性 </p><p>3、需求分析 </p><p>当需要输入大量的文字信息时，单行文本输入框就不再适用，这时就需要用到表单中的</p><p><textarea>控件，来创建多行文本输入框。为了便于初学者的理解和掌握，接下来，通过制作一个字符批量替换工具界面的案例做具体演示。
4、案例分析
1) 最终实现效果，如图6-15所示。
3

第1章 Java开发入门

图6-4 字符批量替换工具界面效果
2）分析效果图，具体实现步骤如下：
a) 定义表单域。
b) 通过
标记定义标注文本“查找”。 c) 通过控件定义多行文本框。 d) 通过<p>标记定义标注文本“替换为”。 e) 通过<textarea>控件定义第二个多行文本框。 f) 使用<input>标记的复选框属性定义三个复选框。 g) 定义提交按钮、重置按钮和普通按钮。 </p><p>二、案例实现 </p><p>新建HTML页面，代码如下： </p><p>案例6-9 制作简单的游戏选区界面一、案例描述 </p><p>1、考核知识点 </p><p><select>控件 </p><p>2、练习目标 </p><p>? 掌握<select>控件的使用方法 </p><p>? 掌握下拉菜单分组选项的制作方法 ? 掌握input控件属性中的按钮属性 </p><p>3、需求分析 </p><p>在网页制作中，为了节省页面篇幅、美化页面，经常需要将较多的列表项以下拉菜单的形式隐藏起来。为了便于初学者的理解和掌握，接下来，将通过一个制作游戏选区界面的案例，对下拉菜单的用法做具体演示。 </p><p> 4 </p><p>传智播客——专注于Java、.Net和Php、网页平面设计工程师的培训 </p><p>4、案例分析 </p><p>1) 最终实现效果，如图6-17所示，当点击下拉菜单时，会出现如图6-18、6-19所示的效果。 </p><p> </p><p>图6-5 游戏选区界面效果图6-6 2）分析效果图，具体实现步骤如下： </p><p>a) 定义表单域 </p><p>b) 定义用于游戏选区的下拉菜单 c) 定义用于选择线路的下拉菜单 </p><p>d) 使用<input>标记的按钮属性定义确定和取消按钮 </p><p> </p><p>点击下拉菜单 </p><p>图6-7 </p><p> </p><p>点击下拉菜单 </p><p>二、案例实现 </p><p>新建HTML页面，代码如下： </p><p>案例6-10 CSS美化表单一、案例描述 </p><p>1、考核知识点 </p><p>CSS控制表单样式 </p><p>2、练习目标 </p><p>? ? ? ? </p><p>熟悉表格布局的基本原理掌握input控件的常用属性熟悉<fieldset>标记的用法复习CSS基本样式属性 </p><p>3、需求分析 </p><p>制作网页时，为了让页面更加美观、便于维护，经常会使用CSS对表单样式进行控制。为了便于初学者的理解和掌握，接下来，通过一个案例演示CSS美化表单的具体方法。 </p><p>4、案例分析 </p><p>1) 最终实现效果，如图6-21所示。 </p><p> </p><p>图6-8 简单的邮箱选区界面 </p><p>2）分析效果图，具体实现步骤如下： </p><p> 5 </p><p> </p><p> A. B. C. D. E. F. </p><p> </p><p> 第1章 Java开发入门 </p><p>定义表单域，并填充大的背景图片。 </p><p>定义表单内容分组，并确定分组名称为“个人注册”。定义一个3行2列的表格换份表单结构。 </p><p>在第一行第一列和第二行第一列输入提示信息。 </p><p>在第一行第二列和第二行第二列各定义一个单行文本，用于输入用户信息。在第三行第二列设置按钮，并填充背景图片。 </p><p> </p><p>二、案例实现 </p><p>1、制作页面结构 </p><p>新建HTML页面，代码如下： 2、定义CSS样式 </p><p>使用内嵌式CSS样式表为页面添加样式，具体CSS代码如下： </p><p> </p><p>图6-9 CSS美化表单 </p><p>在本案例中，通过<filedset></filedset>标记可以将表单内容分组，并且使用其配套标记<legend></legend>为各个表单组定义名称。 </p><p> 6 </p><p></p> <br /> <p><script type="text/javascript">s("content-m");</script></p> </div> <div class="m-pages"><li><a>共2页: </a></li><li><a href='#'>上一页</a></li><li class="thisclass"><a>1</a></li><li><a href='368280_2.html'>2</a></li><li><a href='368280_2.html'>下一页</a></li></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">第6章表格与表单_补充案例(1).doc</span> <span>将本文的Word文档下载到电脑</span> <span>下载失败或者文档不完整，请联系客服人员解决！ </span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> <p>下一篇：<a href="/wenku/zonghe/368279.html">福建省福州市2018届高三下学期质量检测(3月)地理Word版含答案</a></p> </div> <script type="text/javascript">s("like-m");</script> <div class="main-tab"><a class="on" href="javascript:;">相关阅读</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/zonghe/1263351.html" title="石油大学《化工原理二》2021期末考试答案">石油大学《化工原理二》2021期末考试答案</a></li> <li><a href="/wenku/zonghe/1157609.html" title="建筑节能检测习题集（84页）">建筑节能检测习题集（84页）</a></li> <li><a href="/wenku/zonghe/215568.html" title="高考物理(考点解读命题热点突破)专题06 机械">高考物理(考点解读命题热点突破)专题06 机械</a></li> <li><a href="/wenku/zonghe/215769.html" title="1 2014.10.23第一次财务会计理论与实务课堂笔">1 2014.10.23第一次财务会计理论与实务课堂笔</a></li> <li><a href="/wenku/zonghe/215778.html" title="通信资源管理系统介绍(GIS)">通信资源管理系统介绍(GIS)</a></li> <li><a href="/wenku/zonghe/215564.html" title="年产60万吨PTA项目环境影响报告书">年产60万吨PTA项目环境影响报告书</a></li> <li><a href="/wenku/zonghe/215563.html" title="2016小学生读书笔记范文">2016小学生读书笔记范文</a></li> <li><a href="/wenku/zonghe/215562.html" title="Dhlrwk谈中学生英语学习策略">Dhlrwk谈中学生英语学习策略</a></li> <li><a href="/wenku/zonghe/215560.html" title="数电课程设计报告洗衣机自动控制电路">数电课程设计报告洗衣机自动控制电路</a></li> <li><a href="/wenku/zonghe/215558.html" title="2018年最新湖南省长沙市长郡中学2018届上学">2018年最新湖南省长沙市长郡中学2018届上学</a></li> </ul> </div> <div class="main-tab"><a class="on" href="javascript:;">本类排行</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a href="/wenku/zonghe/175782.html" title="云客服基础考试">云客服基础考试</a></li> <li><a href="/wenku/zonghe/158762.html" title="《红星照耀中国--》名著阅读练习题及答案">《红星照耀中国--》名著阅读练习题及答案</a></li> <li><a href="/wenku/zonghe/176003.html" title="红星照耀中国练习题及答案">红星照耀中国练习题及答案</a></li> <li><a href="/wenku/zonghe/171844.html" title="《红星照耀中国》练习题">《红星照耀中国》练习题</a></li> <li><a href="/wenku/zonghe/159778.html" title="人教部编版2018-2019学年八年级语文上册第一">人教部编版2018-2019学年八年级语文上册第一</a></li> <li><a href="/wenku/zonghe/183326.html" title="化工导论试题">化工导论试题</a></li> <li><a href="/wenku/zonghe/182252.html" title="八年级上册名著导读练习——《红星照耀中国》">八年级上册名著导读练习——《红星照耀中国》</a></li> <li><a href="/wenku/zonghe/162180.html" title="人教版语文八(上)名著导读《红星照耀中国》练">人教版语文八(上)名著导读《红星照耀中国》练</a></li> <li><a href="/wenku/zonghe/185266.html" title="2018年江苏省第八届就业创业知识竞赛题库(全7">2018年江苏省第八届就业创业知识竞赛题库(全7</a></li> <li><a href="/wenku/zonghe/168880.html" title="《红星照耀中国》导读及练习题附答案">《红星照耀中国》导读及练习题附答案</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.77cn.com.cn">手机版</a><span class="v-line">|</span><a href="https://www.77cn.com.cn">PC版</a><span class="v-line">|</span><a href="https://m.77cn.com.cn/fww">范文大全</a></p> <p>Copyright © 2019-2022 免费范文网版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br/>客服QQ：邮箱：tiandhx2@hotmail.com<br/> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-18</a> </p> <div style="display:none;"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e245478384fea490ec3a2317ee103ab"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </div> </footer> <div class="theme-popover"> <div class="theme-poptit"> <a href="javascript:;" title="关闭" class="close">×</a> <b>注册会员免费下载</b>（下载后可以自由复制和排版） </div> <div class="theme-popbod dform">        <p class='wxpay'><a href='https://www.77cn.com.cn/user/index.php'>马上注册会员</a></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信： QQ：</p> </div> </div> <div class="theme-popover-mask"></div> <script> //menu $(".header .menu").on("click", function(){ $("body").append("<div class=\"mask-bg menu-mask-bg\"></div>"); $(".menu-slide").show(); $("html,body").css({height:$(window).innerHeight(), overflow:"hidden"}); setTimeout(function(){ $(".menu-slide").css({transform:"translateX(-50px)"}); },50) }); $("body").on("click", ".menu-mask-bg", function(){ $(".menu-slide").css({transform:"translateX(-100%)"}); $(".menu-mask-bg").remove(); $("html,body").removeAttr("style"); setTimeout(function(){ $(".menu-slide").hide(); },300) }); //search $(".header .search").click(function(){ if($(".search-box").is(":hidden")){ $(this).children("i").removeClass("search-icon").addClass("close-icon"); $(".search-box").fadeIn("fast"); }else{ $(this).children("i").removeClass("close-icon").addClass("search-icon"); $(".search-box").fadeOut("fast"); } }); //nav if($(".nav").length > 0) { var nav = new Swiper(".nav",{ slidesPerView: "auto" }); } </script> <script> $(".pay1 img").click(function () { $(".wxpay").css("display", "block"); $(".alipay").css("display", "none"); $(".pay1 img").addClass("over"); $(".pay2 img").removeClass("over"); }); $(".pay2 img").click(function () { $(".wxpay").css("display", "none"); $(".alipay").css("display", "block"); $(".pay1 img").removeClass("over"); $(".pay2 img").addClass("over"); }); </script> <script type="text/javascript"> jQuery(document).ready(function($) { $('.word-pic a').click(function(){ $('.theme-popover-mask').fadeIn(100); $('.theme-popover').slideDown(200); $(".vip-up").hide(); $(".vip-pay").hide(); var downid = '368280' $('.wxpay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=wx&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); $('.alipay a').click(function(){ var payurl = 'https://www.77cn.com.cn/hupipay/payment_pay_tz.php?payway=ali&aid='; payurl = payurl.replace('payment', 'youke'); var gotourl = payurl + downid location.href = gotourl; }); }) $('.theme-poptit .close').click(function(){ $('.theme-popover-mask').fadeOut(100); $('.theme-popover').slideUp(200); }) }) </script> <script src="/js/gobacktop.js" type="text/javascript"></script> </body> </html>

第6章 表格与表单_补充案例(1)

第6章表格与表单_补充案例(1)