<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<style>
* {
margin: 0 auto
padding: 0
}
body {
background-color: #8acff0
}
.zongjian {
width: 300px
margin: 0 auto
margin-top: 10%
}
.zongjian p {
width: 100%
float: left
line-height: 30px
}
.zongjian p span {
line-height: 30px
margin-right: 10px
}
.zongjian p input {
line-height: 20px
}
.zongjian p font {
color: red
font-size: 18px
line-height: 30px
margin-left: 5px
}
.zuce {
background-color: #7df9dd
float: right
font-size: 14px
padding: 2px 5px
box-shadow: 1px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922), 0px 0px 0px 2px rgba(79, 180, 190, 0.9686274509803922)
}
.tishi {
width: 100%
float: left
color: red
height: 16px
}
</style>
<body>
<div class="zongjian">
<p><span>会员账号:</span>
<input id="name" onblur="onname()">
<font>*</font></p>
<div class="tishi" id="namets"></div>
<p><span>邮箱地址:</span>
<input id="email" onblur="onemail()">
<font>*</font></p>
<div class="tishi" id="emailts"></div>
<p><span>登录密码:</span>
<input id="password" onblur="onpassword()">
<font>*</font></p>
<div class="tishi" id="passwordts"></div>
<p><span>确认密码:</span>
<input id="qrpassword" onblur="onqrpassword()" type="password">
<font>*</font></p>
<div class="tishi" id="qrpasswordts"></div>
<div class="zuce" onClick="tijiao()">注册</div>
</div>
<script>
function onname()
{
var name = document.getElementById('name').value
if(name=="")
{
document.getElementById('namets').innerText = "会员账号不能为空"
return false
}
else if(name.length < 9)
{
document.getElementById('namets').innerText = "账号不能少于9位！"
return false
}
else
{
document.getElementById('namets').innerText = ""
return true
}
}
function onemail()
{
var email = document.getElementById('email').value
if(email=="")
{
document.getElementById('emailts').innerText = "邮箱不能为空"
return false
}
else if(email.indexOf('@')<0)
{
document.getElementById('emailts').innerText = "邮箱必须存在@"
return false
}
else
{
document.getElementById('emailts').innerText = ""
return true
}
}
function onpassword()
{
var password = document.getElementById('password').value
if(password=="")
{
document.getElementById('passwordts').innerText = "密码不能为空"
return false
}
else if(password.length < 6)
{
document.getElementById('passwordts').innerText = "密码必须大于6位"
return false
}
else
{
document.getElementById('passwordts').innerText = ""
return true
}
}
function onqrpassword()
{
var password = document.getElementById('password').value
var qrpassword = document.getElementById('qrpassword').value
if(qrpassword=="")
{
document.getElementById('qrpasswordts').innerText = "确认密码不能为空"
return false
}
else if(password!=qrpassword)
{
document.getElementById('qrpasswordts').innerText = "两次输入不一致"
return false
}
else
{
document.getElementById('qrpasswordts').innerText = ""
return true
}
}
function tijiao()
{
if(onname()&&onemail()&&onpassword()&&onqrpassword())
{
alert("提交成功")
}
else
{
alert("提交失败！")
}
}
</script>
</body>
</html>
1、建议先买一本html新手入门的教材，学习html每个标签的含义和用法，推荐推荐《HTML之路：XHTML和CSS最佳实践指南》，这本书是国外著名网站HTML DOG中的精华内容的集结，完全可以零基础，零起点开始系统的学习HTML和CSS。
2、最重要的是，它非常非常薄，看起来在心理上也不吃力。一些教学网站也很有帮助，例如可以当做参考手册的w3school 在线教程如果英语不是很吃力，可以看看Learn to code里面htmlfoundatation教程，
3、交互式界面，正确完成任务之后还有徽章奖励，做起来很有动力在完成了以上步骤之后，在上网浏览网页的时候多去思考它的语义结构、布局怎样的，配色如何，那些炫目的动态效果是怎么做出来的，用到了哪些新的库，新的框架，
用浏览器的“查看源代码”来验证自己的想法也是很有意思的一件事实践是最好的老师，接一个小任务，一点一点的完成，过程中要学会用好http://www.google.com这个好东西克服自己的惰性，培养自己对html的兴趣 and Good Luck！
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表；无序列表；
自定义列表；
自定义列表项；
自定义列表描述；
列表项目；
文中使用了两个有序列表和一个无序列表
绿叶学习网问卷调查
你通过什么途径来到绿叶学习网
1.百度搜索
2.360搜索
3.其他
你觉得绿叶学习网页面设计怎么样
1.美观
2.粗糙
3.还行
绿叶学习网的"HTML入门课程"如何？（多选）
浅显易懂，重点突出
内容丰富，技巧很多
一句话，非常喜欢！
