输入类型=“月”
月份输入类型创建允许用户输入月份和年份的输入字段。
该值是一个“YYYY-MM”格式的字符串，其中 YYYY 是四位数的年份，MM 是月份。
使用 min 和 max 属性为用户设置限制。
使用“月”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="month" name="month" value="2015-01" min="2015-01" max="2019-12">
</form>
</body>
</html>
输入类型=“颜色”
颜色输入类型提供了一个用户界面元素，允许用户选择颜色并返回该颜色的十六进制值。
value 属性通常与颜色输入类型一起使用，以指定首先设置哪种颜色供用户开始选择。
如果没有指定 value 属性，它会自动设置“#000000”。
使用“颜色”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="color" name="color" value="#1c87c9" />
</form>
</body>
</html>
输入类型=“密码”
此输入类型用于为用户提供一种安全设置密码的方法。
它显示为单行纯文本编辑器控件，其中文本被遮挡以致无法读取，通常通过用星号 (“*”) 或者点 (“”) 等符号替换每个字符。
此字符可能因用户代理而异。
我们可以使用 minlength 属性设置密码的最小长度。
使用“密码”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
</form>
</body>
</html>
输入类型=“日期”
日期选择器被广泛用于帮助用户快速轻松地选择所需的日期。
使用日期输入类型创建输入字段以允许用户输入日期。
结果值包括年、月和日，但不包括时间。
我们可以使用 min 和 max 属性来确保用户只能从指定的日期范围中进行选择。
使用“日期”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="date" name="date" value="2015-01-01" min="2015-01-01" max="2019-01-01">
</form>
</body>
</html>
输入类型=“周”
输入类型周创建输入字段，让用户可以轻松选择年份加上该年的 ISO 8601 周数（可以是从第 1 周到第 52 周或者第 53 周）。
使用“week”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="week" name="week" min="2015-W1" max="2015-W52">
</form>
</body>
</html>
输入类型=“提交”
输入类型 submit 创建一个提交按钮，将表单提交给服务器。
如果你没有定义一个值，按钮将有一个默认标签，由用户代理选择。
使用“提交”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="submit" value="Submit">
</form>
</body>
</html>
输入类型=“电子邮件”
电子邮件输入类型用于让用户输入和编辑电子邮件地址，或者，如果定义了多个属性，则可以输入和编辑多个电子邮件地址。
由于 CSS :valid 和 :invalid 伪类，输入值会自动显示它是否是格式正确的电子邮件地址。
使用“电子邮件”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="email" name="email" placeholder="Email" multiple>
<input type="submit" value="Send">
</form>
</body>
</html>
输入类型=“范围”
此输入类型允许用户指定一个不小于指定值且不大于另一个指定值的数值。
当控件的确切值不重要时使用它。
它通常使用滑块或者拨号控件，而数字输入类型显示文本输入框。
如果用户的浏览器不支持范围，它将回退并将其显示为文本输入。
要显示级别，请使用具有范围输入类型的 min 和 max 属性。
使用 value 属性添加一个起点。
使用“范围”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="range" min="0" max="20" value="0">
</form>
</body>
</html>
输入类型=“文本”
文本类型的 HTML <input> 元素创建基本的单行输入。
当我们希望用户输入单行值时使用它们。
添加 required 属性以确保用户将填写该字段。
使用“文本”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" required placeholder="Text">
</form>
</body>
</html>
输入类型=“数字”
数字输入类型用于输入数值。
它验证和拒绝非数字条目。
借助 min、max 和 step 属性，我们可以控制默认值并设置最小值、最大值和起始值。
使用“数字”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="number" min="1" max="15" step="1" name="number-of-colors">
</form>
</body>
</html>
输入类型=“时间”
时间输入类型用于创建输入字段，允许用户轻松输入时间（小时和分钟，有时是秒）。
时间输入类型的值通常采用 24 小时格式（“hh:mm”）。
如果时间包括秒，则格式始终为“hh:mm:ss”。
如果你想让用户也提到秒，你可以在 step 属性的帮助下完成。
请注意，使用 step 属性可能会导致验证无法正常工作并且不完全可靠。
使用“时间”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="time" name="time" value="22:00" />
</form>
</body>
</html>
输入类型=“网址”
此输入类型用于网址。
在提交表单之前，它会自动验证以确保它是空的或者格式正确的 URL。
在 multiple 属性的帮助下，可以使用多个 URL。
使用“url”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="url" placeholder="URL" multiple>
</form>
</body>
</html>
输入类型=“收音机”
输入类型 radio 用于创建单选按钮。
单选按钮通常用于指定组项目。
一次只能选择一组中的一个单选按钮。
使用“radio”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="radio" name="gender" value="male">Male
<br>
<input type="radio" name="gender" value="female">Female
</form>
</body>
</html>
HTML5 中有许多可用的输入类型。
这些输入类型通常用于创建 HTML 表单。
我们将简要介绍它们中的每一个，并解释我们现在应该使用它们的原因。
使用这些输入类型可以节省时间并改善用户体验。
HTML有很多输入框类型，要讨论的输入类型是：
text | email | url | tel | number | range | radio | color | date | month | week | time | datetime-local | password | submit | reset
输入类型=“重置”
输入类型重置用于插入重置按钮，允许用户将所有表单值重置为初始值。
避免在表单中使用重置按钮，因为用户可能会误点击它并丢失他们填写的所有信息。
使用“重置”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="text" name="name" placeholder="Enter your name">
<input type="reset" value="Reset">
</form>
</body>
</html>
现在，当我们完成输入类型时，让我们看一个完整的表单示例，其中使用了所有这些输入类型：
使用所有输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
margin-bottom: 20px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fill the Form to Participate in the Big Project</h2>
<form action="/form/submit" method="post">
<fieldset>
<legend>Personal information</legend>
<label for="name"> First name: </label>
<input id="name" type="text" name="firstname" placeholder="First name" required>
<label for="last">Last name:</label>
<input id="last" type="text" name="lastname" placeholder="Last name" required>
<br>
<br>
<label for="age">Age:</label>
<input id="age" type="number" min="10" max="100" step="1" name="number-of-colors">
<label for="website">Website:</label>
<input id="website" type="url" multiple>
<br>
<br>
<label for="address">Email address:</label>
<input id="address" type="email" name="email" placeholder="YourEmail@example.com" required>
<label for="tel">Tel.:</label>
<input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<br>
<br>
</fieldset>
<fieldset>
<legend>Getting to know YOU</legend>
<label for="color">Favourite color:</label>
<input id="color" type="color" name="color" value="#1c87c9" />
<br>
<p>Motivation level:</p>
<input type="range" min="0" max="10" value="4">
<br>
<p>Favourite season:</p>
<input type="radio" name="season" value="winter"> Winter
<br>
<input type="radio" name="season" value="autumn"> Autumn
<br>
<input type="radio" name="season" value="summer"> Summer
<br>
<input type="radio" name="season" value="spring"> Spring
<br>
<p>Favourite music:</p>
<input type="radio" name="music" value="jazz"> Jazz
<br>
<input type="radio" name="music" value="blues"> Blues
<br>
<input type="radio" name="music" value="pop"> Pop
<br>
<input type="radio" name="music" value="rock"> Rock
<br>
</fieldset>
<fieldset>
<legend>Availability</legend>
<label for="project">When you will be ready to start the Project?</label>
<input id="project" type="date" name="date" value="2015-01-01" min="2015-01-01" max="2015-04-01">
<br>
<label for="hours">Mention your preferred working hours:</label>
<input id="hours" type="time" name="time" value="09:00" />
<label for="time">To </label>
<input id="time" type="time" name="time" value="18:00" />
<br>
<label for="password"> Enter your password:</label>
<input id="password" type="password" name="password" minlength="6" required placeholder="6 characters minimum" />
<br>
<br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</fieldset>
</form>
</body>
</html>
输入类型=“电话”
tel 输入类型用于键入和编辑电话号码。
此输入值不会自动验证。
它在功能上对移动浏览器很方便，因为智能手机通常会识别输入类型并更改显示数字键盘的键盘。
使用“tel”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="tel" placeholder="Phone Number">
</form>
</body>
</html>
输入类型=“日期时间-本地”
datetime-local 输入类型用于创建输入控件以允许用户轻松输入日期和时间（年、月、日和时间，以小时和分钟为单位）。
它显示用户的本地时区。
使用“datetime-local”输入类型的示例：
<!DOCTYPE html>
<html>
<head>
<style>
input {
padding: 10px;
}
</style>
</head>
<body>
<h1>Example</h1>
<form action="/form/submit" method="post">
<input type="datetime-local" name="meeting" />
</form>
</body>
</html>