input（tpye）属性汇总

类型：

代码：

 <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>

效果图如下：