html笔记 - 图文

标签能够包含，可以是文本字段，复选框，单选框或提交按钮等。

还可以包含 <select>等。 <form>常用属性: </p><p>? name:用于定义表单的名称 </p><p>? action:用于规定提交表单时向何处发送表单数据。 ? method:用于规定提交的方式。一般取值 POST或GET 关于POST与GET方式区别: </p><p>1. get方式只能少量数据,而post可以携带大数据。 </p><p>2. get方式提交时，数据会在地址栏上显示，安全性差。Post方式提交不会在地</p><p>址栏上显示数据，更加安全。 </p><p>input种类 </p><p> <input> 标签用于搜集用户信息。 </p><p>根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 关于<input>标签type属性值说明 : text </p><p><input type=”text”> </p><p>定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 其它常用属性: </p><p>? name:定义标签名称 ? value:定义标签值 </p><p>? size:定义输入字段的长度 </p><p>? maxlength:定义可输入最大字符个数 </p><p> </p><p> </p><p>password </p><p><input type=”password”> </p><p>定义密码字段。该字段中的字符被掩码. 其它常用属性: </p><p>? name:定义标签名称 ? value:定义标签值 </p><p>? size:定义输入字段的长度 </p><p>? maxlength:定义可输入最大字符个数 radio </p><p><input type=”radio”> 定义单选按钮。 其它常用属性: </p><p>? name:定义标签名称.注意，对于单选按钮，如果要想做到单一选择，多个</p><p>radion的name值必一样。 ? value:定义标签值 </p><p>? checked:定义该标签默认被选中。 </p><p>checkbox </p><p><input type=”checkbox”> 定义复选框。 其它常用属性: </p><p>? name:定义标签名称.注意，一组的checkbox它们的name值应该是一样的。 ? value:定义标签值 </p><p>? checked:定义该标签默认被选中。 </p><p>button </p><p><input type=”button”> </p><p>定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本） 其它常用属性: </p><p>? name:定义标签名称 ? value:按钮显示名称 </p><p>hidden </p><p><input type=”hidden”> 定义隐藏的输入字段。 其它常用属性: </p><p>? name:定义标签名称 ? value:定义标签值 </p><p>file </p><p><input type=”file”> </p><p>定义输入字段和 \浏览\按钮，供文件上传。 其它常用属性: </p><p> </p><p> </p><p>? name:定义标签名称 </p><p>submit </p><p><input type=”submit”> </p><p>定义提交按钮。提交按钮会把表单数据发送到服务器。 其它常用属性: </p><p>? name:定义标签名称 ? value:按钮显示名称 </p><p>reset </p><p><input type=”reset”> </p><p>定义重置按钮。重置按钮会清除表单中的所有数据。 其它常用属性: </p><p>? name:定义标签名称 ? value:按钮显示名称 </p><p>image </p><p><input type=”image”> </p><p>定义图像形式的提交按钮。 </p><p>这个标签主要是用了替换submit按钮，因为默认产生的提交按钮并不漂亮，这个标签允许你采用指定的图片做为提交按钮。 其它常用属性: </p><p>? name:定义标签名称 </p><p>? src:定义作为提交按钮显示的图像的url ? alt:定义作用图像的替代文本。 </p><p>select与option标签 1.<select> </p><p>用于定义一个下拉列表 </p><p> 常用属性: </p><p>? name:定义下拉列表的名称 </p><p>? size:定义下拉列表中可见选项的数目 ? multiple:定义可选择多个选项 2.<option> </p><p>用于定义下拉列表中的选项。 </p><p><option>需要位于<select>标签内部 </p><p> 常用属性: </p><p>? value:定义送往服务器的选项值 ? selected:定义选项为选中状态。 </p><p> </p><p>textarea标签 </p><p> <textarea>标签用于定义一个多行文本输入控件(多行文本框,文本域) 常用属性: </p><p>? name:定义多行文本框名称 </p><p> </p><p> </p><p>? cols:定义多行文本框可见宽度 ? rows:定义多行文本框可见行数 </p><p>? wrap:规定多行文本框中文字如何换行。 </p><p> </p><p>表单案例 案例说明: </p><p> </p><p>当我们输入信息后，点击注册按钮后，(method=”#” method=get),这时在浏览器地址栏上我们可以看到/demo11.html?id=001&username=tom&password=123&sex=?D&hobby=×??ò&province=oúáú?-ê?&city=1t??±?&email=tom@itcast.cn&f=&remark=who+are+you?# 这段信息，是我们向action属性指向的页面提交的信息。仔细观察就会发现红色标出来的，就是我们表单项的名称，而它们是以name=value的方式出现，也就是说，我们向action指定的url提交数据时，如果想要将数据携带，必须给表单项添加name属性。 </p><p>综合案例2-注册窗口 案例分析与实现: 对于注册页面，与我们之前做的显示商品信息布局差不多，也分成五部分，head menu search content foot,只是我们现在的content它主要是用于设计注册页面，其它的部分我们不需要改变，直接可以使用显示商品信息页面中的就可以。 下面我们分析一下，关于content中内容怎样实现： </p><p> </p><p></p><div class="page"><ul><li><a href=ythd_7jky001dio44p5d1brjq_1.html>1</a></li><li><a href=ythd_7jky001dio44p5d1brjq_2.html>2</a></li><li><a href=ythd_7jky001dio44p5d1brjq_3.html>3</a></li><li><a href=ythd_7jky001dio44p5d1brjq_4.html class="hover" >4</a></li><li><a href=ythd_7jky001dio44p5d1brjq_5.html>5</a></li><li><a href=ythd_7jky001dio44p5d1brjq_6.html>6</a></li></ul></div> <br /> <p><script type="text/javascript">s("content-m-bot");</script></p> </div> <div class="m-pages"></div> <div class="down-word"> <div class="word-ico"></div> <div class="word-tit"> <span class="docx">html笔记 - 图文.doc</span> <span>将本文的Word文档下载到电脑</span> <span><script type="text/javascript">s("content-m-down");</script></span> </div> <div class="word-pic"><a href="javascript:;">下载这篇word文档</a></div> </div> </article> <div class="art-prenext"> 搜索更多关于： <a class="title2" title="html笔记 - 图文" href="ys_02w038031030ob8rlc00w01900wh6mk1z_1.html">html笔记 - 图文</a> 的文档 </div> <div class="main-tab"><a class="on" href="javascript:;">相关推荐</a></div> <div class="tab-box"> <ul class="main-new on clearfix"> <li><a title="2019-2020年鲁科版高中化学必修二" href="ys_01e01c01d01l01901e01c01e01cinouwxo29mkoul4ffxgeui1yix1fsefik_1.html">2019-2020年鲁科版高中化学必修二</a></li><li><a title="“十三五”重点项目-硅橡胶导尿管项目可行" href="ys_6ccgg1fexfis6cdsstm9lu49nhq019nr9l0hph2i64i7zof5u49nhqgkvqx8_1.html">“十三五”重点项目-硅橡胶导尿管项目可行</a></li><li><a title="新方法能力验证确认报告(水质 叶绿素a的测定 分光光度法 H" href="ys_k34k3dlhxph9gbfuj0rltnserl0jhhgne014ldgrvs00wgl2p33ops02pnesll7i3e00wg7ag21g21ip2lhx00w020_1.html">新方法能力验证确认报告(水质 叶绿素a的测定 分光光度法 H</a></li><li><a title="小学6年级比较级和最高级" href="ys_i6ni1y01iinop0nlasscjp0ngp8kcgul4p0n_1.html">小学6年级比较级和最高级</a></li><li><a title="“五步公推”差额直选农村入党积极分子汇编" href="ys_6ccfisl7pg30joo6cdijyu59nhwsg9g4ckepg2tg2io33kg1g7ai1cldzp3q_1.html">“五步公推”差额直选农村入党积极分子汇编</a></li><li><a title="第十四届中环杯五年级决赛与详解" href="ys_obwgg1h5ni8affxmunkfjfisinop0ng4zrx7ff2rmur8j_1.html">第十四届中环杯五年级决赛与详解</a></li><li><a title="广西2015年下半年公路工程试验检测员公路检测模拟试题" href="ys_inzr5r01e01c01d01hinofezggainog30s1bijpo3vrmduj0kowll7gnsg30s1bkowll7kypjj3rmdu54_1.html">广西2015年下半年公路工程试验检测员公路检测模拟试题</a></li><li><a title="ArcGIS三维解决方案 - 图文" href="ys_01t03602r01z02102bfexp2sr8jg4zk3dklk00w01900wh6mk1z_1.html">ArcGIS三维解决方案 - 图文</a></li><li><a title="考软件设计师专题二编译原理" href="ys_pabsbzflirlqrkxikoff7u54fikp3qrm9ginmx2_1.html">考软件设计师专题二编译原理</a></li><li><a title="吕祖灵签解释（一百签）" href="ys_glxnyum7poe6r8jssq014feonemoe6015_1.html">吕祖灵签解释(一百签)</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 title="2013年上半年儿童发展心理学期末复习资料" href=ythd_3tpze1ci4i2i4cx3qilf_4.html>2013年上半年儿童发展心理学期末复习资料</a></li><li><a title="某住宅楼屋面施工方案（上人屋面 不上人屋面） - secret" href=ythd_4gzuc4fymh3fre38hic91cf865brly010kn_1.html>某住宅楼屋面施工方案（上人屋面 不上人屋面） - secret</a></li><li><a title="青冈镇第一季度矛盾纠纷排查调处分析报告" href=ythd_3l1bb0y33l77xpo57x05_1.html>青冈镇第一季度矛盾纠纷排查调处分析报告</a></li><li><a title="工程制图复习题(附答案)" href=ythd_90yn41t9fv9nplx1m54t1j03v4ivcy00ao0_2.html>工程制图复习题(附答案)</a></li><li><a title="html笔记 - 图文" href=ythd_7jky001dio44p5d1brjq_4.html>html笔记 - 图文</a></li><li><a title="原码，反码，补码总结" href=ythd_7i7kx30hf941z4g1ryul_1.html>原码，反码，补码总结</a></li><li><a title="作业习题" href=ythd_9b14m8dnt30c4dk2wbmr_2.html>作业习题</a></li><li><a title="某电厂一次供电设计2" href=ythd_7ccix0zi4z8jj339naf4_1.html>某电厂一次供电设计2</a></li><li><a title="视频信号放大器的设计" href=ythd_9afev0mg2e0zn011pbea_3.html>视频信号放大器的设计</a></li><li><a title="2012年全国大学生数学建模竞赛C题国家奖一等奖优秀论文" href=ythd_60ic14sd0a6gjog0oac3_1.html>2012年全国大学生数学建模竞赛C题国家奖一等奖优秀论文</a></li><li><a title="宜宾县村级公共服务和社会管理改革试点工作手册 - 图文" href=ythd_7uj6d31eu42b61z989jq_6.html>宜宾县村级公共服务和社会管理改革试点工作手册 - 图文</a></li><li><a title="天津大学硕士学位论文模版 - 图文" href=ythd_8at390fih81symv1jbvq_9.html>天津大学硕士学位论文模版 - 图文</a></li><li><a title="流行病学习题集" href=ythd_6riv00pw4b4c2db0067d_8.html>流行病学习题集</a></li><li><a title="专升本《结构力学》" href=ythd_7n3nq05uyh036aw5tvxo0daes3y30z00x1s_5.html>专升本《结构力学》</a></li><li><a title="2017-2022年中国衣柜市场运营态势研究报告（目录） - 图文" href=ythd_6c73p0hr120sr9z0p01l1xu1x81dzc00o54_2.html>2017-2022年中国衣柜市场运营态势研究报告（目录） - 图文</a></li><li><a title="新视野大学英语视听说教程(第二版)第三册答案6-10单元" href=ythd_3lejv48u679epjx24qwd4i6jo0x1tb0126o_3.html>新视野大学英语视听说教程(第二版)第三册答案6-10单元</a></li><li><a title="项目开发设计报告 - 图文" href=ythd_7yzjd4v2vl4ncj33rqm7_5.html>项目开发设计报告 - 图文</a></li><li><a title="2015年语文中考复习 - 2014年中考试题汇编之名句默写" href=ythd_040zv3qoql5uqa87qs2p_10.html>2015年语文中考复习 - 2014年中考试题汇编之名句默写</a></li><li><a title="国际货物运输与保险试题库" href=ythd_0bs8t2n0gn58u602wq68_2.html>国际货物运输与保险试题库</a></li><li><a title="滚动轴承制作工艺考试内容" href=ythd_09csq4n0xd02ra71xnbv_1.html>滚动轴承制作工艺考试内容</a></li> </ul> </div> </div> <footer class="footer"> <p class="bt-links"><a href="https://m.yuntihai.com/">手机版</a><span class="v-line">|</span><a href="https://www.yuntihai.com/">PC版</a><span class="v-line">|</span><a href='/update.html'>最新更新</a><span class="v-line">|</span><a href='https://www.xuekeyun.com/'>学科云</a></p> <p>Copyright © 2021-2025 云题海 版权所有<br/> 声明 :本网站尊重并保护知识产权，根据《信息网络传播权保护条例》，如果我们转载的作品侵犯了您的权利,请在一个月内通知我们，我们会及时删除。<br>客服QQ：370150219 邮箱：370150219@qq.com<br> <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">苏ICP备16052595号-3</a> </p> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?ba4893542539f4c5d80474ef78f6ce5e"; 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> </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="downtit">下载本文档需要支付 <i>10</i> 元</p> <p class="chose"><span>支付方式：</span><span class="pay1"><img src="https://www.yuntihai.com/img/wxpay.jpg" class="over"></span> <span class="pay2"><img src="https://www.yuntihai.com/img/alipay.jpg"></span></p> <div class="youke_pay"> <div class="wxpay"><a href="javascript:;">微信支付并下载</a></div> <div class="alipay" style="display:none;"><a href="javascript:;">支付宝支付并下载</a> </div> </div> <p class="tiaozhuan"><a href="https://www.yuntihai.com/user/index.php" style="color:blue;">开通VIP包月会员</a> 特价：<b style="color:red;">29元/月</b></p> <p class="downtxt">注：下载文档有可能“只有目录或者内容不全”等情况，请下载之前注意辨别，如果您已付费且无法下载或内容有问题，请联系我们协助你处理。<br>微信：xuecool-com QQ：370150219</p> </div> </div> <div class="theme-popover-mask"></div> <script type="text/javascript"> //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 type="text/javascript"> $(".user-login").click(function () { $(".drop-menu").toggle(); }); </script> <script type="text/javascript"> $(".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"> var userinfo = function(data) { if (data.code === "2" || data.code === "3") { $(".word-pic a").click(function(){ $(".theme-popover-mask").fadeIn(100); $(".theme-popover").slideDown(200); var downid = "7jky001dio44p5d1brjq" $(".wxpay a").click(function(){ var readurl = 'https://www.yuntihai.com/plus/view.php&psrc='; var downurl = 'https://www.yuntihai.com/d.asp?id='; var payurl = readurl; payurl = payurl.replace('view.php', 'pay/pay-wx.asp?id=7jky001dio44p5d1brjq'); var gotourl = payurl + downurl + downid location.href = gotourl; }) $(".alipay a").click(function(){ var readurl = 'https://www.yuntihai.com/plus/view.php&psrc='; var downurl = 'https://www.yuntihai.com/d.asp?id='; var payurl = readurl; payurl = payurl.replace('view.php', 'pay/pay-zfb.asp?id=7jky001dio44p5d1brjq'); var gotourl = payurl + downurl + downid location.href = gotourl; }) }); } else{ $(".word-pic a").click(function(){ location.href = "https://www.yuntihai.com/d.asp?id=7jky001dio44p5d1brjq"; }); } } $(document).ready(function($) { $(".theme-poptit .close").click(function(){ $(".theme-popover-mask").fadeOut(100); $(".theme-popover").slideUp(200); }); }); </script> <script src="https://www.yuntihai.com/user/check_level_m.php?callback=userinfo"></script> <script src="https://m.yuntihai.com/js/gobacktop.js" type="text/javascript"></script> </body> </html>