js动态生成form表单
时间: 2023-10-05 07:11:49 浏览: 49
可以通过以下代码动态生成表单:
```javascript
// 创建form元素
var form = document.createElement('form');
// 设置form属性
form.setAttribute('method', 'post');
form.setAttribute('action', '/submit-form');
// 创建input元素
var input = document.createElement('input');
// 设置input属性
input.setAttribute('type', 'text');
input.setAttribute('name', 'username');
input.setAttribute('placeholder', '请输入用户名');
// 添加input元素到form中
form.appendChild(input);
// 创建submit按钮
var submit = document.createElement('input');
submit.setAttribute('type', 'submit');
submit.setAttribute('value', '提交');
// 添加submit按钮到form中
form.appendChild(submit);
// 添加form到页面中
document.body.appendChild(form);
```
以上代码会生成一个包含一个输入框和一个提交按钮的表单,可以根据需要修改属性和添加更多表单元素。
相关问题
vue json动态生成form表单
可以使用 Vue.js 的动态组件和渲染函数来实现动态生成表单。
首先定义一个 JSON 数据,表示表单的结构和字段信息,如下所示:
```json
{
"fields": [
{
"type": "text",
"label": "用户名",
"name": "username",
"value": ""
},
{
"type": "password",
"label": "密码",
"name": "password",
"value": ""
},
{
"type": "select",
"label": "性别",
"name": "gender",
"value": "",
"options": [
{ "label": "男", "value": "male" },
{ "label": "女", "value": "female" }
]
},
{
"type": "checkbox",
"label": "爱好",
"name": "hobbies",
"value": [],
"options": [
{ "label": "游泳", "value": "swimming" },
{ "label": "跑步", "value": "running" },
{ "label": "健身", "value": "fitness" }
]
}
]
}
```
然后在 Vue.js 组件中,通过遍历 JSON 数据的 fields 属性来动态生成表单的每个字段,如下所示:
```html
<template>
<form>
<div v-for="(field, index) in formData.fields" :key="index">
<component :is="getFieldComponent(field.type)"
:label="field.label"
:name="field.name"
:value="field.value"
:options="field.options"
@input="onFieldInput(field.name, $event)">
</component>
</div>
<button type="submit">提交</button>
</form>
</template>
<script>
export default {
data() {
return {
formData: {
fields: [...]
}
};
},
methods: {
getFieldComponent(type) {
switch (type) {
case 'text':
case 'password':
return 'input-field';
case 'select':
return 'select-field';
case 'checkbox':
return 'checkbox-field';
default:
return null;
}
},
onFieldInput(name, value) {
// 更新表单数据
this.formData.fields.find(field => field.name === name).value = value;
}
},
components: {
'input-field': {
props: ['label', 'name', 'value'],
render(h) {
return h('div', [
h('label', this.label),
h('input', {
attrs: {
type: 'text',
name: this.name,
value: this.value
},
on: {
input: event => {
this.$emit('input', event.target.value);
}
}
})
]);
}
},
'select-field': {
props: ['label', 'name', 'value', 'options'],
render(h) {
const options = this.options.map(option => {
return h('option', { attrs: { value: option.value } }, option.label);
});
return h('div', [
h('label', this.label),
h('select', {
attrs: {
name: this.name,
value: this.value
},
on: {
input: event => {
this.$emit('input', event.target.value);
}
}
}, options)
]);
}
},
'checkbox-field': {
props: ['label', 'name', 'value', 'options'],
render(h) {
const checkboxes = this.options.map(option => {
return h('label', [
h('input', {
attrs: {
type: 'checkbox',
name: this.name,
value: option.value,
checked: this.value.includes(option.value)
},
on: {
input: event => {
const values = this.value.slice();
if (event.target.checked) {
values.push(event.target.value);
} else {
const index = values.indexOf(event.target.value);
if (index >= 0) {
values.splice(index, 1);
}
}
this.$emit('input', values);
}
}
}),
option.label
]);
});
return h('div', [
h('label', this.label),
checkboxes
]);
}
}
}
};
</script>
```
上面的代码中,getFieldComponent 方法根据字段类型返回对应的组件名,onFieldInput 方法用于更新表单数据,渲染函数中通过 component 标签动态渲染每个字段对应的组件。组件中的 input、select 和 checkbox 标签都绑定了 input 事件,当用户输入数据时会触发该事件,从而更新表单数据。
最后在父组件中引入动态生成表单的组件即可:
```html
<template>
<div>
<dynamic-form></dynamic-form>
</div>
</template>
<script>
import DynamicForm from './DynamicForm.vue';
export default {
components: {
DynamicForm
}
};
</script>
```
js动态生成调查问卷表单
好的,生成调查问卷表单可以通过JavaScript来实现。下面是一个简单的示例代码:
HTML:
```html
<form id="survey-form">
<label for="name">您的姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">您的年龄:</label>
<input type="number" id="age" name="age"><br>
<label for="gender">您的性别:</label>
<select id="gender" name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select><br>
<label for="feedback">您对本次调查有何建议或意见:</label>
<textarea id="feedback" name="feedback"></textarea><br>
<button type="submit">提交</button>
</form>
```
JavaScript:
```javascript
// 获取表单元素
const form = document.getElementById('survey-form');
// 动态生成问题
const questions = [
'您对本次活动的满意度如何?',
'您对本次活动的组织和安排是否满意?',
'您觉得本次活动有哪些可以改进的地方?'
];
questions.forEach((question, index) => {
// 创建标签元素
const label = document.createElement('label');
const input = document.createElement('input');
// 设置元素属性
label.setAttribute('for', `question${index}`);
label.innerText = `${index+1}. ${question}`;
input.setAttribute('type', 'text');
input.setAttribute('id', `question${index}`);
input.setAttribute('name', `question${index}`);
// 添加元素到表单中
form.appendChild(label);
form.appendChild(input);
});
// 提交表单
form.addEventListener('submit', (event) => {
event.preventDefault(); // 阻止默认提交行为
const formData = new FormData(form); // 获取表单数据
console.log(formData); // 输出表单数据
});
```
这个示例代码可以动态生成多个问题,并且获取用户填写的表单数据。你可以根据需要对表单进行更改和扩展。