input标签基本使用-单选框、多选框、文件上传

input标签type属性值不同,则功能不同。

<input type="...">
type属性值说明
text文本框,用于输入单行文本
password密码框
radio单选框
checkbox多选框
file上传文件

单选框 radio

常用属性

属性名作用特殊说明
name控件名称控件分组,同组只能选中一个(单选功能)
checked默认选中属性名和属性值相同,简写为一个单词
<input type="radio" name="gender" cheched>男
<input type="radio" name="gender">女


多选框 checkbox

多选框也叫复选框。

默认选中:checked

<input type="checkbox" checked>唱
<input type="checkbox">跳
<input type="checkbox" checked>rap

上传文件 file

默认情况下,文件上传表单控件只能上传一个文件,添加multiple属性可以实现文件多选功能。

<input type="file" multiple>

  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
为了实现文本多选框、文本单选框和图片上传按钮,您可以使用以下组件: 1. 文本多选框: ```html <a-checkbox-group v-decorator="['ziduan']"> <a-checkbox value="option1">选项1</a-checkbox> <a-checkbox value="option2">选项2</a-checkbox> <a-checkbox value="option3">选项3</a-checkbox> </a-checkbox-group> ``` 在上面的代码中,我们使用了 `<a-checkbox-group>` 组件来创建一个文本多选框。通过设置 `v-decorator` 属性来绑定表单字段。 2. 文本单选框: ```html <a-radio-group v-decorator="['ziduan']"> <a-radio value="option1">选项1</a-radio> <a-radio value="option2">选项2</a-radio> <a-radio value="option3">选项3</a-radio> </a-radio-group> ``` 上述代码中,我们使用了 `<a-radio-group>` 组件来创建一个文本单选框。同样地,通过设置 `v-decorator` 属性来绑定表单字段。 3. 图片上传按钮: ```html <j-upload :disabled="formDisabled" v-decorator="['ziduan']" :trigger-change="true" accept="image/*"> <template #default="{ file }"> <img :src="file.url" alt="上传的图片" v-if="file.url" style="max-width: 100%; max-height: 200px;" /> </template> </j-upload> ``` 在上面的代码中,我们使用了 `<j-upload>` 组件来创建一个图片上传按钮。通过设置 `v-decorator` 属性来绑定表单字段。为了限制上传的文件类型为图片,我们设置了 `accept` 属性为 `"image/*"`。在上传成功后,我们使用 `<img>` 标签来显示上传的图片。 请注意,以上代码片段是基于您提供的前端界面代码,并使用了 jeecg 组件。确保在使用前导入相应的组件和库。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值