整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
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小时内与您取得联系。
