HTML：Input元素标签的详细介绍
2024-04-08 15:27:37
总结Input的标签：
Input表示Form表单中的一种输入对象，其又随Type类型的不同而分文本输入框，密码输入框，单选/复选框，提交/重置按钮等，下面一一介绍。1，type=text输入类型是text，这是我们见的最多也是使用最多的，比如登陆输入用户名，注册输入电话号码，电子邮件，家庭住址等等。当然这也是Input的默认类型。参数name：同样是表示的该文本输入框名称。参数size：输入框的长度大小。参数maxlength：输入框中允许输入字符的最大数。参数value：输入框中的默认值特殊参数readonly：表示该框中只能显示，不能添加修改。<form> your name: <input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br> <input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"></form>测试代码：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">姓名1：<input type="text" name="yourname" size="30" maxlength="20" value="输入框的长度为30，允许最大字符数为20"><br>姓名2：<input type="text" name="yourname" size="30" maxlength="20" readonly value="你只能读不能修改"><br></form></body> </html>
效果图如下：
2，type=password不用我说，一看就明白的密码输入框，最大的区别就是当在此输入框输入信息时显示为保密字符。参数和“type=text”相类似。<form> //your password: <input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15</form>测试代码如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">密码：<input type="password" name="yourpwd" size="20" maxlength="15" value="123456">密码长度小于15</form></body> </html>
效果图如下：
3，type=file当你在BBS上传图片，在EMAIL中上传附件时一定少不了的东西：）提供了一个文件目录输入的平台，参数有name，size。<form> //your file: <input type="file" name="yourfile" size="30"></form>测试代码如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">文件：<input type="file" name="yourfile" size="30"></form></body> </html>
效果图如下：
4，type=hidden非常值得注意的一个，通常称为隐藏域：如果一个非常重要的信息需要被提交到下一页，但又不能或者无法明示的时候。一句话，你在页面中是看不到hidden在哪里。最有用的是hidden的值。<form name="form1"> //your hidden info here: <input type="hidden" name="yourhiddeninfo" value="cnbruce.com"></form><script> alert("隐藏域的值是 "+document.form1.yourhiddeninfo.value)</script>测试代码如下：
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title><script>window.onload = function() {document.getElementById('button').addEventListener('click',function () {alert("隐藏域的值是 "+ document.getElementById('yourhiddeninfo').value);},false);}</script></head><body><form action="">隐藏：<input type="hidden" name="yourhiddeninfo" id="yourhiddeninfo" value="cnbruce.com"><button id="button">显示隐藏内容</button></form></body>
</html>
点击获取隐藏内容效果图如下：
5，type=button标准的一windows风格的按钮，当然要让按钮跳转到某个页面上还需要加入写JavaScript代码<form name="form1"> //your button: <input type="button" name="yourhiddeninfo" value="Go，Go，Go！" οnclick="window.open('http://www.cnbruce.com')"></form>测试代码如下：
<!doctype html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">按钮：<input type="button" name="yourhiddeninfo" value="Go，Go，Go!" onclick="window.open('http://www.cnbruce.com')"></form></body>
</html>
效果图如下：
6，type=checkbox多选框，常见于注册时选择爱好、性格、等信息。参数有name,value及特别参数checked（表示默认选择）其实最重要的还是value值，提交到处理页的也就是value。（附：name值可以不一样，但不推荐。）<form name="form1"> a:<input type="checkbox" name="checkit" value="a" checked><br> b:<input type="checkbox" name="checkit" value="b"><br> c:<input type="checkbox" name="checkit" value="c"><br></form>
name值可以不一样，但不推荐<br><form name="form1"> a:<input type="checkbox" name="checkit1" value="a" checked><br> b:<input type="checkbox" name="checkit2" value="b"><br> c:<input type="checkbox" name="checkit3" value="c"><br></form>
测试代码如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">a:<input type="checkbox" name="checkit" value="a" checked><br>b:<input type="checkbox" name="checkit" value="b"><br>c:<input type="checkbox" name="checkit" value="c"><br></form></body> </html>
效果图如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action="">a:<input type="radio" name="checkit" value="a" checked><br>b:<input type="radio" name="checkit" value="b"><br>c:<input type="radio" name="checkit" value="c"><br></form></body> </html>
效果图如下：
8，type=image比较另类的一个，自己看看效果吧，可以作为提交式图片<form name="form1" action="xxx.asp"> //your Imgsubmit: <input type="image" src="../blog/images/face4.gif"></form>测试代码如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action=""><input type="image" src="https://ss0.baidu.com/73t1bjeh1BF3odCf/it/u=3466314416,2888444446&fm=73"></form></body> </html>
效果图如下：
9，type=submit and type=reset分别是“提交”和“重置”两按钮submit主要功能是将Form中所有内容进行提交action页处理，reset则起个快速清空所有填写内容的功能。<form name="form1" action="xxx.asp"> <input type="text" name="yourname"> <input type="submit" value="提交"> <input type="reset" value="重置"></form>测试代码如下：
<!doctype html> <html lang="zh-CN"><head><meta charset="utf-8"><meta name="description" content="all kinds of input"><meta name="keywords" content="input,html"><title>各种input的测试</title></head><body><form action=""><input type="text" name="yourname"><input type="submit" value="提交"><input type="reset" value="重置"></form></body> </html>
效果图如下：
HTML：Input元素标签的详细介绍相关推荐
- php div行内块元素,行内元素与块级元素的区别详细介绍
首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block).行内(inline). 块级元素:(以下列举比较常用的块级元素,详 ...
- html调用文章标题,HTML中文章标题标签的详细介绍
昨天说道了我的第一个网页,今天接着继续带大家深入,前期学习千万不要用代码工具哦!那样就少了深入了解的机会了哦!一.大家都知道文章会有各种标题,网页其也跟文章差不多也有专门来写标题的元素. (1). h ...
- script标签中写html,html中script标签的详细介绍
大家好,欢迎关注支持,谢谢!本篇将介绍html中script标签的详细用法,有兴趣的朋友可以了解一下! 一.前言 在html中,为了实现动态交互效果,我们经常会嵌入其它脚本语言(如:JavaScrip ...
- html中b标签去加粗,html中b加粗标签的详细介绍
html作为网页最基础的语言是每一个站长必学的语言,今天我们就来了解字体文本标签 b,/b标签的用法及其语义. 字体文本标签讲解标签 字体标签定义字体的显示效果,有些标签它有独自的语义. 标签 感谢您 ...
- html的注释标签是什么,html 注释标签的详细介绍
在我们写 html 代码的时候,往往需要进行说明该行代码或该段代码是用来做什么的.这个时候我们就需要用到 html 注释标签了,html 注释标签有哪些呢?html 注释标签和其它语言的注释不一样.比 ...
- html文档主体的根标签,HTML详细介绍（基础标签篇）
今天下午阳光明媚,北京少有的好天气.正好有机会总结HTML标签,下面就详细介绍一下基础的标签的用法及相关的属性.关于基础篇的总结部分点击这里. 基础标签的内容 :定义,声明文档类型 :html文档的根 ...
- Selenium中元素定位方法详细介绍
一.元素定位基本方法 1.如何进行元素定位? 元素:由标签头 + 标签尾 + 标签头和标签尾包括的文本内容: 元素的信息就是指元素的标签名及元素的属性: 元素的层级结构就是指元素之间相互嵌套的层级结构 ...
- JSTL 标签库详细介绍资料 .
http://blog.csdn.net/azheng270/article/details/2139528 前言 从JSP 1.1规范开始,JSP就支持在JSP中使用自定义标签了,自定义标签的广泛使 ...
- JSTL标签库详细介绍
目录 一JSTL标签库 二.核心(Core)标签库 通用标签 循环控制标签 导入文件和URL 总结 一JSTL标签库 JSTL是一个不断完善的开放源代码的JSP标签库,是由apache的jakarta ...
最新文章
- 监控Spark应用方法简介
- JS中 let 和var的区别
- 查找最晚入职员工的所有信息---牛客网SQL实战篇
- 根据端口查找是那个程序正在占用
- echarts折线图背景线_echarts设置折线线条颜色和折线点颜色的实例
- 删除链表的倒数第 N 个节点
- ActiveMQ入门教程(一) - JMS和ActiveMQ简介
- 【空间】C++内存管理
- hibernate4.0+版本和3.0+版本的区别总结
- Win32 SDK创建ListView控件
- 山特UPS电源注意事项
- LFW人脸数据集测试协议及编程实现
- 中心移动平均_Excel数据分析——移动平均法预测分析
- ubuntu系统给u盘拷贝文件
- JAVA钓鱼游戏_java如何实现纸牌游戏之小猫钓鱼算法
- CSS3实战 - 3d转换 - 超级立方体
- 什么是 DNS 泛洪？
- 安卓虚拟机_安卓中的安卓虚拟机，那些闪退应用有救了
- Collectors.reducing总结
- 地铁译：Spark for python developers --- 搭建Spark虚拟环境1