﻿<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/"><channel><title>BlogJava-早餐2块2-文章分类-web</title><link>http://www.blogjava.net/formatmyself/category/4448.html</link><description>if(!java.isExist()) boss.fireOut(me);</description><language>zh-cn</language><lastBuildDate>Wed, 28 Feb 2007 03:46:11 GMT</lastBuildDate><pubDate>Wed, 28 Feb 2007 03:46:11 GMT</pubDate><ttl>60</ttl><item><title>The "label" tag in Html</title><link>http://www.blogjava.net/formatmyself/articles/66200.html</link><dc:creator>早餐2块2</dc:creator><author>早餐2块2</author><pubDate>Mon, 28 Aug 2006 07:51:00 GMT</pubDate><guid>http://www.blogjava.net/formatmyself/articles/66200.html</guid><wfw:comment>http://www.blogjava.net/formatmyself/comments/66200.html</wfw:comment><comments>http://www.blogjava.net/formatmyself/articles/66200.html#Feedback</comments><slash:comments>0</slash:comments><wfw:commentRss>http://www.blogjava.net/formatmyself/comments/commentRss/66200.html</wfw:commentRss><trackback:ping>http://www.blogjava.net/formatmyself/services/trackbacks/66200.html</trackback:ping><description><![CDATA[以前一直没有留意html里的“label”标签。 直到开始使用DW8，在插入input时总会有label标签设置的提示，才看了一下他的作用。 没想到，还是比较有用的 
<meta http-equiv="Conten-Type" content="text/html; charset=gb2312" /><style type="text/css"><![CDATA[
.reOperate tr
{
    height:40px;
}

.strOperate button
{
    margin-left:20px;
}

.hint td
{
    padding-top:5px;
    border-bottom:1px dashed skyblue;
    border-width:0px 0px 1px 0px;
}

input
{
    width:80px;
    border-bottom:1px dashed blue;
    border-width:0px 0px 1px 0px;
}
]]&gt;</style><span style="WIDTH: 500px"><div><b>待测文字(str):</b></div><textarea id="strObj" style="OVERFLOW: auto; WIDTH: 400px; HEIGHT: 450px" cols="28">										&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
  
&lt;h3&gt;点击label内文字，即可选中表单元素&lt;/h3&gt;
&lt;p&gt;看看下面的选择框范例，它的微妙之处在于，选择项目时不必非得在框内点击鼠标了，在文本上选择即可。&lt;/p&gt;
&lt;p&gt;以前一直是用js，在文字上加事件来处理:( 现在方便了:)&lt;/p&gt;
&lt;div style="border:1px solid #ccc; background-color: #eeeeff; padding: 10px;"&gt;
&lt;form&gt;
  &lt;label for="check1"&gt;经常来这里&lt;/label&gt;
&lt;input type="checkbox" id="check1" value="often" name="checkoften"&gt;
  &lt;label for="check2"&gt;偶尔来看看&lt;/label&gt;
&lt;input type="checkbox" id="check2" value="seldom" name="checkseldom"&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;hr /&gt;
&lt;h3&gt;给输入框增加快捷键&lt;/h3&gt;
&lt;p&gt;通常我们在使用form表单时，实现聚焦一般得用鼠标在form框中点选。&lt;br /&gt;
  使用label标签，可以象windows菜单一样，首字符有下划线，用“ALT+首字符”就可以将光标定位在form框内了。
&lt;/p&gt;
&lt;div style="border:1px solid #ccc; background-color: #eeeeff; padding: 10px;"&gt;
&lt;form&gt;
  &lt;label for="Namebox" accesskey="n"&gt;&lt;u&gt;N&lt;/u&gt;ame:&lt;/label&gt;&lt;input type="text" id="Namebox"&gt;
  &lt;label for="Emailbox" accesskey="e"&gt;&lt;u&gt;E&lt;/u&gt;mail:&lt;/label&gt;&lt;input type="text" id="Emailbox"&gt;
  &lt;label for="Phonebox" accesskey="p"&gt;&lt;u&gt;P&lt;/u&gt;hone:&lt;/label&gt;&lt;input type="text" id="Phonebox"&gt;
  &lt;label for="City"&gt;&lt;u&gt;c&lt;/u&gt;ity&lt;/label&gt;
  &lt;select name="select" accesskey="c" id="City"&gt;
  $nbsp$$nbsp$&lt;option&gt;Beijing&lt;/option&gt;
$nbsp$$nbsp$&lt;option&gt;Tianjin&lt;/option&gt;
  &lt;/select&gt;
  &lt;label for="areabox" accesskey="s"&gt;&lt;u&gt;S&lt;/u&gt;uggest:&lt;/label&gt;&lt;textarea id="areabox" cols="20" rows="3"&gt;&lt;/textarea&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;p&gt;说明：&lt;br /&gt;
&lt;ul&gt;
&lt;li&gt;label标签中的for属性和表单元素的id属性要一致。&lt;/li&gt;
&lt;li&gt;accesskey属性用来设置“热键”。 &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

								</textarea><div class="strOperate" style="MARGIN-TOP: 20px"><button onclick="clearCode($('strObj'));">Clear</button><button onclick="cutCode($('strObj'))  ">Cut</button><button onclick="copyCode($('strObj')) ;">Copy</button><button onclick="pasteCode($('strObj'));">Paste</button><button onclick="$('file').click();">Read</button><button onclick="saveCode($('strObj')) ;">Save</button><button onclick="runCode($('strObj'))  ">Run</button><input id="file" style="DISPLAY: none" type="file" onchange="readCode(this)" /><iframe id="iframe" style="DISPLAY: none" name="iframe"></iframe></div></span><span style="MARGIN-LEFT: 50px; VERTICAL-ALIGN: top; WIDTH: 400px"><div><b>正则操作:</b></div><table class="reOperate"><tbody><tr><td><input id="testRe" />.test(str) </td><td><button onclick="test()">条件测试</button></td></tr><tr><td><input id="execRe" />.exec(str) </td><td><button onclick="exec()">执行匹配</button></td></tr><tr><td>str.match(<input id="matchRe" />) </td><td><button onclick="match()">查找匹配</button></td></tr><tr><td>str.replace(<input id="replRe" /> , <input id="replObj" />) </td><td><button onclick="replace()">替换字符</button></td></tr></tbody></table><table class="hint" style="MARGIN-TOP: 15px; FONT-SIZE: 13px"><tbody><tr><td><b>操作提示:</b></td></tr><tr><td>待测文字(str): </td><td>可以是任何字符或整个文件的内容<br />例如:<font color="blue"> 无忧脚本http://www.51js.com</font></td></tr><tr><td>正则表达式: </td><td>如果不用<font color="red">i,m,g</font>属性,前后的<font color="red">/</font>可省略 , 例如:<br />replace区输入<font color="teal">/&lt;.+?&gt;/g</font> --删除所有HTML标记<br />match区输入<font color="teal">[\u4e00-\u9fa5]</font> --弹出第1个中文 </td></tr><tr><td>替换的字符: </td><td>例如: <font color="purple">$1abc</font> 用第1个子匹配的结果加上abc替换 </td></tr><tr><td>test: </td><td>返回Ture或False </td></tr><tr><td>exec: </td><td>返回一个包含整个匹配及子匹配的数组或null </td></tr><tr><td>match: </td><td>如果不是全局匹配,跟exec一样,否则:<br />返回一个所有匹配的数组或null,不包括子匹配 </td></tr><tr><td>replace: </td><td>返回正则替换后的字符串的复制 <br />如replace区第2条横线不输入内容,<font color="blue"> 替换为空</font><br />替换结果<font color="blue"> 在待测文字框中显示</font></td></tr></tbody></table><div style="MARGIN-TOP: 15px; TEXT-ALIGN: right"></div></span><script language="javascript"><!--
var $ = function (id)
{
    return document.getElementById(id);
}

/*===============================待测文字操作==============================*/

function clearCode(obj)
{
    obj.value='';
}

function cutCode(obj)
{
    obj.select();
    document.execCommand("Cut");
}

function copyCode(obj)
{
    obj.select();
    document.execCommand("Copy");
}

function pasteCode(obj)
{
    obj.value+=clipboardData.getData('Text');
}

function saveCode(obj)
{
    with ( window.open('','_blank','top=800').document ) write(obj.value),execCommand('saveAs','','code.html');
}

function runCode(obj)
{
    window.open('','_blank').document.write(obj.value);
}

function readCode(file)
{
    $("iframe").src=file.value;
    setTimeout("$('strObj').value=iframe.document.documentElement.outerHTML",100);
}

/*===============================正则匹配操作==============================*/

var re, str;

var check = function (reObj)
{
    var strRE=$(reObj).value;
    str=$("strObj").value;
    if (str=='')     { alert("待测文字不能为空!");   return false;  };
    if (strRE=='')   { alert("正则输入框不能为空!"); return false;  };
    re= /^\/.+[\/img]$/.test(strRE) ? eval(strRE) : new RegExp(strRE);
    return true;
}

function test()
{
    if (!check("testRe")) return;
    var result=re.test(str);
    alert(result);
}

function exec()
{
    if (!check("execRe")) return;
    var result=re.exec(str);
    alert(result?result.join("\n====================================================\n"):result);
}

function match()
{
    if (!check("matchRe")) return;
    var result=str.match(re);
    alert(result?result.join("\n====================================================\n"):result);
}

function replace()
{
    if (!check("replRe")) return;
    var replStr=$("replObj").value;
    var result=str.replace(re,replStr);
    $("strObj").value=result;
}
//--></script><img src ="http://www.blogjava.net/formatmyself/aggbug/66200.html" width = "1" height = "1" /><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/formatmyself/" target="_blank">早餐2块2</a> 2006-08-28 15:51 <a href="http://www.blogjava.net/formatmyself/articles/66200.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div>]]></description></item></channel></rss>