这是【HTML 教程系列第 22 篇】,如果觉得有用的话,欢迎关注专栏。
文章目录
一:什么是 input 标签 ?
input,翻译过来就是 “输入” 的意思,在 HTML 中,大多数表单都是使用 input 标签来实现的。
语法
<input type="表单类型" />
说明
input 是自闭合标签,可以看到它是没有结束符号的。
二:input 标签中 type 属性取值有哪些 ?
这里我以表格形式,列举出 input 标签中 type 属性的取值和在浏览器中的运行效果,如下表格所示
属性值 | 解释说明 | 浏览器效果 |
---|---|---|
text | 单行文本框 | |
password | 密码文本框 | |
radio | 单选框 | |
checkbox | 多选框 | |
button、submit、reset | 按钮 | |
file | 文件上传 |
接下来我们来对这 6 个属性值逐个解释说明。
1:text 单行文本框
单行文本框使用 input 标签来实现,type 属性的取值是 text ,比如常用于登陆注册功能。
语法
<input type="text" />
举例说明
代码如下所示
<form>
姓名:<input type="text" />
</form>
浏览器运行效果如下所示
单行文本框常用属性
如下表格所示
属性 | 解释说明 |
---|---|
value | 设置默认情况下文本框显示的文字(默认值) |
size | 设置文本框的长度 |
maxlength | 设置文本框中最多可以输入的字符数 |
① value 属性
默认情况下,单行文本框的输入区域是空白的,如果想给该区域设置默认的显示文字,就要用到 value 属性,如下代码所示
<form>
姓名:<input type="text" value="这里输入您的名字" />
</form>
浏览器运行效果如下所示
② size 属性
单行文本框的默认长度是 20 像素,如果想改变其默认长度,就要用到 size 属性,代码如下所示
<form>
姓名:<input type="text" size="30" />
</form>
浏览器运行效果如下所示
不过实际开发中,我们一般不会用到这个属性,那怎么控制呢 ?用 CSS。
③ maxlength 属性
我们注册一个账号,在输入用户昵称时,经常会提示最多输入多少个字,在单行文本框中,想要实现这个功能,就要使用 maxlength 属性。
这里我限制最多输入 5 个 字符,代码如下所示
<form>
姓名:<input type="text" maxlength="5" />
</form>
浏览器运行效果如下所示
当我输入的字符超过 5 个时,虽然我继续输入了,但是已经无法在单行文本框里继续显示出来。
2:password 密码文本框
密码文本框,从名字就可以看出来这是一个输入密码的文本框,type 取值为 password 。
语法
<input type="password" />
举例说明
代码如下所示
密码:<input type="password" />
浏览器运行效果如下所示
嗯 ?这不就是单行文本框吗 ?
从外观上来看,密码文本框和单行文本框相似,你也可以把密码文本框看成是一种特殊的单行文本框。但当我们在输入框内输入字符后,我们就可以看到两者的区别,如下图所示
可以看到,在单行文本框中输入的字符可见,而在密码文本框中输入的字符是不可见的。这是两者本质上的区别。
密码文本框和单行文本框拥有相同的属性(value、size、maxlength),作用也是一致的,这里不再重复说明。
但需要特殊说明的是,密码文本框内的字符被黑色小圆点代替,这也只是让你旁边的人看不到你输入了什么,对数据的安全性来说是没一点作用的,浏览器和服务器之间数据的安全传输,属于后端技术。
3:radio 单选框
单选框使用 input 标签来实现,type 属性取值为 radio 。
语法
<input type="radio" name="组名" value="取值" />
这里的属性 name 和 value 是什么意思呢 ?如下表格所示
属性 | 解释说明 |
---|---|
name | 单选按钮所在的组名 |
value | 单选按钮的取值 |
value 属性的取值一般跟后面的文本相同,虽然加不加 value 属性在显示效果上都是一样的,但之所以要加上,也是为了方便 JavaScript 或者是服务器来对数据进行操作,关于这点,所有表单元素的 value 属性的作用都是一致的。
举例说明
代码如下所示
<form>
性别
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</form>
浏览器运行效果如下所示
可以看到,对于上面的一组单选按钮,我们无法同时选中两项,只能选中其中一项,这就是单选文本框。
如何为单选框设置默认选项
如果你想给一组单选框给定一个默认选项,需要用到 checked 属性来实现,代码如下所示
<form>
性别
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" checked />女
</form>
浏览器运行效果如下所示
从代码里我们可以看出,属性 checked 没有属性值,其实这是 HTML5 中的缩写形式,下面两行代码是等价的
<input type="radio" name="sex" value="女" checked />女
<input type="radio" name="sex" value="女" checked="checked" />女
使用单选框的两个注意事项
- 注意事项一:不能忘记加 name 属性。
- 注意事项二:同一组的单选框,必须设置相同的 name。
这两个注意事项,犯了其中一项,都会导致单选框出现可以同时被选取的情况,这里我以注意事项二为例,说一下这种情况,代码如下所示
<form>
性别
<input type="radio" name="sex_1" value="男" />男
<input type="radio" name="sex_2" value="女" />女
</form>
浏览器运行效果如下所示
4:checkbox 复选框
复选框使用 input 标签实现,type 属性的取值为 checkbox ,从名字可以很清楚的知道,复选框可以选择多项。
语法
<input type="checkbox" name="组名" value="取值" />
关于复选框的属性 name 和 value ,如下表格所示
属性 | 解释说明 |
---|---|
name | 复选框所在的组名 |
value | 复选框的取值 |
和单选框其实是一样的,这两个属性也是必填项。
举例说明
代码如下所示
<form>
你最喜欢的动漫 <br />
<input type="checkbox" name="anime" value="火影忍者" />火影忍者
<input type="checkbox" name="anime" value="海贼王" />海贼王
<input type="checkbox" name="anime" value="死神" />死神
<input type="checkbox" name="anime" value="龙珠" />龙珠
</form>
浏览器运行效果如下所示
和单选框一样,同一组的复选框中,name 的属性值也要一样。
如何为复选框设置多个默认选项
多选框默认不会选中任何选项,如果想在默认情况下,选中一个或者多个选项,也需要用到 checked 属性来实现,代码如下所示
<form>
你最喜欢的动漫 <br />
<input type="checkbox" name="anime" value="火影忍者" checked />火影忍者
<input type="checkbox" name="anime" value="海贼王" checked />海贼王
<input type="checkbox" name="anime" value="死神" />死神
<input type="checkbox" name="anime" value="龙珠" />龙珠
</form>
浏览器运行效果如下所示
5:按钮
HTML 中,常见的按钮有三种,分别是普通按钮 button、提交按钮 submit 、重置按钮 reset
①:button 普通按钮
普通按钮一般是配合 JavaScript 来实现各种操作的
语法
<input type="button" value="这是一个按钮" />
value 属性的取值,显示出来的就是按钮上的文字,上面一行代码在浏览器中的运行效果如下所示
举例说明
这里我们实现点击一个按钮,然后弹出一个对话框,代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎光临我的网站</title>
<script>
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function ()
{
alert("恭喜你,抽中兰博基尼 5 元优惠券一张");
};
}
</script>
</head>
<body>
<form><input type="button" value="点击抽奖" /></form>
</body>
</html>
代码中我们使用了 JavaScript ,正如前面所说,普通按钮一般是配合 JavaScript 来实现各种操作的。
浏览器运行效果如下所示
②:submit 提交按钮
提交按钮一般用来给服务器提交数据时使用,你可以把提交按钮看成是特殊的普通按钮。
语法
<input type="submit" value="取值" />
举例说明
为了和普通按钮 button 做下对比,代码如下所示
<form>
<input type="button" value="普通按钮" />
<input type="submit" value="提交按钮" />
</form>
浏览器运行效果如下所示
可以看到,从外观上来看,两者并无区别,因为这两个属性的本质在于功能上的区别。
③:reset 重置按钮
重置按钮一般用于清除表单中的内容,你同样可以把它看成是一种特殊的普通按钮。
语法
<input type="reset" value="取值" />
举例说明
这里我们以注册新账号为例,输入内容后点击重置按钮,局部代码如下所示
<form>
账号:<input type="text" /> <br />
密码:<input type="password" /> <br />
<input type="reset" value="重新填写" />
</form>
浏览器运行效果如下所示
可以看到,点击"重新填写"按钮,可以清空我们在输入框内输入的内容,这就是重置按钮的作用。
需要注意的是,重置按钮 reset 只能清空在 form 标签内的数据,对于 form 标签外的表单数据是无效的,我们来测试一下,局部代码如下所示
<body>
<form>
账号:<input type="text" /> <br />
<input type="reset" value="重新填写" />
</form>
密码:<input type="password" /> <br />
</body>
浏览器运行效果如下所示
④:三种按钮的区别
我们发现,从外观上来看这三种按钮是一样的,但它们的功能确是不一样的,区别如下表格所示
按钮名称 | 功能 |
---|---|
普通按钮 button | 一般配合 JavaScript 进行各种操作 |
提交按钮 submit | 一般是用来给服务器提交数据 |
重置按钮 reset | 一般用来清除用户在表单中输入的内容 |
6:file 文件上传
文件上传用 input 标签实现,type 属性的取值是 file。
语法
<input type="file" />
举例说明
像平常我们用到的百度网盘、各种邮箱都有上传文件的功能,这里以我本地文件为例,代码同语法中的 <input type="file" />
,浏览器运行效果如下所示
当我点击了"选择文件"后,会弹出一个 windows 窗口让我选择一个我本地的文件,点击后,原来显示"未选择任何文件"的内容被替换为我选择的文件名。
当然,这是本地文件的操作,如果想上传到网络,就需要后台技术配合了,这里只演示网页的布局。
到这里,input 标签中 type 属性的 6 个属性值便介绍完了。
你的问题得到解决了吗?欢迎在评论区留言。
赠人玫瑰,手有余香,如果觉得文章不错,希望可以给个一键三连,感谢。
技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。
结束语
最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。