编程笔记 html5&css&js 028 HTML输入属性(2/2)

在HTML5中，有一些新的输入类型和属性可以使表单的处理更加容易和直观。以下是一些例子：

1. 使用URL输入类型：

<label for="homepage">Homepage:</label>
<input type="url" id="homepage" name="homepage">

这将只允许用户输入有效的URL。

2. 使用数字输入类型：

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity" min="1" max="5" step="1">

这将允许用户输入一个介于1到5之间的数字，步长为1。

3. 使用日期输入类型：

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

这将允许用户选择日期。

4. 使用颜色输入类型：

<label for="favoritecolor">Favorite Color:</label>
<input type="color" id="favoritecolor" name="favoritecolor">

这将允许用户选择颜色。

5. 使用电子邮件输入类型：

<label for="email">Email:</label>
<input type="email" id="email" name="email">

这将只允许用户输入有效的电子邮件地址。

6. 使用月份输入类型：

<label for="birthmonth">Birthmonth:</label>
<input type="month" id="birthmonth" name="birthmonth">

这将允许用户选择月份和年份。

7. 使用电话输入类型：

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">

这将允许用户输入电话号码。

8. 使用范围输入类型：

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1">

这将允许用户从0到100之间选择一个值。

9. 使用搜索输入类型：

<label for="search">Search:</label>
<input type="search" id="search" name="search">

这将允许用户输入搜索词，并且可能会在用户提交表单时自动添加搜索引擎特定的参数。

10. 使用时间输入类型：

<label for="appointmenttime">Appointment Time:</label>
<input type="time" id="appointmenttime" name="appointmenttime">

这将允许用户选择时间。

11. 使用周输入类型：

<label for="favorite-weekday">Favorite Weekday:</label>
<input type="week" id="favorite-weekday" name="favorite-weekday">

这将允许用户选择周和年。

12. 使用隐藏输入类型：

<input type="hidden" id="session-id" name="session-id" value="12345">

这将在表单中插入一个隐藏的字段。

13. 使用密码输入类型：

<label for="password">Password:</label>
<input type="password" id="password" name="password">

这将允许用户输入密码，输入的字符会被掩码显示。

14. 使用复选框输入类型：

<