input标签的type属性汇总

input（tpye）属性汇总

值	描述
button	定义可点击的按钮（通常与 JavaScript 一起使用来启动脚本）。
checkbox	定义复选框。
color	定义拾色器。
date	定义 date 控件（包括年、月、日，不包括时间）。
datetime	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，基于 UTC 时区）。
datetime-local	定义 date 和 time 控件（包括年、月、日、时、分、秒、几分之一秒，不带时区）。
email	定义用于 e-mail 地址的字段。
file	定义文件选择字段和 “浏览…” 按钮，供文件上传。
hidden	定义隐藏输入字段。
image	定义图像作为提交按钮。
month	定义 month 和 year 控件（不带时区）。
number	定义用于输入数字的字段。
password	定义密码字段（字段中的字符会被遮蔽）。
radio	定义单选按钮。
range	定义用于精确值不重要的输入数字的控件（比如 slider 控件）。
reset	定义重置按钮（重置所有的表单值为默认值）。
search	定义用于输入搜索字符串的文本字段。
submit	定义提交按钮。
tel	定义用于输入电话号码的字段。
text 默认	定义一个单行的文本字段（默认宽度为 20 个字符）。
time	定义用于输入时间的控件（不带时区）。
url	定义用于输入 URL 的字段。
week	定义 week 和 year 控件（不带时区）。

类型：

input 的 tpye 类型：
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

代码：

 <tr>
                    <!-- 没有默认行为的按钮，上面显示value属性的值，默认为空。 -->
                    <td>button</td>
                    <td><input type="button" name="button" value="button" /></td>
                </tr>
                <tr>
                    <!-- 复选框，可设为选中或未选中。 -->
                    <td>checkbox</td>
                    <td>
                        <input type="checkbox" name="checkbox" />1
                        <input type="checkbox" name="checkbox" />2
                        <input type="checkbox" name="checkbox" />3
                    </td>
                </tr>
                <tr>
                    <!-- 用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。 -->
                    <td>color</td>
                    <td><input type="color" name="color" /></td>
                </tr>
                <tr>
                    <!-- 输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 -->
                    <td>date</td>
                    <td><input type="date" name="date" /></td>
                </tr>
                <tr>
                    <!-- 输入日期和时间的控件，不包括时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。 -->
                    <td>datetime-local</td>
                    <td><input type="datetime-local" name="datetime-local" /></td>
                </tr>
                <tr>
                    <!-- 编辑邮箱地址的区域。类似text输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。 -->
                    <td>email</td>
                    <td><input type="email" name="email" /></td>
                </tr>
                <tr>
                    <!-- 让用户选择文件的控件。使用accept属性规定控件能选择的文件类型。 -->
                    <td>file</td>
                    <td><input type="file" accept="image/*, text/*" name="file" /></td>
                </tr>
                <tr>
                    <!-- 不显示的控件，其值仍会提交到服务器。举个例子，右边就是一个隐形的控件。 -->
                    <td>hidden</td>
                    <td><input type="hidden"></td>
                </tr>
                <tr>
                    <!-- 带图像的submit按钮。显示的图像由src</code> 属性规定。如果src缺失，alt属性就会显示。 -->
                    <td>image</td>
                    <td><input type="image" name="image" src="./img/Earthquake.png" alt="image input" /></td>
                </tr>
                <tr>
                    <!-- 输入年和月的控件，没有时区。 -->
                    <td>month</td>
                    <td> <input type="month" name="month" /></td>
                </tr>
                <tr>
                    <!-- 用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。 -->
                    <td>number</td>
                    <td><input type="number" name="number" /></td>
                </tr>
                <tr>
                    <!-- 单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。 -->
                    <td>password</td>
                    <td><input type="password" name="password" /></td>
                </tr>
                <tr>
                    <!-- 单选按钮，允许在多个拥有相同name 值的选项中选中其中一个。 -->
                    <td>radio</td>
                    <td>
                        <input type="radio" name="radio" />
                        <input type="radio" name="radio" />
                    </td>
                </tr>
                <tr>
                    <!-- 此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。 -->
                    <td>range</td>
                    <td><input type="range" name="range" min="0" max="25" /></td>
                </tr>
                <tr>
                    <!-- 此按钮将表单的所有内容重置为默认值。不推荐。 -->
                    <td>reset</td>
                    <td><input type="reset" name="reset" value="重置" /></td>
                </tr>
                <tr>
                    <!-- 用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。 -->
                    <td>search</td>
                    <td><input type="search" name="search" /></td>
                </tr>
                <tr>
                    <!-- 用于提交表单的按钮。 -->
                    <td>submit</td>
                    <td> <input type="submit" name="submit" /></td>
                </tr>
                <tr>
                    <!-- 用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。 -->
                    <td>tel号码</td>
                    <td> <input type="tel" name="tel" /></td>
                </tr>
                <tr>
                    <!-- 默认值。单行的文本区域，输入中的换行会被自动去除。 -->
                    <td>text</td>
                    <td><input type="text" name="text" /></td>
                </tr>
                <tr>
                    <!-- 用于输入时间的控件，不包括时区。 -->
                    <td>time</td>
                    <td><input type="time" name="time" /></td>
                </tr>
                <tr>
                    <!-- 用于输入 URL 的控件。类似text输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。 -->
                    <td>url（http）</td>
                    <td><input type="url" name="url" /></td>
                </tr>
                <tr>
                    <!-- 用于输入以年和周数组成的日期，不带时区。 -->
                    <td>week</td>
                    <td><input type="week" name="week" /></td>
                </tr>

效果图如下：