HTML怎么實(shí)現(xiàn)簡單登錄頁面

發(fā)布時(shí)間：2021-04-26 09:59:12 來源：億速云閱讀：450 作者：小新欄目：web開發(fā)

這篇文章主要介紹HTML怎么實(shí)現(xiàn)簡單登錄頁面，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

html是什么

html的全稱為超文本標(biāo)記語言，它是一種標(biāo)記語言，包含了一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體，html文本是由html命令組成的描述性文本，html命令可以說明文字，圖形、動(dòng)畫、聲音、表格、鏈接等，主要和css+js配合使用并構(gòu)建優(yōu)雅的前端網(wǎng)頁。

這是一個(gè)簡單的靜態(tài)的html頁面登錄圖片，之前寫的，驗(yàn)證碼方面沒有搞懂，這里我重新參考了這里，但是部分功能還沒有完善。僅供參考

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>靜態(tài)頁面登錄測(cè)試</title> 
 
 <script language="javascript">
 window.onload = function() {
  createCode()
 }
 var code; //在全局定義驗(yàn)證碼 
 function createCode() {
  code = "";
  var codeLength = 4; //驗(yàn)證碼的長度 
  var checkCode = document.getElementById("code");
  var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
   'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //隨機(jī)數(shù) 
  for(var i = 0; i < codeLength; i++) { //循環(huán)操作 
  var index = Math.floor(Math.random() * 36); //取得隨機(jī)數(shù)的索引（0~35） 
   code += random[index]; //根據(jù)索引取得隨機(jī)數(shù)加到code上 
  }
  checkCode.value = code; //把code值賦給驗(yàn)證碼 
 }
 //校驗(yàn)驗(yàn)證碼 
function validateLogin(){
    var sUserName = document.frmLogin.username.value ;
    var sPassword = document.frmLogin.password.value ;
    var inputCode = document.frmLogin.text_code.value;
    /*var sinputCode =document.frmLogin.inputcode.value ;  */
    if ((sUserName.length <= 0) || (sUserName=="")){
     alert("請(qǐng)輸入用戶名!");
     return false ;
    }
     
    if ((sPassword.length <= 0) || (sPassword=="")){
     alert("請(qǐng)輸入密碼!");
     return false ;
    }
    if ((inputCode.length<= 0) || (inputCode==NULL)){
        alert("請(qǐng)輸入驗(yàn)證碼!");
        return false ;
       }
   } 
  </script>
</head>
<body >
<fieldset>
<table background="images\e.jpg " width="933" height="412">
 <tr height="170">
 <td width="570px"> </td>
 <td> </td>
 </tr> 
 <tr>
<td> </td>        
<td><table>
<form method ="POST" action="http://localhost:8080/test/hello.html?login=%B5%C7%C2%BC" name="frmLogin"  >
 <tr>
 <td><label for="username">用戶名：</label></td>
 <td><input type="text" name="username"  id="username" placeholder="input your name" size="20" maxlength="20" /></td>
 <td > </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="password">密  碼：</label></td>
 <td><input type="password" name="password" id="password" placeholder="input your password" size="20" maxlength="20" )  this.value='';" /></td>
 <td> </td>
 <td> </td>
 </tr>
 <tr>
 <td><label for="text_code">驗(yàn)證碼:</label></td>
 <td><input type="text" size="" name="text_code" id="text_code" /></td>
 <td><input type="button" id="code" onclick="createCode()" name=""></td>
 </tr>
 <tr>
 <td><input type="checkbox" name="zlogin" value="1">自動(dòng)登錄</td>
 </tr>
 </table>
 </td>
  <tr>
  <td> </td>   
  <td><table>
   <tr>
  <td><input type="submit" name="login" value="登錄" onClick="return validateLogin()"/></td>
  <td><input type="reset" name="rs" value="重置"></td>
  <td><input type="button" name="button" value="注冊(cè)" onclick="window.location.href='https://www.w3school.com.cn/jsref/event_onfocus.asp'"></td>
  </tr>
 </tr>
 </table>
 </td>
 </table>
</fieldset>
</form>
 
</body>
</html>

執(zhí)行后如圖

HTML怎么實(shí)現(xiàn)簡單登錄頁面

以上是“HTML怎么實(shí)現(xiàn)簡單登錄頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

HTML怎么實(shí)現(xiàn)簡單登錄頁面

html是什么

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽