整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML 表單用于收集不同類型的用戶輸入，它是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。今天我們主要來說說文本域和密碼域這兩個部分，希望對大家學習有所幫助喲！
本文福利后臺回復【學習】即可獲得Python、HTML等編程學習資料
HTML 表單
表單使用表單標簽 <form> 來設置:
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
HTML 表單 - 輸入元素
多數情況下被用到的表單標簽是輸入標簽（<input>）。輸入類型是由類型屬性（type）定義的。
如何在 HTML 頁面創建文本域？
用戶可以在文本域中寫入文本，參考代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
<p><b>注意：</b> 表單本身是不可見的。并且注意一個文本字段的默認寬度是20個字符。</p>
</body>
</html>
運行結果為
如何創建 HTML 的密碼域？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<form action="">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="password">
</form>
<p><b>注意：</b> 密碼字段中的字符是隱藏的(顯示為星號或圓圈)。</p>
</body>
</html>
運行結果如下
戳了解更多免費領取HTML試聽課~
文章將分享有關JavaScript中表單驗證的應用，具有一定的參考作用，希望對大家有所幫助
在JavaScript中我們可以在數據被送往服務器前對 HTML 表單中的這些輸入數據進行驗證。客戶端表單驗證通常使用javascript完成，對于大多數用戶來說，JavaScript表單驗證將節省大量時間，但是如果用戶關閉了JavaScript，則仍需要仔細檢查服務器上的數據。通常有JavaScript檢查的表單數據有：
（1）用戶是否已填寫表單中的必填項目
（2）用戶輸入的郵件地址是否合法
（3）用戶是否已輸入正確格式的密碼
（4）用戶是否在數據域 中輸入了文本
接下來將通過實際案例告訴大家JavaScript中表單驗證如何使用
html代碼
<table style="width:350px;height:200px;margin: 100px auto;border:1px solid #ccc;">
<tr>
<td>
用戶名：<input type="text" name="username" id="txt">
</td>
<td id="sure"></td>
</tr>
<tr>
<td>
密碼 ：<input type="password" name="password" id="mima">
</td>
<td id="sure1"></td>
</tr>
</table>
驗證用戶名和密碼的輸入是否出錯
<script type="text/javascript">
var txt=document.getElementById("txt");
var sure=document.getElementById("sure");
var mima=document.getElementById("mima");
var sure1=document.getElementById("sure1");
txt.onblur=function(){
if(this.value=="")
{
sure.style.display="block";
sure.style.color="red";
sure.innerHTML="輸入內容不能為空";
}
else if((txt.value.length<3)||(txt.value.length>8)){
sure.style.display="block";
sure.style.color="red";
sure.innerHTML="您輸入的用戶名是錯誤的長度";
}
else{
sure.style.display="block";
sure.style.color="#444"
sure.innerHTML="輸入正確";
}
}
mima.onblur=function(){
if(this.value=="")
{
sure1.style.display="block";
sure1.style.color="red";
sure1.innerHTML="輸入內容不能為空";
}
else if((txt.value.length<3)||(txt.value.length>8)){
sure1.style.display="block";
sure1.style.color="red";
sure1.innerHTML="您輸入的密碼是錯誤的長度";
}
else if(isNaN(this.value)){
sure1.style.display="block";
sure1.style.color="red";
sure1.innerHTML="請輸入數字";
}
else{
sure1.style.display="block";
sure1.style.color="#444"
sure1.innerHTML="輸入正確";
}
}
輸入內容為錯誤時
總結：以上就是本篇文章的全部內容了，希望對大家學習表單驗證有所幫助。
以上就是JavaScript如何實現表單驗證的詳細內容，更多請關注其它相關文章！
更多技巧請《轉發 + 關注》哦！
Password 對象
Password 對象代表 HTML 表單中的密碼字段。
HTML 的 <input type="password"> 標簽在表單上每出現一次，一個 Password 對象就會被創建。
該文本輸入字段供用戶輸入某些敏感的數據，比如密碼等。當用戶輸入的時候，他的輸入是被掩蓋的（例如使用星號*），以防止旁邊的人從他背后看到輸入的內容。不過需要注意的是，當表單提交時，輸入是用明文發送的。
與類型為 "text" 的元素類似，當用戶改變顯示值時，它會觸發 onchange 事件句柄。
您可以通過遍歷表單的 elements[] array 來訪問密碼字段，或者通過使用 document.getElementById() 。
Password 對象屬性
W3C: W3C 標準。
| 屬性 | 描述 | W3C |
|---|---|---|
| defaultValue | 設置或返回密碼字段的默認值。 | Yes |
| disabled | 設置或返回是否應被禁用密碼字段。 | Yes |
| form | 返回對包含此密碼字段的表單的引用。 | Yes |
| maxLength | 設置或返回密碼字段中字符的最大數目。 | Yes |
| name | 設置或返回密碼字段的名稱。 | Yes |
| readOnly | 設置或返回密碼字段是否應當是只讀的。 | Yes |
| size | 設置或返回密碼字段的長度。 | Yes |
| type | 返回密碼字段的表單元素類型。 | Yes |
| value | 設置或返回密碼字段的 value 屬性的值。 | Yes |
Password 對象方法
| 方法 | 描述 | W3C |
|---|---|---|
| select() | 選取密碼字段中的文本。 | Yes |
標準屬性和事件
Password 對象同樣支持標準的 屬性 和 事件。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
