快捷导航
蚂蚁部落 网站首页 前端教程 HTML教程 查看内容

栏目导航

≡基础知识≡

≡基本元素≡

≡常见元素与文本≡

≡超链接≡

≡表单≡

≡语义化元素≡

≡列表≡

≡表格≡

≡多媒体≡

≡全局属性≡

HTML input password密码框

2018-2-13 17:05| 发布者: admin| 查看: 906| 评论: 0|来自: 蚂蚁部落

将<input>标签type设置为"password"即可实现一个密码框。

密码框可以说是一种特殊的文本框,文本框中的内容是明文,而密码框输入的内容则是密文(安全措施)。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" name="pw">
</form>
</body>
</html>

上面的代码简单演示了密码框的用法。

特别说明:name属性是必须的,否则后台无法接收提交的表单数据。

密码框还有其他属性,下面分别做一下介绍:

(1).value:规定文本框的value属性值,也就是密码框中的默认内容。

(2).size:规定密码框中可见字符数目,建议用CSS的width属性替代。

(3).maxlength:规定密码框可以输入的最大字符数。

(4).placeholder(HTML5):提供一种提示,描述所期待的值。

(5).required(HTML5):规定文本域内容是必填的。

(6).pattern(HTML5):规定用于验证文本域内容格式的正则表达式。

(7).form(HTML5):规定输入域所属的一个或多个表单。

(8).autofocus(HTML5):规定在页面加载时,域自动地获得焦点。

(9).autocomplete(HTML5):规定密码域是否具有自动完成功能。

(10).readonly:设置密码域为只读。

(11).disabled:规定单选按钮不可用。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" maxlength="10" value="123" name="pw">
</form>
</body>
</html>

使用value属性值规定默认密码;maxlength属性规定数组字符的最大个数。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" maxlength="10" placeholder="输入密码" name="pw">
</form>
</body>
</html>

使用placeholder设定输入密码的提示语言。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" maxlength="10" required name="pw">
</form>
</body>
</html>

使用required属性设置密码域是必填的,否则会报错。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" pattern="^[a-z]{5,10}$" required name="pw"><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

pattern属性值是正则表达式,用来限定输入内容的。

我们也可以自定义验证提示,具体参阅HTML5 pattern自定义验证提示一文。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" autofocus required name="pw"><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

autofocus只有一个属性值"autofocus"(可以省略),它规定文本域在页面加载后自动获取焦点。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" autofocus autocomplete="on" name="pw"><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

autocomplete有两个属性值on和off,on规定密码域列出之前已经填写过的内容,off的功能与之相反。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  账号:<input type="text" name="username"><br>
  密码:<input type="password" readonly value="123"  name="pw"><br/>
  <input type="submit" value="提交表单"/>
</form>
</body>
</html>

通过readonly属性设置密码域为只读状态。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title> 
</head>
<body>
<form name="myform" id="ant" method="post" action="do.php">
  <input type="submit" value="提交表单"/>
</form>
密码:<input type="password" form="ant"  name="pw">
</body>
</html>

form属性引用所属表单的id,于是,虽然密码域在<form>之外,但依然是该表单的一部分。


鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-2-19 15:51 , Processed in 0.098082 second(s), 21 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部