HTML - Input 表单

5019字约17分钟

2024-05-13

HTML-Input

input类型列表

所有类型都支持的属性：全局属性和 type、name、value、disabled、form

类型	描述	支持属性(除上述属性外的额外属性)
`button`	按钮	`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`
`checkbox`	多选框	`checked`、`required`
`color`	颜色拾取器	`autocomplete`、`list`
`date`	日期（年、月、日）	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`
`datetime-local`	日期时间	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`
`email`	邮箱	`autocomplete`、`list` 、`maxlength`、`minlength`、`multiple` 、`pattern` 、`placeholder`、`readonly` 、`required`、`size`
`file`	选择文件	`accept`、`autocomplete`、`capture`、`list` 、`multiple` 、`readonly` 、`required`
`hidden`	隐藏属性	`autocomplete`
`image`	图形化按钮	`alt`、`src`、`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`
`month`	日期（年月）	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`
`number`	数字	`autocomplete`、`list` 、`max`、`min`、`placeholder`、`readonly` 、`required`、`step`
`password`	密码	`autocomplete` 、`maxlength`、`minlength`、`pattern`、`placeholder`、`readonly` 、`required`、`size`
`radio`	单选	`checked`、`required`
`range`	范围滑块	`autocomplete`、`list` 、`max`、`min`、`step`
`reset`	重置按钮	无
`search`	搜索输入框	`autocomplete`、`dirname`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`
`submit`	提交按钮	`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`
`tel`	电话号码	`autocomplete`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`
`text`	文本框	`autocomplete`、`dirname`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`
`time`	时间控件	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`
`url`	URL	`autocomplete`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`
`week`	日期（年，周）	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`

输入框

邮箱：`email`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`email`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`maxlength`、`minlength`、`multiple` 、`pattern` 、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`list`、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`	无

在表单提交前，输入框会自动验证输入值是否是一个或多个合法的电子邮箱地址（非空值且符合电子邮箱地址格式）。CSS 伪标签 :valid 和 :invalid 能够在校验后自动应用，代表被校验的邮箱地址是否合法。

<form>
    <label for="email">邮箱地址</label><br />
    <input
      id="email"
      type="email"
      required
      placeholder="username@outlook.com"
      pattern=".+@outlook.com"
      title="请仅提供 outlook 邮件地址" />
  <input type="submit" value="发送请求" />
</form>

#email{
    outline:none;
    inline:none;
    border:1px solid #ccc
}
#email:valid{
    border:1px solid green
}
#email:invalid{
    border:1px solid red
}

maxlength：最大字符数
minlength：最小字符数
multiple：多选，值可以用逗号（,）隔开
pattern：正则匹配
readonly：只读
required：必填
size：控件尺寸

<form>
    <label for="email">邮箱地址</label><br />
    <input
      id="email"
      type="email"
      size="20"
      maxlength="64"
      required
      placeholder="username@outlook.com"
      pattern=".+@outlook.com"
      title="请仅提供 outlook 邮件地址" />
  <input type="submit" value="发送请求" />
</form>

隐藏元素：`hidden`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`hidden`	解释说明	备注
事件	无	无
额外属性	`autocomplete`	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	无	无

hidden 类型的 <input> 元素允许 Web 开发者包含用户不可见、不可改的数据，在用户提交表单时，这些数据会一并发送出。

type为hidden的<input>元素在页面中完全不可见，并且无法操作使其可见。

提示

用户可以通过浏览器开发者工具看到这些隐藏元素和值


<input type='hidden' name='artId' value='a123456' />

提交时发送数据为：artid=a123456

数字：`number`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`number`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min`、`placeholder`、`readonly` 、`required`、`step`	无
IDL属性	`value` 、`list`、`valueAsNumber`	无
DOM接口	`HTMLInputElement`	无
方法	`select`、`stepDown`、`stepUp`	无

类型为number的输入框的值，为数字类型Number,可以为带小数数字。

数字输入框，只允许输入数字，不同浏览器，可能会提供不同样式的步进箭头，方便调整数字。

提示

在移动设备中，使用number输入值时，会尝试使用特殊的数字键盘。

额外属性

max：最大值
min：最小值
step：步进值，每一步增加或减少值，默认为1,(将有效值限制在一系列步进值中,提交时会进行校检)

IDL属性

valueAsNumber：将字符串转成数字

const input = document.querySelector('input')
console.log(input.valueAsNumber)

数字输入（只允许输入数字）：
<form>
    <input  type="number" name="name"  step="10" min="0" max="100"/>
    <input type="submit" />
</form>

密码：`password`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`password`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete` 、`maxlength`、`minlength`、`pattern`、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`selectionStart` 、`selectionEnd`、`selectionDirection` 、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select`、`setRangeText`、`setSelectionRange()`	无

密码输入框，根据不同浏览器会使用·、*等替代自己输入的字符。

执行模式：inputmode

none：无虚拟键盘
text：使用用户本地区域设置的标准文本输入键盘
decimal：小数输入键盘，包含数字和分隔符
numeric：数字输入键盘，所需要的就是 0 到 9 的数字
tel：电话输入键盘，包含 0 到 9 的数字、星号（*）和井号（#）键
search：为搜索输入优化的虚拟键盘，比如，返回键可能被重新标记为“搜索”
email：为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化
url：为邮件地址输入优化的虚拟键盘，通常包含"@"符号和其他优化

自动补全：autocomplete

on：允许浏览器或密码管理器自动填写密码字段
off：不允许浏览器或密码管理器自动填写密码字段
current-password：允许浏览器或密码管理器输入网站的当前密码
new-password：允许浏览器或密码管理器自动输入网站的新密码

账号输入：
<form>
    <input  type="text" name="username" />
    密码输入：
    <input  type="password" autocomplete="new-password"  name="password" />
    <input type="submit" />
</form>

搜索：`search`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`search`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`dirname`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`setRangeText()`、`setSelectionRange()`	无

搜索类型的输入框，功能上和Text输入框一致，浏览器不同，可能会有不同的样式和优化。value为搜索字符串。

属性

spellcheck：是否启用元素的拼写检查

非标准属性

autocorrect： Safari 扩展，autocorrect 属性是一个字符串，它指示在用户编辑此字段时是否激活自动更正.
- on：启用拼写错误的自动更正
- off：禁用自动更正和文本替换
incremental： WebKit 和 Blink 扩展，允许用户编辑搜索时实时更新搜索结果。
mozactionhint：Mozilla 扩展，它提供了一个提示，提示用户在编辑字段时按 Enter 或 Return 键将采取何种操作。
- 已经废弃，可以使用全局属性enterkeyhint代替
results： results 属性是一个数字值（仅受 Safari 支持），可让你覆盖要在 <input> 元素原生提供的先前搜索查询的下拉菜单中所显示的最大条目数。

搜索
<input type="search" value="sousou" name="search"/>

电话号码：`tel`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`tel`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`list`、`value`、`selectionStart`、`selectionEnd`、`selectionDirection`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`setRangeText()`、`setSelectionRange()`	无

tel类型的输入框和text功能上基本一致，但是手机上，可能会提供专门的电话号码输入键盘。

以下代码可以在手机浏览器测试

<form>
  <div>
    <label for="example">电话号码：</label>
    <input id="example" type="tel" name="text" />
  </div>
</form>

文本：`text`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`text`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`dirname`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`list`、`value`、`selectionStart`、`selectionEnd`、`selectionDirection`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`setRangeText()`、`setSelectionRange()`	无

value值，为输入框输入字符串，可以通过HTMLInputElement.value获取。

const el = document.querySelector('input')
console.log(el.value)

<form>
  <div>
    <label for="example">个人介绍：</label>
    <input id="example" type="text" name="text" />
  </div>
</form>

URL：`url`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`url`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`maxlength`、`minlength`、`pattern` 、`placeholder`、`readonly` 、`required`、`size`	无
IDL属性	`value`、`valueAsDate`、`valueAsNumber` 、`list`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`stepUp()`、`stepDown()`	无

当元素非空值提交时，会自动验证当前URL是否合法。合法URL为：https://baidu.com

<form>
  <input id="myURL" name="myURL" type="url"/>
  <button>提交</button>
</form>

验证方式：

基本验证：URL类型浏览器自动验证
pattern验证：使用pattern限制

日期

日期选择：`date`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`date`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`	无
IDL属性	`list`、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`	无

日期选择date的值：按照 YYYY-MM-DD 格式化过的代表日期的字符串，或者为空字符串。

不支持日期选择的浏览器，会被优雅降级为普通的<input type='text'>

额外属性

max：所接受的最新日期
min：所接受的最早日期
step：步骤值

事件

input：日期发生改变时触发
change：日期发生改变并且用户关闭日期选择器之后会触发change事件

<input type="date" step="day"/>

时间日期选择：`datetime-locel`

受到浏览器限制，不建议使用

属性和事件，与上date一致

年月日期：`month`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`month`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select`、`stepDown`、`stepUp`	无

年月日期month的值：按照 YYYY-MM 格式化过的代表年份和月份的字符串，或者为空字符串。

不支持年月选择的浏览器，会被优雅降级为普通的<input type='text'>( 火狐、Safar不支持 ) 额外属性

max：所接受的最新日期
min：所接受的最早日期
step：步骤值

事件

input：日期发生改变时触发
change：日期发生改变并且用户关闭日期选择器之后会触发change事件

<label for="bday-month">你在哪个月出生？</label>
<input id="bday-month" type="month" name="bday-month" value="2001-06" />

时间：`time`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`time`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`	无
IDL属性	`value`、`valueAsDate`、`valueAsNumber` 、`list`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`stepUp()`、`stepDown()`	无

值为表示时间的字符串。(15:20or15:20:21)

<form>
  <div>
    <label for="example">时间：</label>
    <input id="example" type="time" name="time"  value="13:30"/>
  </div>
</form>

const el = document.querySelector('input')

document.querySelector('input').onchange= function(){
    const el = document.querySelector('input')
    alert(el.value)
}

提示

当step属性有值时，时间选择会多一项秒选择。

<form>
  <div>
    <label for="example">时间：</label>
    <input id="example" type="time" name="time"  value="13:30" step="20"/>
  </div>
</form>

const el = document.querySelector('input')

document.querySelector('input').onchange= function(){
    const el = document.querySelector('input')
    alert(el.value)
}

周：`week`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`week`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`	无
IDL属性	`value`、`valueAsDate`、`valueAsNumber` 、`list`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`、`stepUp()`、`stepDown()`	无

值为表示日期和周数的字符串，eg:2017-W01。表示2017年第一周

<form>
  <input id="week" name="week" type="week" value="2024-W45"/>
  <button>提交</button>
</form>

按钮

按钮：`button`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`button`	解释说明	备注
事件	`click`	无
额外属性	`autocomplete`、`list` 、`max`、`min` 、`readonly` 、`required`、`step`	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	无	无

事件：元素的事件，eg： click,change
IDL属性： interface description language，接口描述语言。IDL 属性即 DOM 提供给编程语言的真正的属性。
方法：实例方法，eg：HTMLInputElement.select() 选中当前元素内容特殊属性

特殊属性：accesskey

accesskey：快捷键操作，一般浏览器都需要搭配alt使用（为了避免冲突），Mac上需要搭配control和option使用

<input type="button"  accesskey="q" value="按钮" />

document.querySelector('input').onclick = function(){
  alert('点击')
}

图形按钮：`image`

image 类型的 <input>元素用于创建图形化的提交按钮，即采用图像而非文本形式的提交按钮。

额外属性与submit保持一致

重置按钮：`reset`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`reset`	解释说明	备注
事件	`click`	无
额外属性	无	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	无	无

重置按钮，将表单中的所有输入重置为初始值，元素的value为按钮展示名称


<form>
    <div>
        <label >Text</label>
        <input type="text"  name="text" />
    </div>
    <div>
        <label >Password</label>
        <input type="password"  name="password" />
    </div>
    <div>
        <label >Range</label>
        <input type="range" name="range" min="0" max="10" value="5" />
    </div>
    <div>
        <label >checkbox</label><br/>
        <input type="checkbox" name="selectType" value="cat"/>    <label >cat</label>
        <input type="checkbox" checked name="selectType" value="dog"/>   <label >dog</label>
        <input type="checkbox" name="selectType" value="pig"/>  <label >pig</label>
    </div>
     <div>
        <label >Radio</label><br/>
        <input type="radio" name="Radio" value="cat"/>  <label >cat</label>
        <input type="radio" checked name="Radio" value="dog"/>  <label >dog</label>
        <input type="radio" name="Radio" value="pig"/>  <label >pig</label>
    </div>
    <input type="reset" value="Reset" />
    <input type="submit" value="Submit" />
</form>

提交按钮：`submit`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`submit`	解释说明	备注
事件	`click`	无
额外属性	`formaction`、`formenctype`、`formmethod`、`formnovalidate`、`formtarget`	无
IDL属性	`value`	无
DOM接口	`HTMLInputElement`	无
方法	无

表单提交按钮，value值为按钮名称。

额外属性值

formaction：提交URL。值为字符串，指示要将数据提交到的 URL，优先于form的action属性
formenctype：提交编码。值为字符串，标识在将表单数据提交到服务器时要使用的编码方法
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
formmethod：提交方法。
- get
- post
- dialog
formnovalidate：是否验证表单。值为布尔值，优先于表单的novalidate属性
formtarget：关键字。指定一个名称或关键字，该名称或关键字指示提交表单后在何处显示收到的响应。即在何处打开 action URL。
- _self：在同一框架中打开。
- _blank：在新窗口/选项卡中打开。
- _parent：在父框架中打开。
- _top：在整个窗口中打开。
- framename：在指定的 iframe 中打开。

以上额外属性在<inout type="image"/>元素上和button元素上也可以使用

<form>
  <div>
    <label for="example">文本内容：</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="发送" accesskey="s" />
  </div>
</form>

选择

复选框：`checkbox`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`checkbox`	解释说明	备注
事件	`change`、`input`	无
额外属性	`checked`、`required`	无
IDL属性	`chceked`、 `indeterminate`、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`	无

特殊属性：indeterminate

indeterminate：表示不确定或者半选中，不能直接通过HTML属性设置。

<label>
    <input id="checkbox" type="checkbox"/>
    按钮1
</label>
<label>
    <input type="checkbox" checked/>
    按钮2
</label>

// 设置半选中状态
const el = document.querySelector('#checkbox')
el.indeterminate = true

注意：当使用submit 提交checkbox时，只有选中的checkbox会提交，会提交value的值，如果value省略则默认值为on,提交时数据为name=value

<label>
    <input type="checkbox" name="selectType" value="cat"/>
    按钮1
</label>

如上选中提交数据为:selectType=cat

<label>
    <input type="checkbox" name="selectType" value="cat"/>
    按钮1
</label>
<label>
    <input type="checkbox" name="selectType" value="dog"/>
    按钮1
</label>

如上如果多个checkbox的name一致，则提交数据为selectType=cat&selectType=dog

颜色选择：`color`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`color`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list`	无
IDL属性	`list`、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`	无

颜色选择color的选择值：长度为 7 的指定<color>值的小写十六进制字符串,eg:#ffffff

list ：输入建议

事件

input：颜色发生改变时触发
change：颜色发生改变并且用户关闭选色器之后会触发change事件

<label>
    <input type="color"/>
    按钮1
</label>

<br/>
还可以这样写：
<br/>
<input type="color" id="color"/>
<label for="color"> 按钮2</label>

单选：`radio`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`radio`	解释说明	备注
事件	`change`、`input`	无
额外属性	`checked`、`required`	无
IDL属性	`checked` 、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select`	无

CSS属性- appearance：删除本地元素

input {
  appearance: none;
}

然后可以重新编写样式：

<form>
    <label>
        <input  type="radio" name="skill"  value="html"/>HTML
    </label>
    <label>
        <input  type="radio" name="skill"  value="css"/>CSS
    </label>
    <label>
        <input  type="radio" name="skill"  value="javascript"/>JavaScript
    </label>
    <input type="submit" />
</form>

input[type=radio] {
  appearance: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;
  position: relative;
  top: 4px;
}

input[type=radio]:checked {
  border: 6px solid black;
}

如上面示例：在name相等的一组radio中，只能选择和提交一个选项,如skill=html等

滑块：`range`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`range`	解释说明	备注
事件	`change`、`input`	无
额外属性	`autocomplete`、`list` 、`max`、`min`、`step`	无
IDL属性	`list` 、`value`、和`valueAsNumber`	无
DOM接口	`HTMLInputElement`	无
方法	`stepDown`、`stepUp`	无

滑块的值为一个代表已选择数值的字符串，可以使用 valueAsNumber 来将此值作为数值获取。


    <div>
        <label>
            <input  type="range" name="size"  value="5" min="0" max="10" step="0.1"/> size
        </label>
    </div>
    <div>
        <label>
            <input  type="range" name="position"  value="50" min="0" max="100"  step="1"/> position
        </label>
    </div>

list：输入建议

    <h5>选择合适的音量</h5>
    <div>
        <input type="range" name="size"  value="5" min="0" max="100" step="1" list="voice"/>
        <datalist id="voice">
            <option value="0" label="0音量"></option>
            <option value="25" label="25音量"></option>
            <option value="50" label="50音量"></option>
            <option value="75" label="75音量"></option>
            <option value="100" label="100音量"></option>
        </datalist>
    </div>

datalist {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  writing-mode: vertical-lr;
  width: 400px;
}

option {
  padding: 0;
}

input[type="range"] {
  width: 400px;
  margin: 0;
}

文件

文件选择：`file`

支持的属性：全局属性和 type、name、value、disabled、form与下表额外属性

`file`	解释说明	备注
事件	`change`、`input`	无
额外属性	`accept`、`autocomplete`、`capture`、`list` 、`multiple` 、`readonly` 、`required`	无
IDL属性	`files`、`value`	无
DOM接口	`HTMLInputElement`	无
方法	`select()`	无

文件选择file的值：一个字符串，表示已选择文件的路径，如果多选，则表示第一个文件路径。其他文件可以用HTMLInputElement.files属性获取查看。

accpet：接受文件类型，多个用逗号隔开。字符串需要遵守唯一文件类型说明符。
capture：指定摄像头获取数据
- user：前置摄像头和麦克风
- environment：后置摄像头和麦克风

提示

capture之前是一个布尔类型的属性，如果存在，就会使用设备的媒体捕获设备，而不是调用本地相册等。

multiple：多选文件

唯一文件类型说明符

唯一文件类型说明符是一个字符串，表示在 file 类型的<input>元素中用户可以选择的文件类型。每个唯一文件类型说明符可以采用下列形式之一：

一个以英文句号.开头的合法的不区分大小写的文件名扩展名。例如：.jpg、.pdf 或 .doc。
一个不带扩展名的 MIME 类型字符串。
- 字符串 audio/*，表示“任何音频文件”。
- 字符串 video/*，表示“任何视频文件”。
- 字符串 image/*，表示“任何图片文件”。

HTMLInputElement.files属性

name：文件名
lastModified：文件最后一次修改时间
size：文件大小，单位为字节
type：文件的MIME类型