input标签详解

<input>:用于收集用户信息。

根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

注:
在 HTML 中,<input> 标签没有结束标签。
在 XHTML 中,<input> 标签必须被正确地关闭。

input的属性和值:

1.accept:规定通过文件上传来提交的文件的类型。
值:mime_type:能够被提交或上传的一个或多个 MIME 类型。
如需规定多个 MIME 类型,请使用逗号分隔这些类型。
2.align:规定图像输入的对齐方式。
值:

  • left:向左对齐(默认)
  • right:向右对齐
  • top:向上对齐
  • middle:向中间对齐
  • bottom:向下对齐

3.alt:定义图像输入的替代文本。
值:value
4.autocomplete:规定是否使用输入字段的自动完成功能。
值:

  • no:默认。规定启用自动完成功能。
  • off:规定禁用自动完成功能。

5.autofocus:规定输入字段在页面加载时是否获得焦点。
(不适用于 type="hidden")
值:autofocus
6.checked:规定此 input 元素首次加载时应当被选中。
值:checked:预先选定复选框或单选按钮。
7.disabled:当 input 元素加载时禁用此元素。
值:disabled:禁用一个 input 元素。
8.form:规定输入字段所属的一个或多个表单。
值:formname:规定表单的名称。
9.formaction:覆盖表单的 action 属性。
(适用于 type="submit" 和 type="image")
值:URL
10.formenctype:覆盖表单的 enctype 属性。
(适用于 type="submit" 和 type="image")
值:

  • application/x-www-form-urlencoded:在发送前编码所有字符(默认)
  • multipart/form-data:不对字符编码。
    在使用包含文件上传控件的表单时,必须使用该值。
  • text/plain:空格转换为 "+" 加号,但不对特殊字符编码。

11.formmethod:覆盖表单的 method 属性。
(适用于 type="submit" 和 type="image")
值:

  • get: 从指定的资源请求数据。
  • post: 向指定的资源提交要被处理的数据

12.formnovalidate:覆盖表单的 novalidate 属性。
如果使用该属性,则提交表单时不进行验证。
值:formnovalidate
13.formtarget:覆盖表单的 target 属性。
(适用于 type="submit" 和 type="image")
值:

  • _blank:在新的窗口打开
  • _self:在当前窗口打开
  • _parent:在父窗口打开
  • _top:在最顶极窗口打开
  • framename:在指定的窗口打开

14.heiqht:定义 input 字段的高度。(适用于 type="image")
值:

  • pixels:以像素计的高度。(比如 "100px" 或仅仅是 "100")。
  • %:以包含元素的百分比计的高度(比如 "50%")

15.list:引用包含输入字段的预定义选项的 datalist 。
值:datalist-id:文档中的 datalist 的 id。
16.max:规定输入字段的最大值。
请与 "min" 属性配合使用,来创建合法值的范围。
值:

  • number:数字值。规定输入字段允许的最大值。
  • date:日期。规定输入字段允许的最大值。

17.maxlenqth:规定输入字段中的字符的最大长度。
值:number:数字值。规定输入字段允许的最大值。
18.min:规定输入字段的最小值。
请与 "max" 属性配合使用,来创建合法值的范围。
值:

  • number:数字值。规定输入字段允许的最小值。
  • date:日期。规定输入字段允许的最小值。

19.multiple:如果使用该属性,则允许一个以上的值。
值:multiple
20.name:定义 input 元素的名称。
值:field_name:元素的名称。
21.pattern:规定输入字段的值的模式或格式。
例如 pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
值:regexp:规定用于验证输入字段的模式。
22.placeholder:规定帮助用户填写输入字段的提示。
值:text
23.readonly:规定输入字段为只读。
值:readonly
24.required:指示输入字段的值是必需的。
值:required
25.size:定义输入字段的宽度。
26.src:定义以提交按钮形式显示的图像的 URL。
27.step:规定输入字的的合法数字间隔。
28.type:规定 input 元素的类型。
值:

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

29.value:规定 input 元素的值。
30.width:定义 input 字段的宽度。(适用于 type="image")

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

推荐阅读更多精彩内容

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