html+js實現簡單的登陸頁面
阿新 • • 發佈：2018-11-29
初學web自動化，學習簡單的前端知識還是很有必要的；
今天我們利用html實現一個簡單的登陸頁面，並利用js提取使用者名稱和密碼，在alert彈窗中顯示出來
實現的功能：
1.實現重置按鈕的功能，點選重置按鈕，能清除你填寫的資料
2.填寫使用者名稱，密碼，點選登入，獲取到使用者名稱和密碼通過alert提示框展示出來。
頁面如圖：
程式碼如下：
<!DOCTYPE html>
<html>
<head>
<title>登陸.html</title>
</head>
<body>
<form name="user" action="#" method="get">
<table align="center">
<tr>
<td>使用者名稱</td>
<td>
<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>密碼</td>
<td>
<input type="password" name='pwd' id="pwd"/>
</td>
</tr>
<tr>
<td>性別</td>
<td>
<input type="radio" name="name" checked="checked"/>男
<input type="radio" name="name"/>女
</td>
</tr>
<tr>
<td>頭像</td>
<td>
<input class="btn-file" type="file" name="file" />
</td>
</tr>
<tr>
<td>住址</td>
<td>
<select>
<option value='廣東省' selected="selected">廣東</option>
<option >北京市</option>
<option>山東</option>
</select>省
<select>
<option>深圳</option> <option>北京</option> <option>青島</option>
</select>市br
</td>
</tr>
<tr>
<td>愛好</td>
<td>
<input type="checkbox" name="sport" checked="checked"/>籃球
<input type="checkbox" name="basketball"/>足球
<input type="checkbox" name="volleyball"/>看書
</td>
</tr>
<tr>
<td>備註資訊</td>
<td>
<textarea rows="15" cols="50"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" id="id" value="登陸" onclick="return sub()"/>
<script><!--檢查使用者名稱 密碼-->
function sub(){
var username=document.getElementById("username").value
var pwd=document.getElementById("username").value
alert("使用者名稱: "+username+" "+"密碼: "+pwd);
}
</script>
<input type="reset" name="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</body>
</html>
最終實現的效果如下：