文件上传input type=“file”的accept接收的各种文件类型总结

前言

        前端选择文件时,都会使用 input 框设定 type="file" 来选择文件,默认情况下可以选择所有类型的文件,有时候需要限定选择的文件类型,这时候就用到了 accept 属性。

        ps:accept 属性仅适用于 <input type="file"/>

accept 各种类型

文件类型 accept 属性值(多个值之间以逗号隔开)
.3gpp audio/3gpp, video/3gpp
.ac3 audio/ac3
.asf allpication/vnd.ms-asf
.au audio/basic
.css text/css
.csv text/csv
.doc application/msword
.docx application/vnd.openxmlformats-officedocument.wordprocessingml.document
.dot application/msword
.dotx application/vnd.openxmlformats-officedocument.wordprocessingml.template
### HTML表单元素及其用法 HTML 表单是一种用于收集用户输入的重要工具,它由 `<form>` 标签定义,并包含多种类型的表单元素。这些元素可以用来捕获用户的文本、选择项以及其他形式的输入。 #### 1. 表单的基本结构 表单的基本结构是由 `<form>` 标签包裹的一组表单元素组成。`<form>` 标签有两个重要的属性: - `action`: 定义表单数据提交到哪个 URL 地址[^2]。 - `method`: 指定提交数据使用的 HTTP 请求方法(通常是 `"GET"` 或 `"POST"`)[^2]。 示例代码如下: ```html <form action="/submit-form" method="post"> <!-- 表单元素 --> </form> ``` --- #### 2. 常见的表单元素及用法 ##### (1)文本输入框 (`<input type="text">`) 用于接收用户输入的纯文本内容。可以通过 `name` 和 `id` 属性对其进行标识和关联。 示例代码: ```html <label for="username">用户名:</label> <input type="text" id="username" name="username" required> ``` 说明:`required` 属性表示该字段不能为空[^4]。 --- ##### (2)密码输入框 (`<input type="password">`) 类似于文本框,但它会隐藏用户输入的内容。 示例代码: ```html <label for="pwd">密码:</label> <input type="password" id="pwd" name="password" required> ``` --- ##### (3)单选按钮 (`<input type="radio">`) 一组具有相同 `name` 属性的单选按钮中,每次只能选择其中一个。 示例代码: ```html <label><input type="radio" name="gender" value="male" checked> 男 </label> <label><input type="radio" name="gender" value="female"> 女 </label> ``` 注意:`checked` 属性可以让某个选项默认被选中[^4]。 --- ##### (4)复选框 (`<input type="checkbox">`) 允许多个选项同时被选中。 示例代码: ```html <label><input type="checkbox" name="hobby" value="reading"> 阅读 </label> <label><input type="checkbox" name="hobby" value="sports"> 运动 </label> ``` --- ##### (5)下拉菜单 (`<select>` 和 `<option>`) 用于创建一个可供用户选择的下拉列表。 示例代码: ```html <select name="city" id="city"> <option value="beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="guangzhou">广州</option> </select> ``` 说明:`selected` 属性可以使某一项成为默认选项[^3]。 --- ##### (6)文件上传 (`<input type="file">`) 允许用户选择并上传文件。通常配合服务器端脚本处理文件存储逻辑。 示例代码: ```html <input type="file" name="profile_picture" accept="image/*"> ``` 说明:`accept` 属性限定可接受的文件类型[^3]。 --- ##### (7)提交按钮 (`<input type="submit">`) 和重置按钮 (`<input type="reset">`) - 提交按钮用于将表单数据发送至目标地址。 - 重置按钮则清空当前填写的所有表单项。 示例代码: ```html <input type="submit" value="提交"> <input type="reset" value="重置"> ``` --- #### 3. 其他常用属性 除了基本的表单元素外,还有一些常见的属性可用于进一步控制行为: | **属性名** | **作用** | |------------|----------| | `disabled` | 禁用特定表单元素,使其不可编辑或点击。 | | `readonly` | 设置文本框为只读状态,不允许修改其内容[^3]。 | | `maxlength` | 限制输入框内的最大字符数量。 | 示例代码: ```html <input type="text" name="example" maxlength="10" readonly> ``` --- #### 4. 使用 `<label>` 提高可访问性 为了提升用户体验和无障碍设计,建议始终为每个表单控件添加对应的 `<label>` 标签。通过 `for` 属性将其与相应的输入框绑定在一起。这样即使点击标签本身也能激活对应输入框[^4]。 示例代码: ```html <label for="email">邮箱地址:</label> <input type="email" id="email" name="email"> ``` --- ### 总结 以上介绍了 HTML 表单的主要构成部分以及常见表单元素的具体用法。合理运用这些功能可以帮助开发者构建更加灵活且友好的用户界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值