表单表单、、、
以前看书的时候，总以为表单很简单，可真到自己做的时候，却很是纠结，出现了很多小问题，大多还是布局与制作图片的纠结，总结几条经验
1、制作图片的时候，一定要控制好大小，否则得来回改动，~~~~(>_<)~~~~ 麻烦
2、如果在body中设置了，text-align：center；那么之后的元素，在调整位置的时候，一定得重新设置text-align属性，不然你调整的位置会出现莫名奇妙的结果，
昨天我就纠结了很久~
3、
<label for="username">姓名：</label><!加上for,用户不用很精确点击就可以输入了>
<input type="text" id="username" />
4、恰当地设定内边距，包括方向 和 值；特别是方向 要懂得运用。 灵活运用工具~
貌似做的时候纠结好多的，写好了，很多都忘了！附上源代码和网页截图（其实做得不好看~~~~~(>_<)~~~~）， 就结束今天的随笔吧！
<!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" />
<link href="Untitled-2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="checkFrom.js">
</script>
<title>简单的注册表单</title>
</head>
<body>
<div id="header"> <img src="images/logo.png" alt="logo" /> </div>
<img src="images/back.png" id="back" alt="返回首页" onclick="backLink()" />
<div id="content">
<h1>欢迎注册</h1>
<div id="why"> 试着创建一个好看的注册表单，仅以此献给爱我的人和我爱的人！</div>
<p>
<label for="username">姓名：</label>
<input type="text" id="username" />
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password"/>
</p>
<p>
<label for="password_again">再次输入密码：</label>
<input type="password" id="password_again"/>
</p>
<p>
<label for="e-mail">邮箱：</label>
<input type="text" id="e-mail" />
</p>
<p class="tishi">设置安全问题，有助于提高密码的安全性</p>
<p>
<label for="question">安全问题：</label>
<input type="text" id="question" />
</p>
<p class="tishi">设置一个你只有知道且容易记住的问题。</br>
例如：我爸爸的名字？你也可以不设置。</p>
<p>
<label for="answer">答案：</label>
<input type="text" id="answer"/>
</p>
<input type="image" name="submit" src="images/submit.png" onclick="submit()" />
<input type="image" name="reset" src="images/reset.png" onclick="reset()"/>
<div id="footer"> <img src="images/bottom.png"/> </div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
* {
margin:0;
padding:0;
}
body {
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
text-align:center;
}
#header {
height:107px;
position:relative;
}
#header img, #back {
float:left;
}
#header img {
left:299px;
position:absolute;
}
#back{
top:72px;
left:877px;
position:absolute;
}
h1{
background: url(images/top.png) no-repeat top;
font-size:28px;
font-weight:normal;
letter-spacing:4px;
padding-bottom:20px;
padding-top:20px;
}
#footer img{
left:327px;
}
#content{
width:690px;
left:333px;
position: relative;
}
#why{
padding-bottom:15px;
font-size:14px;
color:#003;
}
#content p{
margin:10px 20px;
padding-bottom:7px;
}
#content p label{
display:block;
text-align:right;
right:417px;
position:absolute;
}
.tishi{
text-align:right;
padding:7px 179px 7px 0;
}
input[type="text"]:focus,input[type="password"]:focus{
background:#FFF;
}
input[type="image"]{
padding-top:20px;
padding-bottom:15px;
}
#question , #answer{
width:207px;
text-align:right;
right:207px;
position:absolute;
}
// JavaScript Document
function backLink(){
document.location.href="fanzhi.html";
}
function submit(){
var password=document.getElementById("password").value;
var password_again=document.getElementById("password_again").value;
if(password===password_again)
alert("提交成功！");
else
alert("密码不正确");
}
function reset(){
document.getElementById("username").value=null;
document.getElementById("password").value=null;
document.getElementById("password_again").value=null;
document.getElementById("e-mail").value=null;
document.getElementById("question").value=null;
document.getElementById("answer").value=null;
}
浙公网安备 33010602011771号