密码输入框的使用-HTML入门基础(022)

这节我们接着分享关于input标签的内容,文本框可以输入信息,但是输入密码等隐蔽信息时,我们怎么办呢?

 

在input标签中,有专门的输入密码使用的文本框,密码文本框在外观上跟单行文本框相似,密码文本框输入的字符是不可见的。

 

语法:

 

 

<input type="password" id="" name="">

 

示例代码:

 

 

<html>  <head>    <title>密码文本框</title>  </head>  <body>    账号:<input type="text" id="user_name" name="user_name">    密码:<input type="password" id="pwd" name="pwd">  </body></html>

 

 

密码文本框常用属性
属性说明
value定义文本框的默认值
size定义文本框的长度
maxlength设置文本框中最多可以输入的字符数

 

对于标签的属性设置时,是没有先后顺序的。谁在前,谁在后都没有太大的区别。

 

语法:

 

 

<input type="password" id="" name="" value="默认值" size="长度" maxlength="最多输入字符数">

 

示例代码:

​​​​​​​

<html>  <head>    <title>密码文本框</title>  </head>  <body>    账号:<input type="text" id="user_name" name="user_name" value="" size="15" maxlength="15">    <br>    密码:<input type="password" id="pwd" name="pwd" value="" size="6" maxlength="30">    <br>  </body><html>

 

 

 


 

 

 

input标签单选按钮radio

 

在HTML中,单选按钮只能从列表中选择一项,选项与选项之间是互相排斥的;

 

语法:

 

 

<input type="radio" id="" name="" value="值" checked="checked">

 

name和value属性是单选按钮必须设置的。

 

示例代码:

 

​​​​​​​

<html>  <head>    <title>单选按钮</title>  </head>  <body>    性别:    <input type="radio" id="man" name="group_1" value="man">男性    <input type="radio" id="wonmen" name="group_1" value="women">女性  </body></html>

 

我们运行预览后,发现单选按钮,只能选择其中一项,不能同时选择两个选项。

 

value属性一般表示需要存入数据库的值,而标签后的文字则是显示给用户实际看的值,这个大家需要区别开。另外不知道大家注意到没有,两个单选按钮的name属性一样了,会有疑问吧!

 

这个是为了能够将单选按钮绑定为一个组,从而达到单选互排斥的效果,比如将性别的两个单选按钮的name属性都设置为group_1,这样效果就是选择了男性,就不能选择女性,实际是为了分组。

 

给大家个示例代码:

 

​​​​​​​

<html>  <head>    <title>单选按钮分组</title>  </head>  <body>    爱好:    <input type="radio" id="football" name="sport_1" value="football" checked="checked">足球    <input type="radio" id="basketball" name="sport_1" value="basketball">篮球    <br>    特长:    <input type="radio" id="music" name="sport_2" value="music" checked="checked">音乐    <input type="radio" id="fight" name="sport_2" value="fight">双人对打    <br>  </body></html>

 

我们注意到,一共四个单选按钮,我们分为两组,一组name是sport_1,另一组是sport_2,选择组一的单选按钮,不会影响组二的单选按钮,这个就是单选按钮分组互排斥的工作方式,今后大家在开发网页时,可以将同一组内容的单选按钮name属性写为一致的。

 

如果我们需要让单选按钮一出现,就是选中的状态怎么做呢?就可以用到checked属性,同一组的单选按钮只有一个设置了此属性是有效果的,重复设置只有一个起效果。

 

另外插一句,单选按钮radio,加上value属性和没加上有什么区别?

 

很多初学者都会疑惑,单选按钮,加了属性value和没加value属性,在浏览器上的效果是同样的,没有区别。之所以加value属性,是在后端开发时,将value值传给服务器来处理的,保存至数据库中,现在就养成习惯,把value属性加上,方便以后的学习。

 

 

下一节我们接着分享关于input标签的内容。

 

 

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 撸撸猫 设计师:设计师小姐姐 返回首页