笔记：JS权威指南18章—表单和表单元素
document.forms[document.forms.length-1];// 引用文档的最后一个表单 ?
document.forms[1].ekement[2];// 引用文档的第二个表单的第三个元素 ?
document.everythingdocument.forms[0]document.address.zipcode;// 引用 address 表单的 zipcode 项 ?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>包含所有表单元素的HTML表单</title></head><body><form name="everything"> <table border="border" cellpadding="5"><tr> <td>用户名：<br />[1]<input type="text" name="username" size="15" /></td> <td>密码：<br />[2]<input type="password" name="password" size="15" /></td> <td rowspan="4">输入事件[3]<br /><textarea name="textarea" rows="20" cols="28"></textarea> </td> <td rowspan="4" align="center" valign="center">[9]<input type="button" value="清除" name="clearbutton" /><br />[10]<input type="submit" name="submitbutton" value="提交" /><br />[11]<input type="reset" name="resetbutton" value="重置" /><br /> </td></tr><tr> <td colspan="2">文件名：[4]<input type="file" name="file" size="15" /></td></tr><tr><td>我的计算机外部设备：<br /> [5]<input type="checkbox" name="extras" value="burner" />DVD Write<br /> [5]<input type="checkbox" name="extras" value="printer" />打印机<br /> [5]<input type="checkbox" name="extras" value="card" />读卡器<br /> </td> <td>我的浏览器：<br /> <input type="radio" name="browser" value="ie" />IE浏览器<br /> <input type="radio" name="browser" value="ff" />火狐浏览器<br /> <input type="radio" name="browser" value="other" />其他浏览器<br /> </td></tr> <tr><td>我的爱好：<br /> <select multiple="multiple" name="hobbers" size="4"> <option value="programming">编写JS</option><option value="caffeine">喝咖啡</option><option value="annoying">和朋友玩</option> </select></td><td align="center" valign="center">我最喜欢的颜色：<br /> <select name="color"> <option value="red">红色</option> <option value="blue">蓝色</option> <option value="violet">紫罗兰</option> </select></td></tr> </table></form><div align="center"> <table border=“4” bgcolor="pink" cellspacing="4"> <tr> <td align="center"><b>Form Element</b></td> <td>[1]Text</td> <td>[2]Psssword</td> <td>[3]Textarea</td> <td>[4]FileU</td> <td>[5]Checkbox</td> </tr> <tr> <td>[6]Radio</td> <td>[7]Select (list)</td> <td>[8]Select (menu)</td> <td>[9]Button</td> <td>[10]Submit</td> <td>[11]Reset</td> </tr></table></div></body><script type="text/javascript">function report(element, event) {if ((element.type == "select-one") || (element.type == "select_multiple")) {value = " ";for(var i = 0; i < element.options.length; i++){if (element.options[i].selected)value += element.options[i].value + " ";}}else if (element.type == "textarea") value += "...";else value = element.value;var msg = event + ": " + element.name + "（" + value + "）\n";var t = element.form.textarea;t.value = t.value + msg;}function addhandlers(f) {for(var i = 0; i < f.elements.length; i++) {var e = f.elements[i];e.onclick = function() { report(this, "click"); }e.onchange = function() { report(this, "change"); }e.onfocus = function() { report(this, "foucs"); }e.onblur = function() { report(this, "blur"); }e.onselect = function() { report(this, "select"); }}f.submitbutton.onclick = function() {report(this, 'click');return false;}f.clearbutton.onclick = function() {this.form.textarea.value = '';report(this, 'click');}f.resetbutton.onclick = function() {this.form.reset();report(this, 'click');return false;}}addhandlers(document.everything);</script></html>
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>为HTML表单添加表单验证</title><style type="text/css">input .invalid { background:#faa;}input .valid { background:#afa; }</style></head><body><form>名字：<input type="text" name="name" required /><br />邮箱：<input type="text" name="email" pattern="^\s*\w+@\w+\.\w+\s*$" /><br />邮编：<input type="text" name="zip" pattern="^\s*\d{6}\s*$" /><br />未通过验证：<input type="text" /><br /><input type="submit" /></form></body><script type="text/javascript">//无干扰的javascript表单自动验证(function() {if (window.addEventListener) window.addEventListener("load", init, false);else if (window.attachEvent) window.attachEvent("onload", init);function init() {for(var i = 0; i < document.forms.length; i++) {var f = document.forms[i];var needsValidation = false;for(j = 0; j < f.elements.length; j++) {var e = f.elements[j];if (e.type != "text") continue;var pattern = e.getAttribute("pattern");var required = e.getAttribute("required") != null;if (required && !pattern) {pattern = "\\S";e.setAttribute("pattern", pattern);}if (pattern) {e.onchange = validateOnChange;needsValidation = true;}}if (needsValidation) f.onsubmit = validateOnSubmit;}}function validateOnChange() {var textfield = this;var pattern = textfield.getAttribute("pattern");var value = this.value;if (value.search(pattern) == -1) textfield.className = "invalid";else textfield.className = "valid";}function validateOnSubmit() {var valid = false;for(var i = 0; i < this.elements.length; i++) {var e = this.elements[i];if (e.type == "text" && e.onchange == validateOnChange) {if (e.className == "invalid") invalid = true;}}if (invalid) {alert("表单未完成或存在错误的输入项,\n请修改高亮域后重试！");return false;}}})();</script></html>??
?