Html5中的input标签之多少-阿里云开发者社区

Html5中的input标签之多少

2023-07-16 67

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Html5中的input标签之多少

Html5中type必有的以下的特殊属性

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

color

选择你喜欢的颜色: <input type="color" name="favcolor">

date

请输入自己生日: <input type="date" name="bday">

datetime

请输入自己生日具体时间(日期和时间): <input type="datetime" name="bdaytime">

datetime-local

请输入自己生日具体时间(日期和时间): <input type="datetime-local" name="bdaytime">

email

E-mail邮箱的地址: <input type="email" name="email">

month

请输入自己生日 (月和年): <input type="month" name="bdaymonth">

number

1请输入数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1"
max="5">

range

请在范围中选择<input type="range" name="points" min="10" max="20">

search

Search Google: <input type="search" name="googlesearch">

tel

请输入电话号码: <input type="tel" name="usrtel">

time

请选择时间: <input type="time" name="usr_time">

url

添加您的主页: <input type="url" name="homepage">

week

选择周: <input type="week" name="week_year">

disabled 规定输入字段是禁用的

max 规定允许的最大值

maxlength 规定输入字段的最大字符长度

min 规定允许的最小值

pattern 规定用于验证输入字段的模式

readonly 规定输入字段的值无法修改

required 规定输入字段的值是必需的

size 规定输入字段中的可见字符数

step 规定输入字段的合法数字间隔

value 规定输入字段的默认值

HTML中的一些input中Type属性回顾

<form action="" method="post">
    你的出生地？
  <select size="4" multiple="multiple">
    <option value="beijing" selected="selected">1</option>
    <option value="hebei">2</option>
    <option value="hennan">3</option>
    <option value="shanhai">4</option>
    <option value="shandong">5</option>
  </select><br>
    你的居住地是？
    <select size="2">
      <option value="beijing">1</option>
      <option value="hebei">2</option>
      <option value="hennan">3</option>
      <option value="shanhai">4</option>
      <option value="shandong">5</option>
    </select>
    你去过的地方？
    <select multiple="multiple">
      <option value="beijing">1</option>
      <option value="hebei">2</option>
      <option value="hennan">3</option>
      <option value="shanhai">4</option>
      <option value="shandong">5</option>
    </select>
    你吃过的菜在哪里？
    <select size="7" multiple="multiple">
      <optgroup label="11233">
        <option value="beijing">1</option>
        <option value="hebei">2</option>
        <option value="hennan">3</option>
      </optgroup>
      <optgroup label="333333">
        <option value="beijing">1</option>
        <option value="hebei">2</option>
        <option value="hennan">3</option>
        <option value="shanhai">4</option>
        <option value="shandong">5</option>
      </optgroup>
    </select>
    <button type="submit">提交</button><br>
    <button type="reset">重置</button><br>
    <textarea cols="50" row="5"></textarea><br>
    <textarea cols="60" rows="6" readonly="readonly">这个文本只读的领域</textarea>
    <input type="color " name="color" id="" value="#ff0000"><br>
    <input type="submit" id="name">
    <input type="time" name="time" id= value=""><br>
    <input type="submit" id="  " name="">
    <input type="datetime-local" name="date"  id=" " value=" "><br>
    <input type="submit" this.id="" name="">
    <input type="month" name="month" this.id="" value="" min="2021-02" max="2030-04">
    <input type="submit" this.id=""  name="">
    <input type="week" name="week" this.id="" value="" min="2021-w01" max="2030-w12">
    <input type="submit" this.id=""  name="">
    <input type="number" name="number" this.id="" value="" min="0" max="100" step="10">
    <input type="submit" this.id=""  name="">
    <input type="range" name="range" this.id="" value="" min="0" max="100" step="10">
    <input type="submit" this.id=""  name="">
</form>
</div>