html+js实现简单的登陆页面
生活随笔
收集整理的這篇文章主要介紹了
html+js实现简单的登陆页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
初學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>
最終實現的效果如下：
總結
以上是生活随笔為你收集整理的html+js实现简单的登陆页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： USB设备(移动硬盘、鼠标)掉电掉驱动的
- 下一篇： IP地址及子网--四种IP广播地址