<form action="?ac="submit" method="post" onsubmit="return false;">
<textarea class="form-control" id="example-textarea-input" name="example-textarea-input" rows="16" placeholder="内容.."></textarea>
</form>
<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;">
<div class="form-group">
<label class="sr-only" for="example-if-email">输入框1</label>
<input class="form-control" type="text" id="example-if-email" name="shuru1" placeholder="输入框1.." />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">提交</button>
</div>
</form>
<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;">
<div class="form-group">
<label class="sr-only" for="example-if-email">输入框2</label>
<input class="form-control" type="text" id="example-if-email" name="shuru2" placeholder="输入框2.." />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">提交</button>
</div>
</form>
<form class="form-inline" action="?ac="submit" method="post" onsubmit="return false;">
<div class="form-group">
<label class="sr-only" for="example-if-email">输入框3</label>
<input class="form-control" type="text" id="example-if-email" name="shuru3" placeholder="输入框3.." />
</div>
<div class="form-group">
<button class="btn btn-default" type="submit">提交</button>
</div>
</form>
请教怎么输入框1,2,3三个提交的时候 带上textarea 的内容,比如提交输入框1的时候 提交 输入框1的内容+textarea的内容,提交输入框2的时候 提交 输入框2的内容+textarea的内容
可以使用JavaScript来实现这个功能。首先,给每个提交按钮添加一个点击事件,当点击时获取textarea的内容,并将其赋值给隐藏的input元素。然后再将所有的input元素一起提交即可。
以下是示例代码:
HTML代码:
<form action="#" method="post">
<textarea id="content" name="content"></textarea>
<button id="submit1" type="button">提交1</button>
<button id="submit2" type="button">提交2</button>
<button id="submit3" type="button">提交3</button>
<input id="input1" type="hidden" name="input1">
<input id="input2" type="hidden" name="input2">
<input id="input3" type="hidden" name="input3">
<button id="submit-all" type="submit">提交所有</button>
</form>
JavaScript代码:
// 获取元素
const content = document.getElementById('content');
const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const input3 = document.getElementById('input3');
const submit1 = document.getElementById('submit1');
const submit2 = document.getElementById('submit2');
const submit3 = document.getElementById('submit3');
const submitAll = document.getElementById('submit-all');
// 给每个提交按钮添加点击事件
submit1.addEventListener('click', function() {
input1.value = content.value;
document.forms[0].submit();
});
submit2.addEventListener('click', function() {
input2.value = content.value;
document.forms[0].submit();
});
submit3.addEventListener('click', function() {
input3.value = content.value;
document.forms[0].submit();
});
// 提交所有按钮的点击事件
submitAll.addEventListener('click', function() {
input1.value = content.value;
input2.value = content.value;
input3.value = content.value;
});
当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用 < textarea > 标签。
在表单元素中,< textarea > 标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。
今日反馈:
<textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea>