zoukankan      html  css  js  c++  java
  • input type类型和input表单属性

    一、input type类型

    1.Input 类型 - email

    在提交表单时,会自动验证 email 域的值。

    E-mail: <input type="email" name="user_email" />

    当不符合邮箱的时候会自动弹出

    2.Input 类型 - url

    url 类型用于应该包含 URL 地址的输入域。

    在提交表单时,会自动验证 url 域的值。

    Homepage: <input type="url" name="user_url" />

     错误时提示

    3.Input 类型 - number

    number 类型用于应该包含数值的输入域。

    您还能够设定对所接受的数字的限定:

    Points: <input type="number" name="points" min="1" max="10" />

     可以店家右边上下箭头加减,当不符合的时候

    属性描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    4.Input 类型 - range

    range 类型用于应该包含一定范围内数字值的输入域。

    range 类型显示为滑动条。

    您还能够设定对所接受的数字的限定:

    <input type="range" name="points" min="1" max="10" />

     可以左右滑动

    属性描述
    max number 规定允许的最大值
    min number 规定允许的最小值
    step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等)
    value number 规定默认值

    5.Input 类型 - Date Pickers(日期选择器)

    HTML5 拥有多个可供选取日期和时间的新输入类型:

    • date - 选取日、月、年
    • month - 选取月、年
    • week - 选取周和年
    • time - 选取时间(小时和分钟)
    • datetime - 选取时间、日、月、年(UTC 时间)
    • datetime-local - 选取时间、日、月、年(本地时间)

    下面的例子允许您从日历中选取一个日期:

    Date: <input type="date" name="user_date" />
    Date: <input type="month" name="user_date" />

    6.Input 类型 - search

    search 类型用于搜索域,比如站点搜索或 Google 搜索。

    search 域显示为常规的文本域。

     

    输入时会自动弹出X

     7.Input类型--color

    定义拾色器

    <input type="color">

    其他input类型

    描述
    button 定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。
    checkbox 定义复选框。
    file 定义输入字段和 "浏览"按钮,供文件上传。
    hidden 定义隐藏的输入字段。
    image 定义图像形式的提交按钮。
    password 定义密码字段。该字段中的字符被掩码。
    radio 定义单选按钮。
    reset 定义重置按钮。重置按钮会清除表单中的所有数据。
    submit 定义提交按钮。提交按钮会把表单数据发送到服务器。
    text 定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。

    二、input 表单属性

    属性

    New : HTML5新标签。

    属性描述
    accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file")
    align left right top middle bottom HTML5已废弃,不赞成使用。规定图像输入的对齐方式。 (只针对type="image")
    alt text 定义图像输入的替代文本。 (只针对type="image")
    autocompleteNew on off autocomplete 属性规定 <input> 元素输入字段是否应该启用自动完成功能。
    autofocusNew autofocus 属性规定当页面加载时 <input> 元素应该自动获得焦点。
    checked checked checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
    disabled disabled disabled 属性规定应该禁用的 <input> 元素。
    formNew form_id form 属性规定 <input> 元素所属的一个或多个表单。
    formactionNew URL 属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
    formenctypeNew application/x-www-form-urlencoded multipart/form-data text/plain 属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
    formmethodNew get post 定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
    formnovalidateNew formnovalidate formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
    formtargetNew _blank _self _parent _top framename 规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
    heightNew pixels 规定 <input>元素的高度。(只针对type="image")
    listNew datalist_id 属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
    maxNew number date 属性规定 <input> 元素的最大值。
    maxlength number 属性规定 <input> 元素中允许的最大字符数。
    minNew number date 属性规定 <input>元素的最小值。
    multipleNew multiple 属性规定允许用户输入到 <input> 元素的多个值。
    name text name 属性规定 <input> 元素的名称。
    patternNew regexp pattern 属性规定用于验证 <input> 元素的值的正则表达式。
    placeholderNew text placeholder 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
    readonly readonly readonly 属性规定输入字段是只读的。
    requiredNew required 属性规定必需在提交表单之前填写输入字段。
    size number size 属性规定以字符数计的 <input> 元素的可见宽度。
    src URL src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
    stepNew number step 属性规定 <input> 元素的合法数字间隔。
    type button 
    checkbox 
    color 
    date 
    datetime 
    datetime-local 
    email 
    file 
    hidden 
    image 
    month 
    number 
    password 
    radio 
    range 
    reset 
    search 
    submit 
    tel 
    text 
    time 
    url 
    week
    type 属性规定要显示的 <input> 元素的类型。
    value text 指定 <input> 元素 value 的值。
    widthNew pixels width 属性规定 <input> 元素的宽度。 (只针对type="image")

    三、补充 label标签

      <label for="male">Male</label>
      <input type="radio" name="sex" id="male" value="male"><br>
      <label for="female">Female</label>
      <input type="radio" name="sex" id="female" value="female"><br><br>

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    <label> 标签的 for 属性应当与相关元素的 id 属性相同。

    四、补充input maxlength 属性

    定义和用法:

    maxlength 属性与 input type="text" 或 input type="password" 配合使用。

    注意:字节不等同于字符,字节不等同于字符,字节不等同于字符。

    maxlength 属性规定输入字段的最大长度,以字符个数计。英文一个字母一个字符,汉字虽然占两个字节,但是只占一个字符。

  • 相关阅读:
    Chapter 12 homework
    copy construction note
    Chapter 11 homework
    数组排序最大元素
    temporary Object and destructor
    strcpy() 函数注意的地方
    结对项目第二次作业
    结队项目——第一次作业
    软件工程实践2017第二次作业
    软件工程实践2017第一次作业
  • 原文地址:https://www.cnblogs.com/zjx304/p/10537493.html
Copyright © 2011-2022 走看看