上一节:
下一节:

  HTML <input> 标签type属性

  • <input>标签type属性定义和用法

    type属性指定要显示的<input>元素的类型。
    默认类型是text。
    提示： type属性不是必需属性，但我们认为您应该始终包含它。

  • <input>标签type属性浏览器支持

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持

    注意： type属性适用于所有主流浏览器。但是，并非所有不同的输入类型都适用于所有主流浏览器。看看下面看每一个输入类型的浏览器的支持。

  • HTML4.01和HTML5之间的差异

    HTML5具有以下新输入类型：color, date, datetime-local, month, week, time, email, number, range, search, tel, 和 url.

  • <input>标签type属性语法

    <input type="value">

  • <input>标签type属性值

    下面橙红色的5标识代表HTML5新添加的功能

    属性值 描述
    button 定义可单击的按钮（主要与JavaScript一起使用以激活脚本）
    checkbox 定义一个复选框
    color5 定义颜色选择器
    date5 定义日期控件（年，月，日（无时间））
    datetime-local5 定义日期和时间控件（年，月，日，时间（无时区）
    email5 定义电子邮件地址的字段
    file 定义文件选择字段和“浏览”按钮（用于文件上载）
    hidden 定义隐藏的输入字段
    image 将图像定义为提交按钮
    month5 定义月份和年份控件（无时区）
    number5 定义用于输入数字的字段
    password 定义密码字段
    radio 定义单选按钮
    range5 定义范围控件（如滑块控件）
    reset 定义重置按钮
    search5 定义用于输入搜索字符串的文本字段
    submit 定义提交按钮
    tel5 定义用于输入电话号码的字段
    text 默认。 定义单行文本字段
    time5 定义用于输入时间的控件（无时区）
    url 5 定义用于输入URL的字段
    week5 定义周和年控制（无时区）

  • <input>标签type属性实例

    1、button浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 1.0（含）以上 1.0（含）以上 1.0（含）以上 支持 
    <form>
          <input type="button" value="点击我" onclick="msg()">
        </form>
    尝试一下

    2、checkbox浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  <input type="checkbox" name="vehicle1" value="Bike"> 我有一辆自行车<br>
  <input type="checkbox" name="vehicle2" value="Car"> 我有一辆自轿车<br>
  <input type="checkbox" name="vehicle3" value="Boat" checked> 我有一只船<br><br>
  <input type="submit" value="提交">
</form>
    尝试一下

    3、color浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    38.0（含）以上 20.0（含）以上 29.0（含）以上 10.1（含）以上 11.01（含）以上 
    <form action="/jc_script/action.php">
  选择您喜欢的颜色: <input type="color" name="favcolor" value="#00ff00"><br><br>
  <input type="submit">
</form>
    尝试一下

    4、date浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    12.0（含）以上 20.0（含）以上 57.0（含）以上 不支持 10.1（含）以上 
    <form action="/jc_script/action.php">
  生日: <input type="date" name="bday">
  <input type="submit">
</form>
    尝试一下

    5、datetime-local浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    13.0（含）以上 20.0（含）以上 不支持 不支持 10.1（含）以上 
    <form action="/action_page.php">
  生日: <input type="datetime-local" name="bdaytime">
  <input type="submit">
</form>
    尝试一下

    6、email浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    10.0（含）以上 5.0（含）以上 4.0（含）以上 5.0（含）以上 10.1（含）以上 
    <form action="/jc_script/action.php">
  E-mail: <input type="email" name="emailaddress">
  <input type="submit">
</form>
    尝试一下

    7、file浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 1.0（含）以上 1.0（含）以上 1.0（含）以上 1.0（含）以上 
    <form action="/jc_script/action.php">
  选择文件: <input type="file" name="myFile"><br><br>
  <input type="submit">
</form>
    尝试一下

    8、hidden浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 1.0（含）以上 1.0（含）以上 1.0（含）以上 1.0（含）以上 
    <form action="/jc_script/action.php">
  用户名: <input type="text" name="fname"><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="提交">
</form>
    尝试一下

    9、image浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  姓氏: <input type="text" name="fname"><br>
  名字: <input type="text" name="lname"><br>
  <input type="image" src="/images/btn.jpg" alt="Submit" width="48" height="48">
</form>
    尝试一下

    10、month浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    12.0（含）以上 25.0（含）以上 不支持 不支持 10.（含）以上 
    <form action="/jc_script/action.php">
  生日(年和月): <input type="month" name="bdaymonth">
  <input type="submit">
</form>
    尝试一下

    11、number浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  数量 (1 - 5): <input type="number" name="quantity" min="1" max="5">
  <input type="submit">
</form>
    尝试一下

    12、password浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  用户名: <input type="text" name="username"><br>
  密码: <input type="password" name="pwd" maxlength="8"><br>
  <input type="submit">
</form>
    尝试一下

    13、radio浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  <input type="radio" name="gender" value="male"> PHP<br>
  <input type="radio" name="gender" value="female"> Java<br>
  <input type="radio" name="gender" value="other"> Python<br>  
  <input type="submit" value="Submit">
</form>
    尝试一下

    14、range浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    10.0（含）以上 4.0（含）以上 23.0（含）以上 3.1（含）以上 10.1（含）以上 
    <form action="/jc_script/action.php">
范围: <input type="range" name="points" min="0" max="10">
<input type="submit">
</form>
    尝试一下

    15、reset浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>
    尝试一下
    Edge/IE Chrome FireFox Safari Opera
    10.0（含）以上 26.0（含）以上 4.0（含）以上 5.1（含）以上 12.1（含）以上 
    <form action="/jc_script/action.php">
  百度搜索: <input type="search" name="q"><br>
  <input type="submit">
</form>
    尝试一下

    17、submit浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
First name: <input type="text" name="firstname" value="Mickey"><br>
Last name: <input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="提交">
</form>
    尝试一下

    18、tel浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    不支持 不支持 不支持 支持 不支持 
    <form action="/jc_script/action.php">
  电话号码: <input type="tel" name="usrtel"><br>
  <input type="submit">
</form>
    尝试一下

    19、text浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    支持 支持 支持 支持 支持 
    <form action="/jc_script/action.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit">
</form>
    尝试一下

    20、time浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    12.0（含）以上 20.0（含）以上 57.0（含）以上 不支持 10.1（含）以上 
    <form action="/action_page.php">
  选择一个时间: <input type="time" name="usr_time">
  <input type="submit">
</form>
    尝试一下

    21、url浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    10.0（含）以上 支持 支持 支持 10.1（含）以上 
    <form action="/jc_script/action.php">
  添加你的主页: <input type="url" name="homepage"><br>
  <input type="submit">
</form>
    尝试一下

    22、week浏览器支持与实例

    Edge/IE Chrome FireFox Safari Opera
    10.0（含）以上 支持 支持 支持 10.1（含）以上 
    <form action="/jc_script/action.php">
  选择星期: <input type="week" name="year_week">
  <input type="submit">
</form>
    尝试一下
返回HTML<input>标签
上一节:
下一节: