前輩們請跳過
前端入門學習第二天，對照W3C的文檔寫了簡單的登入注冊實作。
html和css,js分别負責網頁的界面、樣式、動作。其中html提供的标簽配合CSS實作界面美化的功能，CSS3中加入了新的樣式，HTML5中也加入了更加友善的控件選擇。例如本次頁面中的輸入框中提示就是用新加入的placeholder實作。谷歌、火狐等浏覽器都可以正常解析。
login.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>login</title>
<link type="text/css" rel="stylesheet" href="css/login.css" target="_blank" rel="external nofollow" />
</head>
<body>
<div class="top">
<a href="index.html" target="_blank" rel="external nofollow" class="Wel">Welcome to login</a>
</div>
<span class="title"></span>
<div class="card">
<div class="img">
<img src="" />
</div>
<div class="card_body">
<form action="index.html" method="post">
<div class="form-group">
<label for="username">使用者名:</label>
<input type="text" name="username" placeholder="請輸入您的使用者名" οnchange="chkname()" id="username" /><br />
<p id="tip"class="tip"></p>
</div>
<div class="form-group">
<label for="password">密 碼:</label>
<input type="password" name="password" placeholder="請輸入您的密碼" οnchange="chkpassword()" id="password" /><br />
<p id="tip2"class="tip"></p>
</div>
<div class="form-group">
<label for="checkcode">驗證碼:</label>
<input type="text" name="checkcode" placeholder="驗證碼" οnchange="chkcode()" id="checkcode"/><br /><br />
</div>
<button type="button" οnclick="check()" >确認登入</button>
</form>
<p class="jump">沒有賬号？立即<a href="register.html" target="_blank" rel="external nofollow" >注冊</a></p>
</div>
</div>
<script src="js/login.js"></script>
</body>
</html>
login.js：
function chkname(){
str=document.getElementById("username").value;
if (!(/^\w+$/.test(str)) && str.length>0){
document.getElementById("tip").innerHTML="*使用者名須由字母數字下劃線組成!";
// document.write("使用者名須由字母數字下劃線組成");
}else{
document.getElementById("tip").innerHTML="";
}
}
function chkpassword(){
str=document.getElementById("password").value;
if(str.length<8 && str){
document.getElementById("tip2").innerHTML="*密碼不可以少于八位!";
}else{
document.getElementById("tip2").innerHTML="";
}
}
function chkcode(){
str = document.getElementById("checkcode").value;
if(!str){
alert("請輸入驗證碼!");
}
}
![一個小小的移動web版音樂播放器[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)