HTML-input标签
<!--
input: 通过type属性值的不同，表现出不同的形态
-->
<!-- 1、文本框：text（默认值） -->
昵称：<input type="text"><br><br>
<!-- 2、密码框：password 密文输入 -->
密码：<input type="password"><br><br>
<!-- 3、单选框：radio -->
性别：<input type="radio">男<br><br>
<!-- 4、多选框：checkbox -->
爱好：<input type="checkbox">敲代码<br><br>
<!-- 5、文件选择框：file -->
<input type="file">
例如：
<form>
<!-- 1、文本框：text（默认值）
属性：
1、value：用户输入的数据
如果提前在代码中设置好value属性，设置的就是文本框内容的默认值
2、name：告诉后台发送过去的数据是什么含义
后台接收到的数据格式：
name的属性值=value的属性值
3、maxlength：用户输入的最大字数
昵称：<input type="text" value="可爱的燕燕" name="nickname" maxlength="6"><br><br>
<!--
后端接收到的数据是？？？
可爱的燕燕
当写了name属性之后，此时后台接收的数据是什么？？？
nickname=可爱的燕燕
-->
<!-- 2、密码框：password （密文输入）
属性：
1、value：用户输入的数据
如果提前在代码中设置好value属性，就是密码框内容的默认值
2、name：告诉后台发送过去的数据是什么含义
3、maxlength：用户输入的最大字数
密码：<input type="password" value="233333" name="password" maxlength="6"><br><br>
此时后台接收的数据：
233333
此时后台接收的数据：
password=233333
<!-- 3、单选框：radio
属性：
1、name：
告诉后台发送过去的数据是什么含义
分组：有相同name属性值的单选框为一组，一组中同时只能有一个单选框被选中！！！！
2、value：用户选择的数据
3、checked：默认选中 可以省略属性值
性别：<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women" checked>女<br>
<!--
后台接收的数据：
sex=women
-->
<!-- 4、多选框：checkbox
属性：
1、name：告诉后台发送过去的数据是什么含义
2、value：用户选择的数据
3、checked：默认选中
-->
爱好：<input type="checkbox" name="hobby" value="code" checked>敲代码
<input type="checkbox" name="hobby" value="nosleep">熬夜
<input type="checkbox" name="hobby" value="nohair">掉头发<br><br>
<!--
后台接收的数据：
hobby=code
-->
<!-- 5、文件选择框：file
属性：
1、（html5）multiple：多文件上传 可以省略属性值
-->
<input type="file" multiple><br>
<!--
表单按钮：input标签
如果需要实现按钮的功能，需要配合form表单（form标签）一起使用
直接用form标签把所有的表单标签一起包裹起来
<!--
1、提交按钮：submit
nickname=可爱的燕燕&password=233333&sex=women&hobby=code
-->
<input type="submit">
<!--
2、重置按钮：reset
让内容回复成默认值！！！！
-->
<input type="reset">
<!-- 3、普通按钮：button
需要通过value属性，来设置按钮上的文
默认是没有特殊的功能
其实普通按钮，配合js来使用！！
-->
<input type="button" value="普通按钮">
<!--
4、图片按钮：image
样式：就是一张图片
功能：其实就是提交按钮
-->
<input type="image" src="im.jpg">
<input type="text"><br>
<input type="password"><br>
<input type="radio"><br>
<input type="checkbox"><br>
<input type="file"><br>
<input type="submit">
<input type="reset">
<input type="button"><br>
<input type="image" src=""><br>
</form>
HTML-input标签相关推荐
- 表单之input标签
表单之input标签 文章目录 表单之input标签 视频 代码 视频 https://www.bilibili.com/video/BV1gf4y1m7No?from=search&seid ...
- 通过jquery获取td下的input标签的值，并且改变onclick的参数值
一.背景 这几篇博客貌似我都是记在笔记本上超过一个月了,手动捂脸!我自己看着都有点陌生,行吧,就当重温一下当时碰到的问题了. 背景是要获取table标签里面的td下的input的对象,并修改它的onc ...
- jquery改变html元素的样式，给input标签赋值，onclick中文传参问题等
一.前言 最近又是用jquery比较多,很多东西都忘记了.一边使用一边学习吧,这边记录一下. 二.Jquery改变html的样式 $('#tanchuang').css('display','bloc ...
- winphone系统a、input标签被点击时产生的半透明灰色背景
在winphone系统下,链接a和input标签被点击是会产生半透明灰色背景. 下面就分享一下如何消除此问题,代码如下: 1 <meta name="msapplication-tap ...
- php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
- input标签加disabled属性后无法获得其value值
在做网站时,由于某些信息不能修改,故使用了input标签的disabled属性, 但是在提交数据后却发现显示为空了.后来一查才知道input设置为disabled值时会有下面的限制: 1.不能接收焦点 ...
- html input得到内容,js获得html中的input标签内容
各种input标签,定义不同的name="?",通过按钮调用js获得 ---------------------单选按钮,组名是1 --------------------复选按钮 ...
- input标签获取图片文件尺寸
思路分析 (1)给input标签设置一个onchange事件 当input标签的type属性为file时,我们可以给该input标签设置一个onchange事件来监听文件选择的变化 (2)在oncha ...
- 关于编辑器对input标签报错提示“表单输入没有相关label”的问题
相信很多朋友在制作表单的时候,我们的编辑器会有下图的相关提示吧 我们发现虽然这样并不影响我们的正常使用,但是看着这样的报错提示总是很让人心烦,那么这到底是为什么呢? 其实,这是因为编辑器建议我们在使用 ...
- html input file 修改按钮文字_html单选按钮默认选中怎么做？input标签的单选按钮用法实例...
本篇文章主要的向大家介绍了关于html input标签的单选按钮的使用方法,还有关于HTML input标签的单选默认按钮的做法.接下来我们一起来看看这篇文章吧 首先我们介绍的是在html input ...
最新文章
- linux学 java_[操作系统]Linux学习第二步(Java环境安装)
- 关于 quick-cocos 状态机
- spring autowired idea都匹配上了_你清楚这几个Spring常用注解吗？
- linux 分卷压缩命令,linux 分卷压缩命令
- SAP Hybris Commerce里的数据库表
- php curl 数据采集 空,PHP curl从网站返回空数组的数据
- 严格地说来的zhajinhuagame
- 心脏为什么长在左边？原来是因为这个消失的器官
- 设置Mysql5.6允许外网访问详细流程
- 5个界面效果很炫的JavaScript UI框架
- 关于Multi-bin实现的一些翻译
- 实现.pb模型和.pbtxt模型之间的转换 python
- 输入单张图片到神经网络
- 字符串，列表，元组，及综合训练
- 微信小程序加载并且编译显示富文本编辑器内容
- 批量保存西瓜无水印视频的方法步骤
- 中式家装红木装修，邂逅低调的奢华
- 软件工程期末考试复习题
- 六大布局之线性布局详解
- tar.zst 文件格式解压