HTML第四章 input新表单元素(10个，附带详细代码)

张的俊.

已于 2023-03-31 11:31:18 修改

阅读量1.5k

点赞数 1

分类专栏： HTML 文章标签：开发语言 html 前端

于 2022-10-02 19:51:04 首次发布

本文链接：https://blog.csdn.net/a2499797637/article/details/127145561

版权

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 数字控件

<input type="number" step="3" min="10" max="30" name="age">
min 最小值
max 最大值
step 步长，值递增或递减的大小，默认为1
注意：这个控件无法阻止用户自行输入！

2. 颜色控件

<input type="color">
提供了一个取色器，可以选择不同的色值，默认黑色

3. 日期控件

<input type="date">
只出现日期的选择，因为格式比较单一，因此自定义效果较强的日期插件更加美观合理

4. 月份控件

<input type="month">

5. 星期控件

<input type="week">

6. 邮箱控件

<input type="email">
会有一个输入邮箱地址的文本框，验证必须有@，同时@前后都有内容

7.搜索控件

<input type="search">
提供了一个快速删除的小叉叉

8. URL控件

<input type="url">
验证内容必须有http://
注意：数据的校验还是要放在后端用JS+正则去判断

9. 电话号码控件

<input type="tel">
电话类型在PC浏览器中与text一样,手机端不一样，会有模拟输入的小键盘

10. 范围控件

<input type="range">
属性：
1. min 最小值，表示区间的最开始
2. max 最大值，表示区间的最末尾
3. step 步长，表示数字移动的跨度
4. value 用来保存用户拖拽的值，也可以先自定义一个值作为初始值
5. 作用:可以控制区间，比如:音量地图缩放进度
6. 注意:设置步长时尽量选取可以除得尽的值，否则区间中有一部分值会无法选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>h5新表单元素</title>
	</head>
	<body>
		<form action="#">
			<!-- 注意！所有的控件都要写在表单form里！ -->
			年龄: <input type="number" step="3" min="10" max="30" name="age"><br>
			幸运色: <input type="color" name="color"><br>
			生日日期: <input type="date" name="date"><br>
			国庆月: <input type="month" name="month"><br>
			面包生产所在周: <input type="week" name="week"><br>
			邮箱: <input type="email" name="email"><br>
			搜索: <input type="search" name="search"><br>
			请输入网址: <input type="url" name="url"><br>
			<!-- 电话类型在PC浏览器中与text一样
			 手机端不一样，会有模拟输入的小键盘-->
			电话: <input type="tel" name="tel"><br>
			缩放: <input type="range" min="10" max="30" step="7"/><br>
			缩放: <input type="range" min="10" max="30" step="2" value="20"/><br>
			<input type="submit">
		</form>
	</body>
</html>