资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/input 表单属性

input 表单属性

GraphQuery / 2411人阅读

摘要：属性为用户由于某些原因无法查看图像时提供了备选的信息。可用于表单以外的输入字段覆盖表单的属性。值覆盖表单的属性。默认在父框架中将表单提交到文档。属性规定输入字段的最大长度，以字符个数计。属性与或配合使用。提交按钮会把表单数据发送到服务器。

今天做项目的时候频繁用到了元素，却发现好多属性都不懂。找资料总结。

accept 规定通过文件上传来提交的文件的类型。 
</>复制代码 
  1. //只能与  配合使用。
  2. //例如只允许上传图片文件
  3.
align 规定图像输入的对齐方式。 
</>复制代码 
  1. 值：left | right | top | middle | bottom 【不赞成使用。】
alt 定义图像输入的替代文本。 
</>复制代码 
  1. alt 属性只能与  配合使用。
  2. alt 属性为用户由于某些原因无法查看图像时提供了备选的信息。
autocomplete 规定是否使用输入字段的自动完成功能。 
</>复制代码 
  1. 自动完成允许浏览器预测对字段的输入。
  2. 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
  3. 值： on | off
  4. 适用于 
    ，以及下面的  类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
autofocus 规定输入字段在页面加载时是否获得焦点。 
</>复制代码 
  1. 【不适用于 type="hidden"】
  2. 值：autofocus
checked 规定此 input 元素首次加载时应当被选中。 
</>复制代码 
  1. 与  或  配合使用
  2. 值：checked
disabled 当 input 元素加载时禁用此元素。 
</>复制代码 
  1. 被禁用的 input 元素既不可用，也不可点击。
  2. 值：disabled
form 规定输入字段所属的一个或多个表单。 
</>复制代码 
  1. form 属性的值必须是其所属表单的 id。
  2. 可用于表单以外的输入字段
  3. ...
  4. Last name:
formaction 覆盖表单的 action 属性。 
</>复制代码 
  1. （适用于 type="submit" 和 type="image"）
formenctype 覆盖表单的 enctype 属性。 
</>复制代码 
  1. （适用于 type="submit" 和 type="image"）
  2. 值：

application/x-www-form-urlencoded【在发送前对所有字符进行编码（默认）。】

multipart/form-data【不对字符编码。当使用有文件上传控件的表单时，该值是必需的。】

text/plain【将空格转换为 "+" 符号，但不编码特殊字符。】

formmethod 覆盖表单的 method 属性。 
</>复制代码 
  1. （适用于 type="submit" 和 type="image"）
  2. 值：get | post
formnovalidate 覆盖表单的 novalidate 属性。 
</>复制代码 
  1. 如果使用该属性，则提交表单时不进行验证。
  2. 适用于 
     以及以下类型的 ：text, search, url, telephone, email, password, date pickers, range 以及 color。
  3. 值：formnovalidate
formtarget 覆盖表单的 target 属性。 
</>复制代码 
  1. （适用于 type="submit" 和 type="image"）
  2. HTML5 不支持框架和框架集。parent, top 和 framename 值大多用于 iframe。

_blank【在新窗口/选项卡中将表单提交到文档。】

_self【在同一框架中将表单提交到文档。（默认）】

_parent【在父框架中将表单提交到文档。】

_top【在整个窗口中将表单提交到文档】

framename【在指定的框架中将表单提交到文档。】

list datalist-id 引用包含输入字段的预定义选项的 datalist 。 
</>复制代码 
  3.     
  4.     
  5.
step 规定输入字的的合法数字间隔。 
</>复制代码 
  2. //合法数字应该是 -3、0、3、6，以此类推
max 规定输入字段的最大值。 min 规定输入字段的最小值。 
</>复制代码 
  1. step、max 和 min 属性适用于以下  类型：number, range, date, datetime, datetime-local, month, time 以及 week。
maxlength 规定输入字段中的字符的最大长度。 
</>复制代码 
  1. maxlength 属性规定输入字段的最大长度，以字符个数计。
  2. maxlength 属性与  或  配合使用。
size 定义输入字段的宽度。 
</>复制代码 
  1. 对于  和 ，size 属性定义的是可见的字符数。
  2. 而对于其他类型，size 属性定义的是以像素为单位的输入字段宽度。
multiple 如果使用该属性，则允许一个以上的值。 
</>复制代码 
  1. 【需要上传多个文件时可使用该属性】
name 定义 input 元素的名称。 
</>复制代码 
  1. 属性用于对提交到服务器后的表单数据进行标识
  2. 或者在客户端通过 JavaScript 引用表单数据。
  3. 只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
pattern 规定输入字段的值的模式或格式。 
</>复制代码 
  1. pattern="[0-9]" 表示输入值必须是 0 与 9 之间的数字。
  2. 适用于以下  类型：text, search, url, telephone, email 以及 password 。
placeholder 规定帮助用户填写输入字段的提示。 
</>复制代码 
  1. 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。
  2. 适用于以下的  类型：text, search, url, telephone, email 以及 password
readonly 规定输入字段为只读。 
</>复制代码 
  1. 可与  或  配合使用。
  2. 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
required 指示输入字段的值是必需的。 
</>复制代码 
  1. 适用于以下  类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
src URL 定义以提交按钮形式显示的图像的 URL。 
</>复制代码 
  1. 只能与  配合使用。
type 规定 input 元素的类型。

button 定义可点击按钮。

checkbox 定义复选框。

file 定义输入字段和 "浏览"按钮，供文件上传。

hidden 定义隐藏的输入字段。

image 定义图像形式的提交按钮。

password 定义密码字段。该字段中的字符被掩码。

radio 定义单选按钮。

reset 定义重置按钮。重置按钮会清除表单中的所有数据。

submit 定义提交按钮。提交按钮会把表单数据发送到服务器。

text 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

value 规定 input 元素的值。 
</>复制代码 
  1. 对于不同的输入类型，value 属性的用法也不同：
  2. type="button", "reset", "submit" - 定义按钮上的显示的文本
  3. type="text", "password", "hidden" - 定义输入字段的初始值
  4. type="checkbox", "radio", "image" - 定义与输入相关联的值
  5. 注释： 和  中必须设置 value 属性。
width 定义 input 字段的宽度。 height 定义 input 字段的高度 
</>复制代码 
  1. width和height只适用于 type="image"
PS:【对input元素UI自定义】 
</>复制代码 
  1. 默认的样式是这样的。

利用label for的属性，可以很好的改变样式。

</>复制代码

上述例子中其实就是隐藏input。所以还可以用

</>复制代码 
  1. style="visibility:hidden"
  2. 或者
  3. style="display:none"

效果图如下

云服务器 GPU云服务器 form表单提交input 表单对象属性 Inputs input

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49841.html

相关文章

  • form表单那点事儿(上) 基础篇

    摘要：用于或元素时，将提交指定的表单示例代码只能上传图片只能上传视频使用的属性，是一个类型的值，或文件后缀名。在以前，要想改变表单元素外观，需要通过其他标签来模拟。以下点到名的表单元素，还是可以照常使用的。 做为html中最为常见，应用最广泛的标签之一，form常伴随前端左右。了解更深，用的更顺。 表单属性 这个表单展示了form表单常用的属性 属性名 属性值 ...

    Forest10 评论0 收藏0

  • 【Vue原理】VModel - 白话版

    摘要：执行的时候，会绑定上下文对象为组件实例于是中的就能取到组件实例本身，的代码块顶层作用域就绑定为了组件实例于是内部变量的访问，就会首先访问到组件实例上。其中的获取，就会先从组件实例上获取，相当于。 写文章不容易，点个赞呗兄弟专注 Vue 源码分享，文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧研究基于 Vue版本 【2.5.17】 如果你觉得...

    keke 评论0 收藏0

  • 前端菜鸟笔记 Day-2 Form表单

    摘要：标签定义表单表单元素表单包含表单元素。沃尔沃马自达雪佛兰奥迪定义待选择的选项，列表通常会默认选择第一个选项，可以使用属性来定义预定义选项。马自达定义多行输入字段。属性规定输入字段允许的最大长度。内容连接类型个人静态博客气泡的前端日记 文章大纲来源：【Day 2】Form表单 HTML表单 表单元素 表单属性 HTML5追加的表单元素 HTML表单 HTML 表单用于搜集不同类型的用...

    shusen 评论0 收藏0

发表评论

登陆后可评论

0条评论

GraphQuery

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<