标签for属性与对应的id之关系_css

Dreamweaver8 标签for属性与对应的id之关系

<label>标签的功能是使浏览器用焦点矩形呈现在与表单对象关联的文本，使得用户可通过关联文本的任意位置，而不仅是在表单对象上，单击来选择该表单。

在DW8中插入表单元素，会弹出【输入标签辅助功能属性】对话框，使用”for”属性附加标签标记时，会在插入的表单项的两侧边（前侧或后侧）添加一个标签标记“<label>…</label>”

比如，在下面例子中直接单击文本“用户名”就可同样选中表单元素。

运行代码框
<form><label for=”cn_bruce”>用户名</label><input type=”text” name=”cn_bruce” accesskey=”c” id=”cn_bruce” /></form>[/code]<br /><input onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span></p> <p><span>主要就是 label 属性 for=”cn_bruce” 而 input 属性 id=”cn_bruce”，此为关联。</span></p> <p><span>但使用DW8进行插入时，默认的 input 的 name 和 id 属性是相同的“textfield n(n=Φ，1，2，……)”</span></p> <p><span></span><span>但很显然，在插入完表单对象后，需要重新编辑表单项的“名称”，比如修改“textfield”为“cn_bruce”</span></p> <p><span>则，表单项的name 和 id 一起修改为“cn_bruce”</span></p> <p><span>然而默认的标签label的 for 属性值还是 “textfield”，如果要实现 label 的功能就必须手动修改 for 的值</span></p> <p><span>不过，相同的设置在对 radio 单选框进行设置时，却是能保证 label 的 for 属性值一直与对应的 表单项的 id值吻合</span></p> <p><span>主要原因就是，当对radio 进行 name 属性值修改时，其对于的id 值是不变的。</span></p> <p><span><strong>为什么不变？</strong></span></p> <p><span>首先，radio 也就是单选框的功能是 多个当中选择一个，那么怎么区别许多的 radio 是一个组里面的，就从这一组中选择某一个。那么<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/html" title="html" rel="nofollow" target="_blank">html</a>标签就是要求，这许多的单选按钮要想是一个组里面的，必须要求其 name 属性值一样，比如下面的三个radio的name值都为“s”，则是一个组的。</span></p> <p><span>运行代码框<br /><span><textarea style="WIDTH: 510px; HEIGHT: 66px">男 <input type=”radio” name=”s” value=”n” />女 <input type=”radio” name=”s” value=”v” />妖 <input type=”radio” name=”s” value=”y” />[/code]<br /><input onclick=runCode() type=button value=运行代码> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]</span></span></p> <p><span><span>那么只要一个name不同，则不属于一个组</span></span></p> <p><span><span>OK，一直说明的是 radio 要求 name 值一样，再切到话题</span></span></p> <p><span><span>因为上面其他的表单项在改变name属性值时自动改变id值</span></span></p> <p><span><span>那么，如果radio也是改变name属性值时自动改变id值，因为radio的name值的一样，所以势必使得id值也一样</span></span></p> <p><span><span>但，id属性值能一样么？id就是网页文档中网页元素对象的身份证号，是不建议相同的，所以，radio 的 id值就保持不变</span></span></p><div><div class="_t33rkthes8f"></div><script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6795179",container: "_t33rkthes8f",async: true});</script></div> <p><span><span>所以，radio 对应的 label 标签的 for属性值 也就与之吻合</span></span></p> <p><span><span>故，在Dreamweaver8中创建表单项时，其<label>标签的for属性值不能始终对应其表单项的ID值，为后来的编辑带来些麻烦。</span></span></p> <p><span><span>所以，在DW8 中操作label和表单项：</span></span></p> <p><span><span><strong>要不就是使得 <label>标签的for属性值随着表单项id 值的变化而变化</strong></span></span></p> <p><span><span><strong>要不就是在修改表单项name属性的同时，保持id属性值不变（如radio）</strong></span></span></p> <p>欢迎大家阅读<span style='color:red;'>《标签for属性与对应的id之关系_<a href="https://www.gaodaima.com/go.html?url=http://www.gaodaima.com/tag/css" title="css" rel="nofollow" target="_blank">css</a>》</span>,跪求各位点评,若觉得好的话请收藏本文，by <strong>搞代码</strong></p> <hr /><div class="open-message">搞代码网（<a href="www.gaodaima.com" target="_blank" title="gaodaima.com">gaodaima.com</a>）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱<a>chengxuyuan@gaodaima.com‍</a>，我们会在看到邮件的第一时间内为您处理，或直接联系<a>QQ：872152909</a>。本网站采用<a href="https://www.gaodaima.com/go.html?url=http://creativecommons.org/licenses/by-nc-sa/3.0/" rel="nofollow" target="_blank" title="BY-NC-SA授权协议">BY-NC-SA</a>协议进行授权 <br >转载请注明原文链接：<a href="https://www.gaodaima.com/22428.html" target="_blank" title="标签for属性与对应的id之关系_css">标签for属性与对应的id之关系_css</a><a id="spreadAds" target="_blank" href="" onclick="spreadAds()"></a><a id="spreadAds2" target="_blank" href=""></a> </div> </p> <div class="article-social"> <a href="javascript:;" data-action="ding" data-id="22428" id="Addlike" class="action"><i class="fa fa-heart-o"></i>喜欢 (<span class="count">0</span>)</a><span class="or"><style>.article-social .weixin:hover{background:#fff;}</style><a class="weixin" style="border-bottom:0px;font-size:15pt;cursor:pointer;">赏<div class="weixin-popover"><div class="popover bottom in"><div class="arrow"></div><div class="popover-title"><center>[搞代码]</center></div><div class="popover-content"><img width="200px" height="200px" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png" ></div></div></div></a></span><span class="action action-share bdsharebuttonbox"><i class="fa fa-share-alt"></i>分享 (<span class="bds_count" data-cmd="count" title="累计分享0次">0</span>)<div class="action-popover"><div class="popover top in"><div class="arrow"></div><div class="popover-content"><a href="#" class="sinaweibo fa fa-weibo" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_qzone fa fa-star" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="qq fa fa-qq" data-cmd="sqq" title="分享到QQ好友"></a><a href="#" class="bds_renren fa fa-renren" data-cmd="renren" title="分享到人人网"></a><a href="#" class="bds_weixin fa fa-weixin" data-cmd="weixin" title="分享到微信"></a><a href="#" class="bds_more fa fa-ellipsis-h" data-cmd="more"></a></div></div></div></span></div> </article> <footer class="article-footer"> <div class="article-tags"><i class="fa fa-tags"></i><a href="https://www.gaodaima.com/tag/html" rel="tag">html</a></div></footer> <nav class="article-nav"><div class="_d13vl98i0pw"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795176", container: "_d13vl98i0pw", async: true });</script> </nav><div id="donatecoffee" style="overflow:auto;display:none;"><img width="400" height="400" alt="支持作者一杯咖啡" src="http://www.gaodaima.com/wp-content/uploads/hai_AliPay.png"></div> <div class="related_top"> <div class="related_posts"><ul class="related_img"> <li class="related_box" > <a href="https://www.gaodaima.com/432144.html" title="Java中如何调用静态方法及非静态方法呢？" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/1.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java中如何调用静态方法及非静态方法呢？" /><br><span class="r_title">Java中如何调用静态方法及非静态方法呢？</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/432139.html" title="Java基础类型占用大小说明" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/10.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Java基础类型占用大小说明" /><br><span class="r_title">Java基础类型占用大小说明</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/431438.html" title="Flask框架如何使用HTML模板" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/8.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="Flask框架如何使用HTML模板" /><br><span class="r_title">Flask框架如何使用HTML模板</span></a> </li> <li class="related_box" > <a href="https://www.gaodaima.com/431362.html" title="django怎么加载html页面" target="_blank"><img class="thumb" style="width:185px;height:110px" data-original="https://www.gaodaima.com/wp-content/themes/Git-alpha/timthumb.php?src=https://www.gaodaima.com/wp-content/themes/Git-alpha/assets/img/pic/9.jpg&h=110&w=185&q=90&zc=1&ct=1" alt="django怎么加载html页面" /><br><span class="r_title">django怎么加载html页面</span></a> </li> </ul><div class="relates"><div class="_mw9fz31sqco"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6795180", container: "_mw9fz31sqco", async: true });</script><ul><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431346.html">django需要html吗</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431256.html">Django怎么加载HTML</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/431179.html">django页面跳转HTML怎么写</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/430936.html">简单粗暴的使用lxml从网页HTML/XML中提取数据</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/430922.html">小白福利，python爬虫系列之xpath：html解析神器</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/430911.html">举例实现HTMLParser解析HTML</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/430854.html">一文搞定Xpath简单高效的提取HTML数据</a></li><li><i class="fa fa-minus"></i><a href="https://www.gaodaima.com/430239.html">python去除html标签</a></li></ul></div></div> </div> <div id="comment-ad" class="banner banner-related"><div class="_9madbukio7r"></div><script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6677406", container: "_9madbukio7r", async: true });</script><!-- 多条广告如下脚本只需引入一次 --><script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script></div> <div id="respond" class="no_webshot"> <form action="https://www.gaodaima.com/asdloie8574asdqwexzxdqwertasdqwe.php" method="post" id="commentform"> <div class="comt-title"> <div class="comt-avatar pull-left"> <img src="https://cdn.v2ex.com/gravatar/?s=50" class="avatar avatar-108"> </div> <div class="comt-author pull-left"> 发表我的评论 </div> <a id="cancel-comment-reply-link" class="pull-right" href="javascript:;">取消评论</a> </div> <div class="comt"> <div class="comt-box"> <textarea placeholder="说点什么吧…" class="input-block-level comt-area" name="comment" id="comment" cols="100%" rows="3" tabindex="1" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};">