input标签的type值总结

最新推荐文章于 2025-07-01 12:01:49 发布

qianlingvip

最新推荐文章于 2025-07-01 12:01:49 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhangqling/article/details/81366943

本文详细介绍了HTML中各种表单元素的应用，包括文本输入、按钮、密码输入等传统元素，以及HTML5新增的日期选择器、数字输入框、滑块等现代元素。文章通过实例展示了如何使用这些元素来构建丰富的交互式表单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本：<input type="text" autofocus autocomplete="on" pattern="[0-9]{1}">
       按钮：<input type="button" value="我是按钮">
       密码：<input type="password">
       爱好：<input type="checkbox" name="fond" value="1">运动
       <input type="checkbox" name="fond" value="2">游泳
       <input type="checkbox" name="fond" value="3">钓鱼
       <br>
       性别：<input type="radio" name="sex" value="man">男
       <input type="radio" name="sex" value="woman">女
       <br>
       浏览文件：<input type="file">
       提交：<input type="submit">
       重置：<input type="reset">
       <br>

<p>html5新增input的type值</p>
       日期：<input type="date">
       数字：<input type="number" min="0" max="10" step="1">
       滑块：<input type="range" min="1" max="10" step="2" value="1">
       输入时后边有个×：<input type="search">

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>type值</title>
</head>
<body>
	<form action="#">
		文本：<input type="text" autofocus autocomplete="on" pattern="[0-9]{1}"><!-- 其中autofocus 自动聚焦  autocomplete自动完成表单  pattern="[0-9]{1}"表示正则 -->
		按钮：<input type="button" value="我是按钮">
		密码：<input type="password">
		爱好：<input type="checkbox" name="fond" value="1">运动
		<input type="checkbox" name="fond" value="2">游泳
		<input type="checkbox" name="fond" value="3">钓鱼<!-- 同组复选框name值应一致 -->
		<br>
		性别：<input type="radio" name="sex" value="man">男
		<input type="radio" name="sex" value="woman">女<!-- name值相同 -->
		<br>
		浏览文件：<input type="file">
		提交：<input type="submit">
		重置：<input type="reset">
		<br>

		<!-- 下边是html5新增的 -->
		<p>html5新增input的type值</p>
		日期：<input type="date">
		数字：<input type="number" min="0" max="10" step="1"><!-- min最小值 max最大值 step每次点击上下按钮增加几个数字-->
		滑块：<input type="range" min="1" max="10" step="2" value="1">
		输入时后边有个×：<input type="search">
	</form>
</body>
</html>