HTML5表单

目录

一、了解HTML5在网页中的应用

二、HTML5中的input类型

1.email类型

2.url类型

3.number类型

4.range类型

5.search类型

6.Data pickers类型

三、HTML5的input属性

1.autofocus

2.required

3.placeholder

4.pattern

---

一、了解HTML5在网页中的应用

功能性实现，如网上购物、网上订票等。

获取客户需求和反馈信息，如调查问卷。

创建留言簿和意见簿。

创建搜索网页，如百度、谷歌。

 提示浏览者登录相关网站。

二、HTML5中的input类型

1.email类型

电子邮箱地址文本框，提交表单时会自动验证Email值。

<form action="">
			<input type="email" />
			<button type="submit">验证Email</button>
		</form>

 

2.url类型

网页的URL，提交表单时会自动验证URL值。

<form action="">
			<input type="url" />
			<button type="submit">验证URL</button>
		</form>

 

3.number类型

只能录入数字。

属性	说明
value	规定默认值
max	符合要求的最大值
min	符合要求求的最小值
step	每次递增或递减的数值，可以是整数或小数

<form action="">
			<input type="number" value="1" step="2" max="20" min="0" />
			<button type="submit">验证数字</button>
		</form>

4.range类型

特定范围内的数字选择器，以滑块的形式呈现。

属性	说明
value	规定默认值
max	符合要求的最大值
min	符合要求求的最小值
step	每次递增或递减的数值，可以是整数或小数

<form action="">
			<input type="range" value="1" step="2" max="100" min="0" />
			<button type="submit">验证数字</button>
		</form>

5.search类型

用于搜索引擎的搜索框。

		<form action="">
			<input type="search" />
		</form>

 

6.Data pickers类型

日期选择器，网页常用的日期控件，拥有多个可供选取日期的新输入类型。

类型	说明
data	选取年月日
moth	选取年月
week	选取年周
time	选取时间
datatime	选取年月日、时间（UTC时间）
datatime-local	选取年月日、时间（本地时间）

<form action="">
			<!-- data类型 -->
			<p>Data：<input type="sdata" /> <button type="submit">提交</button></p>
			<!-- moth类型 -->
			<p>Moth：<input type="moth" /> <button type="submit">提交</button></p>
			<!-- week类型 -->
			<p>week：<input type="week" /> <button type="submit">提交</button></p>
			<!-- time类型 -->
			<p>time：<input type="time" /> <button type="submit">提交</button></p>
			<!-- datatime类型 -->
			<p>Datatime：<input type="datetime" /> <button type="submit">提交</button></p>
			<!-- datatime-local类型 -->
			<p>Datatime-local：<input type="datetime-local" /> <button type="submit">提交</button></p>
		</form>

三、HTML5的input属性

1.autofocus

页面加载时自动获得焦点。

<form action="">
			<input type="text" autofocus />
			<!-- 两种写法都可以，但是给多个input元素添加autofocus只有第一个能够获取焦点 -->
			<input type="text" autofocus="autofocus" />
</form>

 

2.required

规定输入不能为空。

<form action="">
			<input type="text" required />
			<button type="submit">提交</button>
		</form>

 

3.placeholder

提供一种提示（hint），输入为空时显示，输入数据后消失。

<form action="">
			<input type="text" placeholder="请输入姓名" />
			<button type="submit">提交</button>
		</form>

4.pattern

规定验证域的模式（正则表达式）

<form action="">
			电话号码：<input type="text" pattern="1^[3-9]\d{9}$" />
			<button type="submit">提交</button>
		</form>