HTML 输入类型

2017-04-21 本文已影响0人 WILD_POINTER

1、text

<input type="text"> 定义供文本输入的单行输入字段

2、password

<input type="password"> 定义密码字段

<html>

<body>
    <form action="action_page.php">
        User name:<br />
        <input type="text" name="userid"><br />
        User password:<br />
        <input type="password" name="psw">
    </form>
</body>

</html>

3、submit

<input type="submit"> 定义提交表单数据至表单处理程序的按钮。

4、radio

<input type="radio"> 定义单选按钮。

5、checkbox

<input type="checkbox"> 定义复选框。

<html>

<body>
    <form action="action_page.php">
        <input type="checkbox" name="vehicle" value="Bike">I have a bike<br />
        <input type="checkbox" name="vehicle" value="Car">I have a car<br />
        <input type="submit">
    </form>
</body>

</html>

6、button

<input type="button"> 定义按钮。

7、number

<input type="number"> 用于应该包含数字值的输入字段。能够对数字做出限制。

<html>

<body>
    <form action="action_page.php">
        Quantity(between 1 to 5):
        <input type="number" name="quantity" min="10" max="50" step="10" value="20">
        <input type="submit">
    </form>
</body>

</html>

8、date

<input type="date"> 用于应该包含日期的输入字段。

<html>

<body>
    <form action="action_page.php">
        Birthday:
        <input type="date" name="bday" max="2017-04-21" min="1991-12-13">
        <input type="submit">
    </form>
</body>

</html>

9、color

<input type="color"> 用于应该包含颜色的输入字段。

<html>

<body>
    <form action="action_page.php">
        Select your favorite color:
        <input type="color" name="favcolor" value="#ff0000">
        <input type="submit">
    </form>
</body>

</html>

10、range

<input type="range"> 用于应该包含一定范围内的值的输入字段。（滑块）

<html>

<body>
    <form action="action_page.php">
        Points:
        <input type="range" name="points" min="0" max="10" value="3">
        <input type="submit">
    </form>
</body>

</html>

11、month

<input type="month"> 允许用户选择月份和年份。（日期选择器）

12、week

<input type="week"> 允许用户选择周和年。（日期选择器）

13、time

<input type="time"> 允许用户选择时间（无时区）。（时间选择器）

14、datetime

<input type="datetime"> 允许用户选择日期和时间（有时区）。（日期选择器）

15、datetime-local

<input type="datetime-local"> 允许用户选择日期和时间（无时区）。（日期选择器）

16、email

<input type="email"> 用于应该包含电子邮件地址的输入字段。

17、search

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

18、tel

<input type="tel"> 用于应该包含电话号码的输入字段。

19、url

<input type="url"> 用于应该包含 URL 地址的输入字段。