资源简介 (共56张PPT)任务8 制作学生信息注册表单Web前端开发案例教程 HTML5+CSS3 微课版HTML表单是HTML的一个重要部分，主要用于采集和提交用户输入的信息，它是Web前端实现人机交互必不可少的元素。本任务制作一个学生信息注册表单，在表单中输入学生相关的一系列信息，并使用CSS设置表单样式。通过本任务的实现，掌握表单的创建和样式设置方法，能轻松制作网页中类似的表单。任务3 制作学生信息注册表单任务8任务效果制作学生信息注册表单，浏览效果如图8-1所示图8-1 学生信息注册表单知识点认识表单01表单标记02表单控件03使用CSS设置表单样式04任务3 制作学生信息注册表单任务88.2.1 认识表单内容引入表单是用于实现浏览者与网页制作者之间信息交互的一种网页对象。8.2.1 认识表单表单是允许浏览者进行输入的区域，可以使用表单从客户端收集信息。浏览者在表单中输入信息，然后将这些信息提交给网站服务器，服务器中的应用程序会对这些信息进行处理并响应，这样就完成了浏览者和网站服务器之间的交互。HTML5新增了很多表单控件，完善了表单的功能，新特性提供了更好的用户体验和输入控制。8.2.1 认识表单表单域（标记）：标记是一个包含框，是包含表单控件的容器。表单控件（标记等）：用于输入用户信息的控件，如文本框、密码框、单选按钮、复选框和按钮等。表单的构成提示信息：表单控件周围用于提示输入内容的文字。8.2.1 认识表单8.2.2 表单标记表单是一个包含表单控件的容器，表单控件允许用户在表单中使用表单域输入信息。表单使用的标记是成对出现的，在开始标记和结束标记之间的部分就是一个表单。可以使用标记在网页中创建表单。8.2.2 表单标记表单的基本语法标记主要用于处理和传送表单结果，其常用属性的含义如下。给定表单名称，以区分同一个页面中的多个表单。8.2.2 表单标记1. name属性指定处理表单信息的服务器端URL地址。8.2.2 表单标记2. action属性用于设置表单数据的提交方式，其取值为get或post。其中，get为默认值，这种方式提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制。而post方式的保密性好，并且无数据量的限制，使用method="post"可以大量提交数据。8.2.2 表单标记3. method属性用于指定表单是否有自动完成功能。所谓“自动完成”，是指将表单控件输入的内容记录下来，当再次输入时，会将输入的历史记录显示在一个下拉列表中，以实现自动完成输入。该属性的取值有on和off，当为on时，表示有自动完成功能，否则没有。该属性是HTML5的新增属性。8.2.2 表单标记4. autocomplete属性指定在提交表单时，取消对表单进行有效性检查。为表单设置该属性时，可以关闭整个表单的验证。该属性的取值有true和false，当为true时，表示取消表单验证。该属性是HTML5新增属性。8.2.2 表单标记5. novalidate属性标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在与之间添加相应的表单控件。8.2.3 表单控件表单中通常包含一个或多个表单控件。在用户登录表单中包括两个文本框和两个命令按钮控件。表单中最为核心的是标记，使用标记可以定义很多控件，譬如，文本框、单选按钮、复选框、提交按钮、重置按钮等等。8.2.3 表单控件格式：控件8.2.3 表单控件标记为单标记，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。控件8.2.3 表单控件需要注意的是，在HTML5提供了不同输入类型的输入框，比如email、url等在提交时，自动验证输入的内容是否符合要求，不符合要求时会有错误提示。控件8.2.3 表单控件除了type属性之外，标记还可以定义很多其他的属性。控件8.2.3 表单控件例8-1 创建调查问卷表单，介绍典型的控件的使用控件8.2.3 表单控件单行文本输入框使用时，可以使用value属性设置文本框中的默认值，也可以使用placeholder属性。同一组单选按钮需要设置相同的name属性。checked属性表示单选按钮的默认选项。表单控件设置name属性，是为了传递表单提交时收集到的表单数据。在调查问卷表单中输入相应的内容，单击 “提交”按钮时，在地址栏中会显示设置了name属性的表单控件的值。8.2.3 表单控件控件8.2.3 表单控件内容引入当需要输入大量信息时，就需要使用textarea文本域控件。当定义input控件的type属性值为text时，可以创建一个单行文本输入框。如果需要输入大量信息，且字数没有限制，就需要使用和标记。例如，输入个人简历时的控件就是textarea控件。8.2.3 表单控件格式：<br/>文本内容<br/>控件<br/>8.2.3 表单控件<br/>在<textarea>的语法格式中，cols和rows为<textarea>标记的必需属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。<br/><textarea>控件<br/>8.2.3 表单控件<br/>各浏览器对cols和rows属性的理解不同，当对textarea控件应用cols和rows属性时，多行文本输入框在各浏览器中的显示效果可能会有差异。所以在实际工作中，更常用的方法是使用CSS的width和height属性来定义多行文本输入框的宽、高。<br/><textarea>控件<br/><textarea>控件常用属性。<br/>8.2.3 表单控件<br/><textarea>控件<br/>8.2.3 表单控件<br/>例8-2 使用textarea>控件在前面调查问卷的后面添加多行文本框。<br/><textarea>控件<br/>使用<textarea>控件在前面调查问卷的后面添加多行文本框，并设置了“autofocus”属性，表示会自动获取焦点，设置了“required”属性，表示该项不能为空。<br/>8.2.3 表单控件<br/>浏览网页，效果如图所示<br/><textarea>控件<br/>内容引入<br/>select控件提供下拉列表选项，供用户选择。<br/>8.2.3 表单控件<br/>下拉列表通过select标记和option标记来定义。例如，在用户注册表单中，职业的选择项就使用下拉列表实现。<br/>格式：<select><br/><option value="1">第一个选项</option><br/><option value="2">第二个选项</option><br/><option value="3">第三个选项</option><br/></select><br/>8.2.3 表单控件<br/><select>控件<br/><select>和</select>标记用于在表单中添加一个下拉菜单。<br/><option>和</option>用于定义下拉菜单中的具体选项。<br/>每对<select>和</select>中至少应包含一对<option>和</option>。<br/>8.2.3 表单控件<br/><select>控件<br/>可以为<select>和<option>标记定义属性，以改变下拉菜单的外观显示效果，常用属性如表所示。<br/>8.2.3 表单控件<br/><select>控件<br/>8.2.3 表单控件<br/><select>控件<br/>例8-3 介绍<select>控件的使用。<br/>在项目chapter08中新建网页文件example03.html<br/>多选和单选的区别在于是否设置<select>的标记的“multiple”属性，显示成下拉列表和带箭头的菜单的区别在于是否将“size”属性设置大于1。<br/>8.2.3 表单控件<br/><select>控件<br/>8.2.3 表单控件<br/><select>控件<br/>浏览网页，效果如图所示。<br/>创建用户登录表单，使用CSS设置表单样式<br/>8.2.4 使用CSS设置表单样式<br/>内容引入<br/>8.2.4 使用CSS设置表单样式<br/>表单的构成<br/>输入用户名和密码的文本框中使用了属性pattern，设置正则表达式，验证输入的规则。<br/>在每对<p>标记中添加相应的表单控件，分别用于定义单行文本框、密码输入框和普通按钮。左边的提示信息放入<span>标记中，以便于设置文字的右对齐。<br/>8.2.4 使用CSS设置表单样式<br/>例8-4 创建用户登录表单，使用CSS设置表单样式。 example03.html 。<br/>8.2.4 使用CSS设置表单样式<br/>此时浏览网页，效果如图所示。<br/>8.2.4 使用CSS设置表单样式<br/>添加表单样式关键代码<br/>8.2.4 使用CSS设置表单样式<br/>8.2.4 使用CSS设置表单样式<br/>在使用CSS控制表单样式时，需要注意以下几个问题：<br/>（1）由于form是块元素，所以重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。<br/>（2）input控件默认有边框效果，当使用<input>标记定义各种按钮时，通常需要清除其边框。<br/>（3）通常情况下，需要对文本框和密码框设置2～3px的内边距，以使用户输入的内容不会紧贴输入框。<br/>任务3 制作学生信息注册表单<br/>任务8<br/>任务描述<br/>制作学生信息注册表单，并使用CSS定义表单样式，浏览效果如下图所示。<br/>任务描述<br/>要求如下。<br/>（1）定义表单域。<br/>（2）使用表单控件定义各输入控件。<br/>（3）使用<input>标记的按钮属性定义提交和重置按钮。<br/>（4）通过CSS整体设置表单样式。<br/>任务分析<br/>搭建学生信息注册表单页面结构<br/>p<br/>h2<br/>8.3.1 搭建学生信息注册表单页面结构<br/>搭建结构<br/>8.3.1 搭建学生信息注册表单页面结构<br/>此时浏览网页，效果如图所示<br/>搭建结构<br/>8.3.2 使用CSS定义学生信息注册表单页面样式<br/>定义样式<br/>任务3 制作学生信息注册表单<br/>任务8<br/>任务小结<br/>本任务围绕登录和注册表单的制作，介绍了表单的创建，主要包括表单相关标记以及如何使用CSS定义表单的样式，最后综合利用这些知识完成了学生信息注册表单的制作。</p> <p class="introAll">展开更多......</p> <p class="introAllHide">收起↑ </p> </div> </form> <div class="entry-content clearfix"> <p class="asset-tit"> <img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">资源预览 </p> <div class="asset-preview"> <img src="https://preview.21cnjy.com/f2/2024/03/58/5884739c8b0b46cea40cb57f44f794e2.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/4e/4eaf0abcdc6d6d3d825be33fb7495fbb.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/38/381c4e18967544192993bf9011a9c20a.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/ba/bacb64b7039568f6a13d967effb6c2de.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/bf/bf694a6a0947149d3b3e8e239fc72559.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/b0/b0624cd51e771a1dabc7cc8253024ade.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/cb/cba6a6497e470c55b3953007fffca05d.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/7a/7a73fd91bf8b7e99b87448e2ad49ddcb.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/54/54b0abde65e3fa46df164927a1f8873e.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/d5/d574b83a0eb56bbad8f24a2977d6ce99.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/0a/0a74c1e26e7e10e668a0a5c57e480686.png" style="max-width:800px;"> <img src="https://preview.21cnjy.com/f2/2024/03/72/721e2cd879a13dc84ba46b4679cc5387.png" style="max-width:800px;"> </div> </div> <div class="entry-footer"> <div class="entry-bar"> <div class="entry-bar-inner clearfix text-center"> </div> </div> <div class="entry-copyright"> <p>缩略图、资源来源于二一教育资源库</p> </div> </div> </div> </article> </div> <aside class="sidebar"> <div class="widget widget_views"> <h3 class="widget-title">相关资源</h3> <ul> <li><a href="https://doc.21cnjy.com/p-17678581.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务12 完整项目：化妆品网站设计与实现 同步课件(共28张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务12 完整项目：化妆品网站设计与实现 同步课件(共28张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678571.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务10使用CSS3实现动画效果 同步课件(共71张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务10使用CSS3实现动画效果 同步课件(共71张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678569.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务8制作学生信息注册表单(共56张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务8制作学生信息注册表单(共56张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678567.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务11完整项目：制作学院网站(共49张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务11完整项目：制作学院网站(共49张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678564.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务9布局学院网站主页(共53张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务9布局学院网站主页(共53张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678563.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务3美化简单学院网站 同步课件(共107张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务3美化简单学院网站 同步课件(共107张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678561.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步教案：任务11 完整项目：制作学院网站（表格式）">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步教案：任务11 完整项目：制作学院网站（表格式）</a></li> <li><a href="https://doc.21cnjy.com/p-17678560.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务7制作学生信息表(共25张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）同步课件：任务7制作学生信息表(共25张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678559.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务5制作学院网站导航条 同步课件(共30张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务5制作学院网站导航条 同步课件(共30张PPT)</a></li> <li><a href="https://doc.21cnjy.com/p-17678557.html" title="中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务6制作学院新闻块 同步课件(共53张PPT)">中职《Web前端开发案例教程（HTML5+CSS3）（第2版）》（人邮版·2023）任务6制作学院新闻块 同步课件(共53张PPT)</a></li> </ul> </div> </aside> </div> </div> </main> <script src="//static.21cnjy.com/js/underscore-1.8.3.min.js"></script> <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script> <script> function jumpbaiduboxapp(el){ if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 标题固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 简介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收缩 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })(); </script> <!--footer开始--> <!-- 底部 --> <footer class="footer"> <div class="container"> <div class="clearfix"> <div class="footer-col footer-col-logo"> <!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> --> </div> <div class="footer-col footer-col-copy "> <ul class="footer-nav hidden-xs "> <li><a href="https://www.21cnjy.com/help/">帮助中心</a> </li> <li><a href="https://www.21cnjy.com/about/about_contact-us.php">联系我们</a> </li> <li><a href="https://www.21cnjy.com/about/about_opinion.php">意见反馈</a> </li> </ul> <div class="copyright "> 2023 版权所有© 二一教育 <a href="https://beian.miit.gov.cn" target="_blank " rel="nofollow noopener noreferrer">粤ICP备11039084</a> </div> </div> <div class="footer-col footer-col-sns "> <div class="footer-sns "> <ul class="footer-nav hidden-xs "> <li>友情链接：</li> <li> <a href="https://yj.21cnjy.com/" title="阅卷软件系统">阅卷系统</a> <a href="https://edu.21cnjy.com/" title="美文范文">优秀范文</a> <a href="https://paike.21cnjy.com/" title="新高考走班">走班排课</a> <a href="https://tiku.zujuan.com/" title="组卷网题库">组卷题库</a> <a href="https://www.chujuan.cn/" title="组题出卷网">出卷网</a> </li> </ul> </div> </div> </div> </div> </footer> <mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed> <mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script> <script src="/assets/26c9d710/jquery.js"></script> <script src="/assets/a0893c15/yii.js"></script> <script src="/assets/a0893c15/yii.activeForm.js"></script> <script type="text/javascript">jQuery(document).ready(function () { jQuery('#w0').yiiActiveForm([], []); jQuery('#w1').yiiActiveForm([], []); });</script> </body> </html>