form标签里面常见属性有两种：action:这个是表单提交给某服务器的地址。method:用什么方式提交。通常我们常见的是：get（得到、成为）和post这两种，区别就是用户在写信息时显示的是明文还是暗文。
<!DOCTYPE html><html><head><meta charset="utf-8"><style type="text/css">form {margin:10px auto;width:400px;padding:40px;font-size:14px;font-family:Arial, Helvetica, sans-serif;border-radius:10px;background-color:#366;font-weight:bold;color:#FFF;}form label {display:block;padding:5px;}form label span {width:20%;display:inline-block;font-family:"宋体";font-size:16px;text-align:right;}form label input {line-height:22px;height:25px;border:3px solid #f90;width:70%;}form label input:focus {border:3px solid #f00;outline:none;}form input[type=submit] {margin-left:22%;margin-top:20px;width:100px;border:3px solid #f00;background-color:#f00;font-size:18px;letter-spacing:5px;color:#fff;font-weight:bold;}form #error{border:1px solid #999;background-color:#ccc;font-size:12px;color:#f00;padding:5px;line-height:18px;}</style><script type="text/javascript">function addError(err){document.getElementById("error").innerHTML += "* "+err+"<br />";}function clearError(){document.getElementById("error").innerHTML = "";}function invalidHandler(evt){// 获取出错元素的ValidityState对象var validity = evt.srcElement.validity;var str="";// 如果有自定义的提示信息，则使用它来提示if(validity.customError){str = evt.srcElement.validationMessage;}else{// 以下是检测的ValidityState对象的各个属性，以判断具体错误if(validity.valueMissing){str+="不能为空；";}if(validity.typeMismatch){str+="与类型不匹配；";}if(validity.patternMismatch){str+="与pattern正则不匹配；";}if(validity.tooLong){str+="字符过长；";}if(validity.rangeUnderflow){str+="不能小于最小值；";}if(validity.rangeOverflow){str+="不能大于最大值；";}if(validity.stepMismatch){str+="不符合step特性所推算出的规则；";}// 使用表单元素的title特性值来组合提示信息str = evt.srcElement.title + str;}// 添加错误提示addError(str);// 阻止事件冒泡evt.stopPropagation();// 取消后续的浏览器默认的处理方式evt.preventDefault();}window.onload=function(){var register=document.getElementById("register");// 注册监听表单中的invalid事件，捕获到错误即处理register.addEventListener("invalid",invalidHandler,true);// 为年龄项添加自定义错误提示信息document.getElementById("age").setCustomValidity("年龄不能通过验证！");}</script></head><body><form id="register" name="register"><label for="firstName"><span>姓名</span><input name="firstName" type="text" title="姓名" placeholder="请输入您的姓名" required /></label><label for="age"><span>年龄</span><input id="age" name="age" type="range" min="0" max="99" step="1" value="20" onchange="displayAage.value=this.value" /><output name="displayAage">20</output></label><label for="emailaddress"><span>邮箱</span><input type="email" name="emailaddress" title="邮箱" placeholder="请输入您的邮箱" required /></label><label for="weibo"><span>微博</span><input type="url" name="weibo" title="微博" placeholder="请输入您的微博地址" required /></label><label for="graduation"><span>毕业时间</span><input name="graduation" type="date" title="毕业时间" placeholder="请输入您的毕业时间" /></label><label for="score"><span>考试成绩</span><input name="score" type="number" title="考试成绩" placeholder="请输入您的考试成绩" min="0" max="10" step="0.2" /></label><label for="country"><span>国家</span><input name="country" type="text" title="国家" list="countries" /></label><datalist id="countries"><option value="Australia">Australia</option><option value="Germany">Germany</option><option value="United Kingdom">United Kingdom</option><option value="United States">United States </option></datalist><input type="submit" name="submit" value="提交" onclick="clearError()" /><div id="error"></div></form></body></html>
