input 标签详解

什么是input?

<input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式,输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

那么input有哪些type值?

  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"type="reset"type="button"**:
     分别为:提交表单、重置表单、普通按钮。当type=submit时,还提供了和元素一样的额外属性:formaction、formenctype、formmethod、formtarget 和 formnovalidate。

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

  6. ** type="checkbox"type="radio"**:
    当type等于checkbox或radio,都必须有属性name和value的值,还有可选属性checked、required。
    PS:复选框和单选按钮都是以一组一组的形式存在,name值相同的即为一组,一组复选框可以同时选中几个,而一组单选按钮同时只能选中一个。

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

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

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

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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,907评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,546评论 1 289
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,705评论 0 238
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,624评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,940评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,371评论 1 210
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,672评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,396评论 0 195
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,069评论 1 238
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,350评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,876评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,243评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,847评论 3 231
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,004评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,755评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,378评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,266评论 2 259

推荐阅读更多精彩内容

  • <input>:用于收集用户信息。 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、...
    PYFang阅读 1,627评论 0 0
  • 标签用于搜集用户信息,一般放在 标签下,根据不同的type属性值,输入字段拥有很多种形式,可以是文本、复选框、按钮...
    饥人谷_Oneleven阅读 2,062评论 1 2
  • 常用的input标签 button 一个没有默认行为的推送按钮 checkbox 一个被选中的盒子,必须使用val...
    勃王阅读 356评论 0 0
  • 最近学习HTML的过程中遇到了input标签,作为一名前端初级学习者,其实我是不太了解的。既然不懂的话,就得深入的...
    饥人谷_enzo阅读 1,521评论 0 0
  • 一、<input>是什么 它在HTML中代表一个元素(Element),多数用于表单的互交控件。input在HTM...
    饥人谷_hak阅读 1,600评论 0 0