HTML input类型



  • HTML input类型

    本章介绍<input>元素的不同输入类型。
    类型 描述
    text 单行文本输入
    password 密码输入
    submit 提交表单
    reset 重置表单
    radio 单选按钮
    checkbox 多选框
    button 按钮
    color 颜色(HTML5新添加)
    date 日期(HTML5新添加)
    datetime-local 日期时间(HTML5新添加)
    email 电子邮件(HTML5新添加)
    file 文件上传
    month 月份(HTML5新添加)
    number 数字(HTML5新添加)
    range 范围(HTML5新添加)
    search 搜索(HTML5新添加)
    tel 电话(HTML5新添加)
    time 时间(HTML5新添加)
    url 网址(HTML5新添加)
    week 星期(HTML5新添加)
    HTML5新添加的type,旧版浏览器不识别将会表现为text类型。
  • HTML input text

    <input type="text">定义一行文本输入字段
    <form>
             名字:<br>
             <input type="text" name="yourname"><br>
             姓氏:<br>
             <input type="text" name="homename">
           </form>
    
  • HTML input password

    <input type="password">定义密码字段
    <form>
             名字:<br>
             <input type="text" name="yourname"><br>
             密码:<br>
             <input type="password" name="pwd">
           </form>
    
    在密码字段中的字符被掩码(显示为星号或圆圈)。
  • HTML input submit

    <input type="submit">定义了一个用于将表单数据提交给表单处理程序的按钮。 表单处理程序通常是一个服务器页面,其中包含用于处理输入数据的脚本。 表单处理程序在<form>action属性中指定:
    <form action="/jc_script/urlencode.php">
             名字:<br>
             <input type="text" name="yourname"><br>
             姓氏:<br>
             <input type="text" name="homename">
             <input type="submit" value="提交">
           </form>
    
    如果省略提交按钮的value属性,该按钮将获得默认文本:submit。
  • HTML input reset

    <input type="reset">定义一个重置按钮 ,将所有表单值重置为其默认值。
    <form action="/jc_script/urlencode.php">
             名字:<br>
             <input type="text" name="yourname" value="Jim"><br>
             姓氏:<br>
             <input type="text" name="homename" value="Green">
             <input type="submit" value="提交">
             <input type="reset" value="重置">
           </form>
    
  • HTML input radio

    <input type="radio">定义一个单选按钮。
    <form>
             <input type="radio" name="lang" value="java" checked> Java<br>
             <input type="radio" name="lang" value="php"> PHP<br>
             <input type="radio" name="lang" value="python"> Python
           </form>
    
  • HTML input checkbox

    <input type="checkbox">定义一个复选框。复选框允许用户选择有限数量选项的0个或多个选项。
    <form>
             <input type="checkbox" name="lang1" value="java" checked> Java<br>
             <input type="checkbox" name="lang2" value="php"> PHP<br>
             <input type="checkbox" name="lang3" value="python"> Python
           </form>
    
  • HTML input button

    <input type="button">定义一个按钮。
    <input type="button" onclick="alert('欢迎来到蝴蝶教程!')" value="点击我!">
    
  • HTML input color

    <input type="color">定义一个颜色输入字段。
    <form action="/jc_script/urlencode.php">
             选择您喜欢的颜色
             <input type="color" name="favcolor" value="#00FF00">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="color" IE11或更早的版本不支持,Safari9.1或更早的版本不支持。</p>
    
  • HTML input date

    <input type="date">定义一个日期输入字段。
    <form action="/jc_script/urlencode.php">
             生日:
             <input type="date" name="bday">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="date" IE11或更早的版本不支持,Safari不支持。</p>
    
    您还可以使用minmax属性为日期添加限制:
    <form action="/jc_script/urlencode.php">
             开始时间:
             <input type="date" name="starttime" min="1999-01-01">
             结束时间:
             <input type="date" name="endtime" max="2028-12-31">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="date" IE11或更早的版本不支持,Safari不支持。</p>
    
  • HTML input datetime-local

    <input type="datetime-local">定义一个日期时间输入字段。
    <form action="/jc_script/urlencode.php">
             生日:
             <input type="datetime-local" name="bday">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="datetime-local" IE12或更早的版本不支持,Safari不支持。Firefox不支持。</p>
    
  • HTML input email

    <input type="email">被用于应该包含一个E-mail地址输入字段。根据浏览器支持,可以在提交时自动验证电子邮件地址。一些智能手机识别电子邮件类型,并在键盘上添加“.com”以匹配电子邮件输入。
    <form action="/jc_script/urlencode.php">
             E-mail:
             <input type="email" name="email">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="email" IE9或更早的版本不支持。</p>
    
  • HTML input file

    <input type="file">定义文件选择字段和文件上传一个“浏览”按钮。
    <form action="/jc_script/urlencode.php">
             选择文件:
             <input type="file" name="file">
             <input type="submit" value="提交">
           </form>
    
    
  • HTML input month

    <input type="month">允许用户选择年份和月份。
    <form action="/jc_script/urlencode.php">
             生日:
             <input type="month" name="bday">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="month" IE11或更早的版本不支持,Firefox不支持,Safari不支持</p>
    
    
  • HTML input number

    <input type="number">定义了一个数字输入字段。 还可以对接受的数字设置限制。 以下示例显示数字输入字段,您可以在其中输入10到15之间的值:
    <form action="/jc_script/urlencode.php">
              请输入10-15的数字:
             <input type="number" min="10" max="15" name="number">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="number" IE9或更早的版本不支持。</p>
    
    
    还可以用step属性设置步长
    <form action="/jc_script/urlencode.php">
              请输入0-50为5的倍数的数字:
             <input type="number" min="0" max="50"  step="5" name="number">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="number" IE9或更早的版本不支持。</p>
    
    
  • HTML input range

    <input type="range">限定用于输入数字,其确切值(滑块控制)。默认范围是0到100。但是,您可以设置被接受什么数字与限制minmax以及step属性:
    <form action="/jc_script/urlencode.php">
             范围输入:
             <input type="range" name="range" min="10" max="100" step="10">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="range" IE9或更早的版本不支持。</p>
    
    
  • HTML input search

    <input type="search">用于搜索字段(搜索字段行为就像一个普通的文本字段)。
    <form action="/jc_script/urlencode.php">
             百度一下:
             <input type="search" name="search">
             <input type="submit" value="提交">
           </form>
    
    
  • HTML input tel

    <input type="tel">被用于应该包含电话号码输入字段。
    <form action="/jc_script/urlencode.php">
             请输入电话号码:
             <input type="tel" name="tel">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="tel" 只在Safari8支持。</p>
    
    
  • HTML input time

    <input type="time">允许用户选择时间。
    <form action="/jc_script/urlencode.php">
             请输入时间:
             <input type="time" name="time">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="time" IE12或更早的版本不支持,Safari不支持</p>
    
    
  • HTML input url

    <input type="url">被用于应该包含URL地址的输入域。根据浏览器支持,url字段可以在提交时自动验证。一些智能手机识别网址类型,并在键盘上添加“.com”以匹配网址输入。
    <form action="/jc_script/urlencode.php">
             请输入网址:
             <input type="url" name="url">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="url" IE9或更早的版本不支持。</p>
    
    
  • HTML input week

    <input type="week">一年的第几个星期
    <form action="/jc_script/urlencode.php">
             x年x周:
             <input type="week" name="week">
             <input type="submit" value="提交">
           </form>
           <p><b>提示:</b> type="week" IE11或更早的版本不支持,Firefox不支持,Safari不支持。</p>