web十七讲中，html5

<input> 元素的输入类型(复习)

<input type="text"> 定义供文本输入的单行输入字段
<input type="password"> 定义密码字段
<input type="submit"> 定义提交表单数据至表单处理程序的按钮。
<input type="radio"> 定义单选按钮
<input type="checkbox"> 定义复选框
<input type="button"> 定义按钮

HTML5 新增输入类型

Color
date pickers
- date
- datetime
- datetime-local
- month
- week
- time
number
range
search
tel
email
url

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。目前所有的主流浏览器一般都支持新的input 类型，即使不被支持，仍可以显示为常规的文本域。

输入类型：number

<input type="number">用于应该包含数字的输入字段。
能够对数字做出限制。
根据浏览器支持，限制可应用到输入字段。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：number</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        数值约束会应用到输入字段中。
    </p>

    <form action="input3.html">
        数量（1 到 5 之间）：
        <input type="number" name="quantity" min="1" max="5">
        <input type="submit">
    </form>

    <p><b>注释：</b>IE9 及早期版本不支持 type="number"。</p>
</body>

</html>

输入限制

这里列出了一些常用的输入限制(其中一些是 HTML5中新增的)。

属性	描述
disabled	设置输入字段被禁用。
max	设置输入字段的最大值。
min	设置输入字段的最小值。
maxlength	设置输入字段的最大字符数。
pattern	设置校验输入值的正则表达式。
readonly	设置输入字段为只读。
required	设置输入字段是必需的。
size	设置输入字段的宽度(以字符计)。
step	设置输入字段的合法数字间隔。
value	设置输入字段的默认值。

输入类型：date

<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持，日期选择器会出现输入字段中。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：date</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        当您填写输入字段时会弹出日期选择器。
    </p>

    <form action="input3.html">
        生日：
        <input type="date" name="bday">
        <input type="submit">
    </form>

    <p><b>注释：</b>Firefox 或者
        Internet Explorer 11 以及更早版本不支持 type="date"。</p>
</body>

</html>

输入类型：color

<input type="color"> 用于应该包含颜色的输入字段。
根据浏览器支持，颜色选择器会出现在输入字段中。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：color</title>
</head>

<body>
    <p>
        Depending on browser support:<br>
        A color picker can pop-up when you enter the input field.
    </p>
    <form action="input1.html">
        Select your favorite color:
        <input type="color" name="favcolor" value="#ff0000">
        <input type="submit">
    </form>
    <p><b>Note:</b> type="color" is not supported in Internet Explorer.</p>
</body>

</html>
```![](https://img2020.cnblogs.com/blog/2142893/202012/2142893-20201220211857019-2055935823.png)

输入类型：range

<input type="range"> 用于应该包含一定范围内的值的输入字段。
根据浏览器支持，输入字段能够显示为滑块控件。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：range</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        输入类型 "range" 可显示为滑动控件。
    </p>
    <form action="input3.html" method="get">
        Points:
        <input type="range" name="points" min="0" max="10">
        <input type="submit">
    </form>
    <p><b>注释：</b>IE9 及早期版本不支持 type="range"。</p>
</body>

</html>

输入类型：month

<input type="month"> 允许用户选择月份和年份。
根据浏览器支持，日期选择器会出现输入字段中。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：month</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        当您填写输入字段时会弹出日期选择器。
    </p>
    <form action="input.html">
        生日（月和年）：
        <input type="month" name="bdaymonth">
        <input type="submit">
    </form>
    <p><b>注释：</b>Firefox 或者
        Internet Explorer 11 以及更早版本不支持 type="month"。</p>
</body>

</html>

输入类型：week

<input type="week"> 允许用户选择周和年。
根据浏览器支持，日期选择器会出现输入字段中。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：week</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        当您填写输入字段时会弹出日期选择器。
    </p>
    <form action="action_page.php">
        Select a week:
        <input type="week" name="year_week">
        <input type="submit">
    </form>
    <p><b>注释：</b>
        Internet Explorer 不支持 type="week"。</p>
</body>

</html>

输入类型：time

<input type="time"> 允许用户选择时间（无时区）。
根据浏览器支持，时间选择器会出现输入字段中。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：time</title>
</head>

<body>
    <p>
        根据浏览器支持：<br>
        当您填写输入字段时会弹出日期选择器。
    </p>
    <form action="input.html">
        请选取一个时间：
        <input type="time" name="usr_time">
        <input type="submit">
    </form>
    <p><b>注释：</b>Firefox 或者
        Internet Explorer 11 以及更早版本不支持 type="time"。</p>
</body>

</html>

输入类型：email

<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持，能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型，并在键盘增加".com" 以匹配电子邮件输入。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：email</title>
</head>

<body>
    <form action="input3.html">
        E-mail:
        <input type="email" name="email">
        <input type="submit">
    </form>

    <p>
        <b>注释：</b>IE9 及更早版本不支持 type="email"。</p>
</body>

</html>

输入类型：search

<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：search</title>
</head>

<body>
    <form action="input.html">
        搜索谷歌：
        <input type="search" name="googlesearch">
        <input type="submit">
    </form>
</body>

</html>

输入类型：tel

<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：tel</title>
</head>

<body>

    <form action="input3.html">
        Telephone:
        <input type="tel" name="usrtel" 
        pattern="^1[3|4|5|8][0-9][0-9]{8}$" title="手机号码是11位数字" required>
        <input type="submit">
    </form>

    <p><b>注释：</b>Safari 8 及更新版本支持 type="tel"。</p>
</body>

</html>

正则表达式(Regular Expression)

正则表达式(Regular Expression)是一种文本模式，包括普通字符(如a到z的字母)和特殊字符(元字符)。
正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。

输入类型：url

<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持，在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型，并向键盘添加 ".com" 以匹配url 输入。

案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>输入类型：url</title>
</head>

<body>
    <form action="input1.html">
        请添加您的首页：
        <input type="url" name="homepage">
        <input type="submit">
    </form>
    <p><b>Note:</b>IE9 及其更早版本不支持 type="url"。</p>
</body>

</html>

综合案例

案例1：

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表单新增input类型的应用</title>
</head>

<body>
	<fieldset>
		<legend align="center">新生报到须知</legend>
		开学日期：<input type="date" /><br />
		开学起始周: <input type="week" name="user_date" /><br />
		开始起始月: <input type="month" name="user_date" /><br />
		交费时间: <input type="time" name="user_date" /><br />
		日期与时间: <input type="datetime" name="user_date" /><br />
		本地日期与时间: <input type="datetime-local" name="user_date" /><br />
		<input type="submit" value="提交" />
		<input type="reset" />
	</fieldset>
</body>

</html>

案例2；

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>表单新增input类型的应用</title>
	<script type="text/javascript" src="html5shiv.min.js"></script>
</head>

<body>
	<fieldset style="width:500px;height:200px;padding:20px 50px;">
		<legend align="center">新增其它input类型</legend>
		<form method="post" action="">
			设置颜色：<input type="text" name="color1" id="color1" readonly>
			<input type="color" name="color2" oninput="color1.value=color2.value"><br>
			输入邮箱: <input type="email" name="useremail"><br>
			站内搜索: <input type="search" name="insidesearch"><br>
			电话号码: <input type="tel" name="usrtel" pattern="^1[3|4|5|8][0-9][0-9]{8}$" title="手机号码是11位数字" required><br>
			个人主页：<input type="url" name="homepage"><br>
			年龄：<input type="range" name="age" min="1" max="120" oninput="age_num.value=age.value">
			<output name="age_num" for="age"></output><br>
			期望薪酬：<input type="number" name="quantity" min="2500" max="10000" step="100" value="2500"><br>
			<input type="submit" value="提交" />
			<input type="reset" />
		</form>
	</fieldset>
</body>

</html>

小结(HTML5新增的输入类型)

numbe
range
color
date pickers
- date
- datetime
- datetime-local
- month
week
time
email
search
tel
url
注释：若web浏览器不支持的输入类型，会被视为输入类型text。

posted @ 2020-12-20 21:17 皛心阅读(76) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

皛心

web十七讲中，html5

<input> 元素的输入类型(复习)

HTML5 新增输入类型

输入类型：number

输入限制

输入类型：date

输入类型：color

输入类型：range

输入类型：month

输入类型：week

输入类型：time

输入类型：email

输入类型：search

输入类型：tel

正则表达式(Regular Expression)

输入类型：url

综合案例

小结(HTML5新增的输入类型)

公告