HTML——input标签
很多表单元素都是由一个个的 input 元素组成的。它是自闭合标签，根据其 type 属性值的不同分为很多种，例如单行文本框、密码框、单选按钮、复选框、隐藏域、文件上传域、普通按钮、提交按钮以及重置按钮等。
—— input标签的基本格式为：
<input type="表单类型" />
| 常用属性值 | 说明 |
|---|---|
| text | 表示单行文本框 |
| password | 表示密码框 |
| hidden | 表示隐藏域 |
| radio | 表示单选按钮 |
| checkbox | 表示复选框 |
| file | 表示文件上传域 |
| button | 表示普通按钮 |
| submit | 表示带提交功能的按钮 |
| reset | 表示带重置功能的按钮 |
—— input的具体用法：
<body>
<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
用户名:<input type="text" name="name"><br/>
密码:<input type="password" name="password"><br/>
性别:<input type="radio" name="sex" value="boy">男
<input type="radio" name="sex" value="girl">女<br/>
爱好:读书<input type="checkbox" name="read" value="read">
跑步<input type="checkbox" name="run" value="run">
逛街<input type="checkbox" name="shopping" value="shopping">
看电影<input type="checkbox" name="movie" value="movie"><br/>
隐藏域<input type="hidden" name="hidden"><br/>
文件上传域<input type="file" name="file" src="url"><br/>
<input type="submit" value="提交">
<input type="button" value="确定">
<input type="reset" value="重置">
</form>
</body>
效果：
—— type的属性值说明：
text 表示常规文本框，一般用来输入一些对用户可见的文字。
password 表示密码框，输入的内容对用户不可见。
radio 表示单选按钮。当 type 属性值为 radio 时，必须为其指定相同的 name 属性值，否则实现不了单选的效果。
checkbox 表示复选框，可以选择多条内容。
hidden 表示隐藏域，在页面中对于用户是不可见的。在表单中插入隐藏域可以方便收集或发送信息。当表单提交时，隐藏域的信息也被一起提交。
file 表示上传文件域，src 属性表示文件的路径。
submit 表示提交按钮，默认值为提交，也可以根据需求使用 value 属性进行设置。点击按钮后，表单中的值会提交到预先设定好的 url 中。
button 表示普通按钮，没有提交功能。默认没有 value 值，需要手动设置，如果需要提交，建议使用 submit 按钮。
reset 表示重置按钮，同 submit 一样也有默认 value 值，默认为重置。点击按钮后，表单中填写的所有数据将被清空。
—— input标签的name属性：
当用户向表单输入信息时，服务器需要知道这个数据到底输入到了表单的哪个字段（控件）。例如登录页面，服务器需要知道哪条数据是作为用户名输入的，哪条数据是作为密码输入的。因此，HTML 规定如果表单要想正确地被提交给表单处理器，必须为每个字段都设置 name 属性。如果未设置，默认不提交其数据信息。
—— input标签的disabled属性：
如果为 <input> 标签的某个控件设置了disabled="disabled"，表示将禁用该控件，使其不能再获得焦点或被修改。被禁用后，它的值不会提交到后台。如果是按钮被禁用，它的点击效果就会失效。
例子：
<form action="http://vip.biancheng.net/login.php" method="post" name="myForm">
用户名:<input type="text" name="name" disabled="disabled" value="username"><br/>
密码:<input type="password" name="password" disabled="disabled"><br/>
</form>
—— input标签的readonly属性：
readonly 属性表示只读。它有以下特点：
- 一般用在单行文本框和密码框中；
- 控件的值可以显示，但不能修改；
- 控件可以获取焦点；
- 如果有预先设置好的值，会一起提交到服务器。
HTML——input标签的更多相关文章
- 关于input标签和placeholder在IE8，9下的兼容问题
一. input常用在表单的输入,包括text,password,H5后又新增了许多type属性值,如url, email, member等等,考虑到非现代浏览器的兼容性问题,这些新的type常用在移 ...
- angular input标签只能单向传递数据的问题
angularjs input标签只能单向传递数据的问题 <ion-view title = "{{roomName}}" style = "height:90%; ...
- 全面剖析 <input> 标签 ------ HTML\HTML5
<input>标签因其形式多样.功能强大,当之无愧成为了WEB前端开发人员最钟爱的元素之一.下面就来对<input>做一个全面的剖析: 标签定义: <input> ...
- input标签file的value属性IE兼容性问题
在IE中input标签file的value属性是只读的,不能通过js来改变,如下代码在IE中就是无效的: var input = document.getElementById('file'); in ...
- 一个input标签搞定含内外描边及阴影的按钮～
自从怀孕以来,我就变得很是轻松,偶尔写一两个页面,或者偶尔调试一个两个bug,或者偶尔给做JS的同事打打下手,修改个bug什么......一个习惯于忙碌的工作的人,这一闲下来,感觉还真TM很不舒服-怎 ...
- 控制input标签中只能输入数字以及小数点后两位
js 代码如下: /* 控制input标签中只能输入数字 和小数点后两位 */ function checkNum(obj) { //检查是否是非数字值 if (isNaN(obj.value)) { ...
- 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案
最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...
- input 标签实现带提示文字的输入框
方法一:html5配合css3实现带提示文字的输入框(摆脱js): webkit特有的一个css,可以控制里面的文字样式,配合css3的动画效果和伪类,我们就可以很容易做出一个带动画的输入框,在系统登 ...
- 如何解决火狐FF里Input标签刷新页面后 仍然保存之前输入的内容的方法。
直接在input 标签里 增加 autocomplete="off".火狐默认为 on.
- html <input>标签类型属性type(file、text、radio、hidden等)详细介绍
html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...
随机推荐
- Python3中pip3命令的用法介绍及安装配置
第一节:pip3是什么?有啥用? pip3:(Python3 Install Package ),这个英文全称是我为了更好的理解这个命令这么叫的,官方没有这对个命令的全称的解释:) python 支持 ...
- http协议重新整理——————历史[一]
前言 简单整理一些http协议. 正文 20 世纪 60 年代,美国国防部高等研究计划署(ARPA)建立了 ARPA 网,它有四个分布在各地的节点,被认为是如今互联网的"始祖". ...
- 密码学中的RSA算法与椭圆曲线算法
PrimiHub一款由密码学专家团队打造的开源隐私计算平台,专注于分享数据安全.密码学.联邦学习.同态加密等隐私计算领域的技术和内容. 在数字安全领域,加密算法扮演着至关重要的角色.它们确保了信息的机 ...
- 使用纯c#在本地部署多模态模型，让本地模型也可以理解图像
之前曾经分享过纯c#运行开源本地大模型Mixtral-8x7B 当时使用的是llamasharp这个库和Mixtral的模型在本地部署和推理,前段时间我看到llamasharp更新到了0.11.1版本 ...
- nginx请求头相关漏洞修复(http host&X-XSS-Protection)
nginx请求头相关漏洞修复(http host&X-XSS-Protection) 参考链接:Nginx常见漏洞处理 - 码农教程 (manongjc.com) Web应用漏洞-NGINX各 ...
- 力扣73(java)-矩阵置零（中等）
题目: 给定一个 m x n 的矩阵,如果一个元素为 0 ,则将其所在行和列的所有元素都设为 0 .请使用 原地 算法. 提示: m == matrix.length n == matrix[0].l ...
- MyBatis源码之前言—JDBC编码存在的问题和Mybatis的介绍
MyBatis源码之前言-JDBC编码存在的问题和Mybatis的介绍 为了方便操作,我们在sjdwz_test数据库下建立一张表: CREATE TABLE `t_student` ( `id` b ...
- 赋予企业更多可能，云数据库SQL Server 2019版这几大亮点别错过
直播预告 2020年3月26日 15:00-16:30 邀您一同见证 云数据库SQL Server 2019版重磅发布 全面提升性价比及数据库能力 点我观看 RDS SQL Server 2019不仅 ...
- K8s 网关选型初判：Nginx 还是 Envoy？
简介: 本文将从性能和成本.可靠性.安全性 3 方面,对两大开源实现进行比对,希望对正在做 K8s 网关选型的企业有所借鉴. 作者:张添翼(澄潭) 为了避免混淆,我们先对一些关键定义做一些厘清: 传统 ...
- MaxCompute湖仓一体介绍
简介:本篇内容分享了MaxCompute湖仓一体介绍. 分享人:孟硕 阿里云 MaxCompute产品专家 视频链接:数据智能实战营-北京站 专题回顾 正文: 本篇内容将通过两个部分来介绍MaxCo ...