表单中的按钮与输入框

表单标签;form

语法:

<form name ="表单 " action="URL" method="get/post">

表单元素

</form>

注意:双引号要是英文的,get和post的保密程度不一样。

post的保密程度高于get,post没有没有限制数据长度,get有限制.

get会将内容公布出来. 

输入框和按钮

 语法;

<input name="表单元素名称" type="类型" value="值" size="显示宽度"

maxlength="能输入的最大字符长度" checked="是否选中"/>

 密码框

语法:

<input type="password" name="userPwd">

多行文本域

语法:

<textarea name="指定名称"cols="列数" rows="行数">

文本域内容

</textarea>

按钮

提交按钮;<input type="submit" value="提交按钮的显示值" name="名称"/>

重置按钮;<input type="reset" value="重置按钮的显示值" name="名称"/>

普通按钮;<input type="button" value="普通按钮的显示值" name="名称"/>

图片按钮;<input type="image" src="图片名称" alt="提交" name="imgsubmit">

对于 vxetable,您可以使用 `vxe-form` 组件来实现在表单点击按钮添加输入框的功能。您可以在表单添加一个按钮,当用户点击该按钮时,您可以使用 `addField` 方法来添加一个新的表单项。 以下是一个简单的示例代码,用于实现在 `vxe-form` 添加一个按钮,并在点击该按钮时添加一个新的输入框表单项: ```html <template> <div> <vxe-form ref="form" :model="model" :rules="rules"> <vxe-form-item label="Name" prop="name"> <input v-model="model.name" class="my-input" /> </vxe-form-item> <vxe-form-item label="Age" prop="age"> <input v-model="model.age" class="my-input" /> </vxe-form-item> <vxe-form-item label="Extra Fields"> <div> <div v-for="(field, index) in extraFields" :key="index"> <vxe-form-item :label="'Field ' + (index + 1)" :prop="'extraFields.' + index"> <input v-model="model.extraFields[index]" class="my-input" /> </vxe-form-item> <vxe-button type="text" @click="removeExtraField(index)">Remove</vxe-button> </div> <vxe-button type="text" @click="addExtraField">Add Field</vxe-button> </div> </vxe-form-item> </vxe-form> </div> </template> <script> import { VXETable, VxeForm, VxeFormItem, VxeButton } from 'vxe-table' export default { components: { VxeForm, VxeFormItem, VxeButton, }, data() { return { model: { name: '', age: '', extraFields: [], }, rules: { name: [{ required: true, message: 'Name is required' }], age: [{ required: true, message: 'Age is required' }], }, extraFields: [], } }, methods: { addExtraField() { const field = `field-${this.extraFields.length}` this.extraFields.push(field) this.$refs.form.addField({ field, title: `Field ${this.extraFields.length}`, rules: [{ required: true, message: `Field ${this.extraFields.length} is required` }], render: ({ model, field }) => { return <input v-model={model[field]} class="my-input" /> }, }) }, removeExtraField(index) { const field = this.extraFields[index] this.extraFields.splice(index, 1) this.$refs.form.removeField(field) }, }, } </script> ``` 在这个例子,我们创建了一个 `vxe-form`,并为其添加了两个输入框表单项和一个名为 `Extra Fields` 的表单项。在 `Extra Fields` 表单,我们使用 `v-for` 指令来渲染每个额外的输入框表单项,并为每个表单项添加了一个 `Remove` 按钮,用于删除该表单项。我们还添加了一个 `Add Field` 按钮,用于在表单添加一个新的输入框表单项。 在 `addExtraField` 方法,我们使用 `addField` 方法来添加一个新的表单项。我们在该方法创建了一个新的表单项对象,包含一个唯一的 `field` 属性、一个标题和一个渲染函数。在该渲染函数,我们使用 `v-model` 指令来绑定表单项的值到 `model` 对象。最后,我们将新的 `field` 属性添加到 `extraFields` 数组,以便在渲染表单时使用。 在 `removeExtraField` 方法,我们使用 `removeField` 方法来删除一个表单项,并从 `extraFields` 数组删除对应的 `field` 属性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值