HTML5系列代码：用户注册页面

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>

HTML5系列代码：用户注册页面相关推荐

html5用代码实现页面跳转页面跳转,H5上滑跳转页面的实现（代码实例）
本文给大家介绍H5上滑跳转页面的实现,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 方法一:movePage($('body')); function movePage(dom) ...
HTML5系列代码：个人页面
text-decoration 属性规定添加到文本的修饰. 注释:修饰的颜色由 "color" 属性设置. <!DOCTYPE html PUBLIC "-//W3 ...
HTML5系列代码：设置页面背景图像
background-image 属性为元素设置背景图像. 元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距. 默认地,背景图像位于元素的左上角,并在水平和垂直方向上重复. 提示:请设 ...
HTML5系列代码：一个完整简单的页面
超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言. 您可以使用 HTML 来建立自己的 WEB 站点,HTML 运行在浏览器上 ...
HTML5系列代码：设置滚动条
scrolling 属性规定是否在 iframe 中显示滚动条. 默认地,如果内容超出了 iframe,滚动条就会出现在 iframe 中. <html ><head>< ...
HTML5系列代码：框模型的大小
margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元 ...
HTML5系列代码：使用自定义图像来作为空距
white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. <html& ...
HTML5系列代码：使用三种方法插入图像
drawImage() 方法在画布上绘制图像.画布或视频. drawImage() 方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸. <!DOCTYPE HTML> < ...
HTML5系列代码：模仿杂志的多列版式
column-span 属性规定元素应横跨多少列. font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗. 数字值 400 相当于关键字 normal,700 ...
HTML5系列代码：为文字设置深灰色阴影
text-shadow 属性向文本设置阴影. 默认值: none 继承性: yes 版本: CSS3 JavaScript 语法: object.style.textShadow="2px ...

HTML5系列代码：用户注册页面

HTML5系列代码：用户注册页面相关推荐

最新文章

热门文章