Input标签

最新推荐文章于 2024-04-01 19:33:10 发布

汪秋霞

最新推荐文章于 2024-04-01 19:33:10 发布

阅读量601

点赞数 1

本文链接：https://blog.csdn.net/weixin_44573938/article/details/86555037

版权

29 篇文章 0 订阅

订阅专栏

开发工具与关键技术：DW
作者：汪秋霞
撰写时间：2019/1/19

Input标签是Html中的一种输入标签，没有结束标签，常在form表单中使用，根据type属性的不同类型，Input标签又分为不同类型的输入框。下面为大家介绍几种Input标签。（下面的Input标签全都使用默认样式）

   	<form>
   		<p>type="text"</p>
   		<input type="text">
   	</form>

页面显示：
在这里插入图片描述
2. type=“button”：点击按钮，与Button标签类似。
代码：

   	<form>
   		<p>type="button"</p>
   		<input type="button" value="button">
   	</form>

页面显示：
在这里插入图片描述
3. type=“radio”：单选框，在多个选项中只能选择一个。（注：要给单选框加入相同的name属性）
代码：

   	 <form>
   		<p>type="radio"</p>
   		<input type="radio" name="address">北京
   		<input type="radio" name="address">天津
   	 </form>

页面显示：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190119174241412.png#pic_center
4. type=“checkbox”：复选框，在多个选项中可以进行多项选择。（注：单选框同样要加入相同的name属性）
代码：

	<form>
   		<p>type="checkbox"</p>
   		<input type="checkbox" name="address">北京<br>
   		<input type="checkbox" name="address">天津
   </form>

页面显示：
在这里插入图片描述
5. type=“file”：点击在本地选择文件上传到网络上。
代码：

	<form>
			<p>type="file"</p>
			<input type="file">
	</form>

页面显示：
在这里插入图片描述
6. type=“password”：常见的密码输入框，输入的字体会被字符代替。（这里还可以加入maxlength属性规定可输入字符的长度）
代码：

	<form>
			<p>type="password"</p>
			<input type="password">
	</form>

页面显示：
在这里插入图片描述
7. 7.type=“date”：带有日期表，可以选择年月日。
代码：

	<form>
			<p>type="password"</p>
			<input type="password">
	</form>

页面显示：
在这里插入图片描述

这里就为大家介绍这几款Input标签了。还有很多有趣的Input标签，如果有兴趣可以查阅资料，自己动手操作一下。(多种Input标签组合起来会更有趣哦)

关注