精华内容
下载资源
问答
  • input标签type属性
    千次阅读
    2019-03-26 22:59:13

    input标签的type属性值以及相关描述

    input标签的type属性值以及相关描述
    type属性描述
    text文本域
    password密码域
    file文件域
    checkbox复选域
    radio单选域
    buttom按钮
    submit提交按钮
    reset重置按钮
    hidden隐藏域
    image图像域

     

    更多相关内容
  • input标签type属性汇总

    千次阅读 多人点赞 2022-04-20 00:23:58
    input type=“text”/> 单行文本输入框常用来输入简短的信息,如用户名、账号等,常用的属性有name、value、 maxlength。 2.密码输入框< input type=" password"/> 密码输入框用来输入密码,其内容将以...

    1.单行输入框< input type=“text”/>
    单行文本输入框常用来输入简短的信息,如用户名、账号等,常用的属性有name、value、 maxlength。

    2.密码输入框< input type=" password"/>
    密码输入框用来输入密码,其内容将以圆点的形式显示。

    3.单选按钮< input type=" radio"/>
    单选按钮用于单项选择,如选择性别、是否操作等。需要注意的是,在定义单选按钮时,必须为同一组中的选项指定相同的name值,这样“单选”才会生效。此外,可以对单选按钮应用 checked属性,指定默认选中项。

    4.复选框< input type=" checkbox"/>
    复选框常用于多项选择,如选择兴趣、爱好等,可对其应用 checked属性,指定默认选中项。

    5.普通按钮< input type=" button"/>
    普通按钮常常配合JavaScript脚本语言使用,初学者了解即可。

    6.提交按钮< nput type=" 'submit"/>
    提交按钮是表单中的核心控件,用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性,改变提交按钮上的默认文本。

    7.重置按钮< input type=" reset"/>
    当用户输入的信息有误时,可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性,改变重置按钮上的默认文本。

    8.图像形式的提交按钮< input type=" image"/>
    图像形式的提交按钮与普通的提交按钮在功能上基本相同,只是它用图像替代了默认的按钮,外观上更加美观。需要注意的是,必须为其定义src属性指定图像的url地址。

    9.隐藏域< input type=" hidden"/>
    隐藏域对于用户是不可见的,通常用于后台的程序,初学者了解即可。

    10.文件域< input type=“file”/>
    当定义文件域时,页面中将出现一个“选择文件”按钮和提示信息文本,用户可以通过单击按钮然后直接选择文件的方式,将文件提交给后台服务器。

    11.emai类型< input type=“email”/>

    emai类型的标记是一种专门用于输入E-mai地址的文本输入框,用来验证emai输入框的内容是否符合E-mai地址格式;如果不符合,将提示相应的错误信息。

    12.url类型 <input type “url”/>
    Url类型的< input />标记是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本,则会提交数据到服务器;如果输入的值不符合URL地址格式,则不允许提交,并且会有提示信息。

    13.tel类型< input type=“tel”/>
    tel类型用于提供输入电话号码的文本框,由于电话号码的格式千差万别,很难实现一个通用的格式。因此,tel类型通常会和 pattern属性配合使用。

    14 search类型< input type=" search"/>

    search类型是一种专门用于输入搜索关键词的文本框,它能自动记录一些字符,如站点搜索或者Google搜索。在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。

    15 color类型< input type=" color"/>
    color类型用于提供设置颜色的文本框,用于实现一个RGB颜色输入。其基本形式是# RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色。单击clor类型文本框,可以快速打开拾色器面板,方便用户可视化选取一种颜色。

    16 number类型< input type=" number/>
    number类型的 <input/标记用于提供输入数值的文本框。在提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内则会出现错误提示。

    number类型的输入框可以对输入的数字进行限制,规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下。
    ●vale:指定输入框的初始值
    ●max:指定输入框可以接受的最大的输入值。
    min:指定输入框可以接受的最小的输入值。
    ●sep:输入域合法的数字间隔,如果不设置,默认值是1。

    17 range类型< input type=" range"/>
    range类型的<inpu标记用于提供一定范围内数值的输入范围,在网页中显示为滑动条。它的常用属性与 number类型一样,通过min属性和max属性,可以设置最小值与最大值,通过step属性指定每次滑动的步幅。如果想改变mnge的vale值,可以通过直接拖动滑动块或者单击滑动条来改变。

    18.Date pickers类型< input type= date, month,week…"/>
    Date picker类型是指时间日期类型。HML中提供了多个可供选取日期和时间的输入类型,用于验证输入的日期、具体。
    Date:选取日、月、年
    Month:选取月、年
    Week:选取周、年
    Time:选取时间(小时和分钟)
    Datetime:选取时间、日、月、年(UTC时间)
    datetime-local:选取时间、日、月、年(本地时间)

    UTC是 Universal Time Coordinated的英文缩写,即“协调世界时”,又称世界标准时间。简单地说,UTC时间就是0时区的时间。例如,如果北京时间为早上8点,则UTC时间为0点,即UC时间比北京时间晚8小时。

    注意:对于浏览器不支持的标记输入类型,则会在网页中显示为一个普通输入框。

    以上就是标签的type属性汇总,希望对您有所帮助。
    在这里插入图片描述

    展开全文
  • Input标签type属性

    千次阅读 多人点赞 2019-02-22 17:04:47
    html中有许多标签有多个属性input标签就是其中一个。 属性值 描述 button 生成按钮 radio 生成单选按钮 submit 生成提交按钮 text 生成文本框 file 生成“浏览”按钮 hidden 生成隐藏的输...

    撰写日期:2019年02月20日

    html中有许多标签有多个属性,input标签就是其中一个。

    属性值描述
    button生成按钮
    radio生成单选按钮
    submit生成提交按钮
    text生成文本框
    file生成“浏览”按钮
    hidden生成隐藏的输入字段
    passwrord生成密码输入框
    checkbox生成复选框
    image生成图片形式的提交按钮
    reset生成重置按钮

    Input的type属性代码如下:
    在这里插入图片描述
    代码实现效果如下:

    在这里插入图片描述

    如有错漏,感谢纠正!

    展开全文
  • 表单input标签type属性详解

    万次阅读 多人点赞 2016-02-26 15:38:03
    input标签type属性详解

    目标:详解表单input标签type属性常用的属性值

    一、input标签和它的type属性
    PS:input 元素可以用来生成一个供用户输入数据的简单文本框。 在默认的情况下, 什么样的数据均可以输入。而通过不同的type属性值,可以限制输入的内容。

    二、总结
    1、text 一个单行文本框,默认属性值
    2、password 隐藏字符的密码框
    3、search 搜索框,在某些浏览器中输入内容会出现叉形标记
    4、submit、reset、button 依次是:提交按钮、重置按钮、普通按钮
    5、number、range 依次是:只能输入数值的框、只能输入在一个指定范围的数值框
    6、checkbox、radio 依次是:复选框,一组复选框(name属性值相同)用户可以勾选多个、单选按钮,一组单选按钮(name属性值相同)用户只可以选中一个
    7、image、color 依次是:图片按钮、颜色代码按钮
    8、email、tel、url 依次是:检测电子邮件、号码、网址的文本框
    9、hidden 生成一个隐藏控件
    10、file 生成一个上传控件
    11、获取各种日期、时间 data、month、time、week、datetime、datatime-local

    三、详解
    1、type=”text”
    1.1)、list 指定为文本框提供建议值的 datalist 元素,其值为datalist 元素的 id 值
    1.2)、maxlength 设置文本最大字符长度
    1.3)、pattern 用于输入验证的正则表达式
    1.4)、placeholder 输入提示的文本,当用户输入内容时会自动消失
    1.5)、readonly 文本框处于只读状态
    1.6)、disabled 文本框处于禁用状态
    1.7)、size 设置文本框宽度
    1.8)、value 设置文本框初始值,会显示在文本框中,显示时优先级比placeholder高,表单提交时优先提交用户输入的内容,如果用户没有输入则提交默认的值
    1.9)、required 表示用户必须输入一个值,否则无法通过输入验证

    2、type=”password”,和type=”text”时所拥的额外属性基本一致,少了一个list属性

    3、type=”search” , 和type=”text”所有用的额外属性值一致

    4、当type为submit、reset、button,提交表单、重置表单、普通按钮
    4.1)、如果是 submit 时,还提供了和元素一样的额外属性:formaction、formenctype、formmethod、formtarget 和 formnovalidate。

    5、当type为number、range时
    5.1)、type=”number” 只能输入数字的文本框
    5.2)、type=”range” 生成一个通过拖拽调节大小的调节器
    额外属性:
    5.3)、min 设置可接受的最小值
    5.4)、max 设定可接受的最大值
    5.5)、value 指定初始值
    5.6)、step 指定上下调节值的步长
    5.7)、required 表明用户必须输入一个值,否则无法通过输入验证
    5.8)、readonly 设置文本框内容只读

    6、当type为checkbox、radio
    6.1)、不管type等于checkbox还是radio,都必须有属性name和value
    6.2)、他们还有可选属性checked、required
    PS:复选框和单选按钮都是以一组一组的形式存在,name值相同的即为一组,一组复选框可以同时选中几个,而一组单选按钮同时只能选中一个

    <section>
      <label for="c">C</label>            <input type="checkbox" id="c" name="hobby" value="c"/>
      <label for="python">python</label>   <input type="checkbox" id="python" name="hobby" value="python"/>
      <label for="java">java</label>       <input type="checkbox" id="java" name="hobby"  value="java"/>
    </section>
    <section>
      <label for="apple">apple</label>     <input type="checkbox" id="apple" name="eat" value="apple"/>
      <label for="orange">orange</label>  <input type="checkbox" id="orange" name="eat" value="orange"/>
      <label for="pear">pear</label>      <input type="checkbox" id="pear" name="eat"  value="pear"/>
    </section>
      提交时数据格式:hobby=c&hobby=python&eat=orange&eat=pear
    
    <section>
      <label for="man"></label> <input type="radio" id="man" name="sex" value="man"/>
      <label for="men"></label> <input type="radio" id="men" name="sex" value="men"/>
    </section>
      提交时数据格式:sex=man
    

    7、当type为image、color
    7.1)、当type=”image”时,功能上和type=”submit”一样,前者是用图片作为按钮,当然后者也可以达到同样的效果
    额外属性:
    7.2)、src 指定要显示图像的 URL
    7.3)、alt 提供图片的文字说明,当图片找不到时显示该文字
    7.4)、width 图像的长度,注意这是标签属性,而不是样式属性
    7.5)、height 图片的高度,注意事项如上
    7.6)、提交时的额外属性 formaction、formenctype、formmethod、formtarget和 formnovalidate。

    8、当type为email、tel、url
    8.1)、email 为电子邮件格式
    8.2)、tel 为电话格式
    8.3)、url 为网址格式
    8.4)、额外属性和 text一致。但对于这几种类型,浏览器支持是不同的。email 支持比较好,现在浏览器都支持格式验证;tel 基本不支持;url 支持一般,部分浏览器只要检测到 http://就能通过。

    9、type=”hidden”
    9.1)、生成一个隐藏控件,一般用于表单提交时关联主键 ID 提交,而这个数据作为隐藏存在

    10、type=”file”
    10.1)、生成一个文件上传控件,用于文件的上传。
    额外属性:
    10.2)、required 表明用户必须提供一个值,否则无法通过验证
    10.3)、accept 指定接收的MIME类型 例如:accept=”image/gif, image/jpeg, image/png”
    PS:当需要上传文件时,form标签的enctype属性必须设置为multipart/form-data

    11、当type为data、month、time、week、datetime、datatime-local,因为各种原因还是用jquery等前端库写吧!!!

    展开全文
  • 下面小编就为大家带来一篇获取input标签的所有属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 风尚云网学习-h5的inputtype属性的image属性
  • input标签中常见的type属性介绍

    千次阅读 2020-05-27 23:38:14
    input标签中常用的type属性介绍 type="text"--->文本框 type="password"--->密码框 type="radio"--->单选框 type="checkbox"--->复选框 type="file"--->图片上传 type="hidden"--->隐藏控件...
  • input type="radio"> 单选框 适用于 选择性别按钮网页等 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" conte...
  • inputtype属性整理

    千次阅读 2021-02-24 22:33:53
    ## **整理inputtype属性** 1. type = text 这是我们见得最多也是用的最多的,比如用于登录页面输入用户名,注册是输入电话号码,邮箱等 参数: a:name 表示文本输入框名称 b:size 表示输入框的长度大小 c:...
  • 加上上传文件功能input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点一点点上传还有form表单action指向提交的url后台,一定是用post请求提交 <!...
  • 一、input元素 input元素在HTML5中含有 type 属性有22个值,每个值代表不一样的形式。 22个值包括:text、password、button、submit、...input 是一个单标签元素,它通过 value 属性来给按钮贴上文字(注意:value是
  • inputtype属性

    2022-02-04 14:33:43
    input标签中的type属性的属性值: input标签中包含一个type属性,根据不同的type属性值输入的字段有很多种形式的表现方式: <input type="text"> <!--定义单行输入字段,文本格式。默认宽度为20个字符--...
  • input标签中的 type 属性:number

    千次阅读 2020-05-21 21:17:57
    正常情况下,对于一些只能是数字的form表单,我们会采用type=number 的方式来处理。 但是我们可以发现是可以输入字符串 e,这个e很容易引发一些mysql 字段越界,所以我们需要对参数做一些符合实际业务需求上的检验,...
  • input标签用于搜集用户信息 根据不同的type属性值,输入字段拥有很多形式。 输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 type属性: button:定义可点击的按钮 checkbox:定义复...
  • input 标签常见属性

    千次阅读 2019-11-08 21:39:08
    在 css 中 input 是非常常用的标签,input 标签用于接收用户输入,为行内块元素。...input标签type属性的一些常用可选值: text 普通文本 search 搜索框 password 密码 radio 单选按钮 checkbox 复选框...
  • HTML5之input标签的新type属性

    千次阅读 2019-04-15 15:40:33
    type属性介绍 首先让我们来看一张表 HTML5中的type.png 其中标有`红色5`的代表`HTML5`中推出的 测试代码: <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> ...
  • HTML的inputtype属性的属性值包括哪些(2011-11-25 16:44:40)标签:杂谈1.取消按钮按下时的虚线框,在input里添加属性值 hideFocus 或者 HideFocus=true/>2.只读文本框内容,在input里添加属性值 readonly3.防止...
  • input标签属性详解大全

    万次阅读 多人点赞 2019-05-09 16:10:06
    我们先来了解一下input标签的几个基本控制属性。 name属性:元素的名称,也就是name的值代表当前input元素的名字; value属性:元素的默认值 1)当input type=“text”、“password”、"hidden"时,定义输入字段的...
  • uniapp的 input输入框 的 type属性 text、number、idcard、digit区别
  • input标签属性简述

    千次阅读 2021-07-07 18:41:02
    一、input标签属性介绍 input标签有许多属性,如:type,name,id,value,style等 name属性:表示元素的名称,也就是name的值代表当前input元素的名字; id属性:用于css引用或者其他引用 value属性:表示当前...
  • input标签自定义属性

    千次阅读 2019-01-31 10:30:57
    &lt;input type="text"...因为namecode 不是input标签原生的属性,所以不能使用"点"操作。 非标准属性,要用:obj.getAttribute("namecode ");的方式。 错误的用法
  • inputtype属性和textarea标签

    千次阅读 2020-03-26 23:54:50
    inputtype属性 type的值和描述 以下我只列举了text的类型和submit类型 button 定义可点击按钮(多数情况下,用于通过 JavaScript 里的事件)。 checkbox 定义复选框。常见于多选择类框 file 定义输入字段和 "浏览...
  • input标签常用属性type:指定input类型autocomplete:设置是否自动完成,其值为:on/offautofocus:规定输入字段在页面加载时是否获得焦点,不适用于type= ‘hidden’checked:默认选择,对type值为‘checkbox’...
  • 1.type:该属性input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text"。具体它有那些值,我们后面再讨论。 2.required:标记一个字段是否为必须。如果一个字段被标记为required = "required...
  • H5的input标签type自带属性校验

    千次阅读 2019-02-21 11:41:02
    本文主要介绍H5的input标签type自带属性校验,以及输入框自带校验样式。 一、type的属性如下: color(定义拾色器) date(定义日期字段) datetime(定义日期字段) datetime-local(定义日期字段) month(定义...
  • HTML input 标签的 所有type 属性及用法

    千次阅读 2019-11-03 15:55:08
    实例 下面的表单拥有两个输入字段以及一个提交按钮: <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" />...input type="text" na...
  • 前端基础—— 表单标签(表单域,inputtype属性和其他属性,label标签,文本域标签,下拉菜单,默认值)

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 237,135
精华内容 94,854
关键字:

input标签type属性

友情链接: menglen.zip