原文来自：

Simple Tricks for More Usable Forms

1.打开页面某表单元素即获得焦点，甭使用 onload，其他脚本可能也需要。使用这样的代码

</p> <p><script type="text/javascript"></p> <p>addEvent(window, 'load', function() { document.getElementById('myfield').focus() }); </p> <p>function addEvent(obj, evType, fn){</p> <p> if (obj.addEventListener){</p> <p> obj.addEventListener(evType, fn, true);</p> <p> return true; </p> <p> } else if (obj.attachEvent){</p> <p> var r = obj.attachEvent("on"+evType, fn);</p> <p> return r; </p> <p> } else {</p> <p> return false; } }</p> <p></script></p> <p>

2.使用 label，还可以给label 加上 cursor:poiter 样式。

3.给用户一些提示信息，比如

</p> <style type="text/css"> <p> input { border: 2px solid #ccc; }</p> <p> input:focus { border: 2px solid #000; } </p> </style> <p>

IE不行，需要js处理。

</p> <p><script type="text/javascript"></p> <p>addEvent(window, 'load', function() {</p> <p> var input, textarea;</p> <p> var inputs = document.getElementsByTagName('input');</p> <p> for (var i = 0; (input = inputs[i]); i++) {</p> <p> addEvent(input, ‘focus’, oninputfocus);</p> <p> addEvent(input, ‘blur’, oninputblur); </p> <p> }</p> <p> var textareas = document.getElementsByTagName(’textarea’);</p> <p> for (var i = 0; (textarea = textareas[i]); i++) {</p> <p> addEvent(textarea, ‘focus’, oninputfocus);</p> <p> addEvent(textarea, ‘blur’, oninputblur); } </p> <p> });</p> <p>function oninputfocus(e) {</p> <p> /* Cookie [9]-cutter code to find the source of the event */</p> <p> if (typeof e == ‘undefined’) {</p> <p> var e = window.event; </p> <p> }</p> <p> var source;</p> <p> if (typeof e.target != ‘undefined’) {</p> <p> source = e.target; </p> <p> } else if (typeof e.srcElement != ‘undefined’) {</p> <p> source = e.srcElement; </p> <p> } else {</p> <p> return; </p> <p> }</p> <p> /* End cookie-cutter code */</p> <p> source.style.border=’2px solid #000′; </p> <p> }</p> <p>function oninputblur(e) { /* Cookie-cutter code to find the source of the event */</p> <p> if (typeof e == ‘undefined’) {</p> <p> var e = window.event; </p> <p> }</p> <p> var source;</p> <p> if (typeof e.target != ‘undefined’) {</p> <p> source = e.target; </p> <p> } else if (typeof e.srcElement != ‘undefined’) {</p> <p> source = e.srcElement; </p> <p> } else {</p> <p> return;</p> <p> }</p> <p> /* End cookie-cutter code */</p> <p> source.style.border=’2px solid #ccc’;</p> <p>} </p> <p></script></p> <p>

4.其他小玩意,比如

onfocus=”this.select()”

onkeyup=”document.title = ‘New item: ‘ + this.value”

等,这段正则有意思（空格环成下划线）

</p> <input type="text" name="title" id="title" size="30" onkeydown="document.getElementById('url').value = this.value.replace(/[^a-z0-9 ]/ig, '').replace(/ /g, '_')"> <input type="text" name="url" id="url" size="30"> <p> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

5.表单验证…