Question

我使用以下代码来填写表单中的两个按钮。但按钮将逐一出现。我的意思是说，一个按钮将首先出现在另一个按钮的下方。

代码段

<form name="myform" action="xxxx.cgi" method="POST">   
<input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
<input type="submit" value="hai" name="dd">
</form>

我可以使用以下代码在同一行中放置两个按钮。

<form name="myform" action="xxxx.cgi" method="POST">
<input type="submit" value="hello" name="d">
<input type="submit" value="hai" name="dd">
</form>

但是这两个按钮都会在点击时加载xxxx.cgi。我该怎么做才能在同一行的网页上放置两个按钮，其中第一个按钮将在点击时加载xxxx.cgi，第二个按钮将在点击时加载yyyy.cgi。请帮忙

通过星

Answer 1

在CSS中添加这样的样式

form{
    float:left;
}

请参阅此fiddle

我已使用此标记，因为这是正确的

<form name="myform" action="xxxx.cgi" method="POST">   
  <input type="submit" value="hello" name="d">
</form>
<form name="myform" action="yyyy.cgi" method="POST">
  <input type="submit" value="hai" name="dd">
</form>

另一个使用两个同名的按钮。

上述代码的一个问题是它在同一页面中使用了两种形式，这些形式可能会在某些时候产生问题。

所以只使用一种表格

请参阅fiddle。

Answer 2

您可以使用float：left表示元素，也可以使用display：inline-block

form{display: inline-block;}

请参阅http://jsfiddle.net/

Answer 3

HTML

<form name="myform" class='myform' action="xxxx.cgi" method="POST">   
    <input type="submit" value="hello" name="d">
</form>
<form name="myform" class='myform' action="yyyy.cgi" method="POST">
    <input type="submit" value="hai" name="dd">
</form>

您可以使用以下css在两个表单上添加样式。

.myform
{
    float: left;
}

Answer 4

嘿@Dominic在这里你可以做些什么来解决这个问题。你只需要使用一些javascript。

创建两个表单，但将两个按钮放在一个表单中

<body>
<form action='1.php' name='first'>
<input type="button"  value='1.php' id='one'/>
<input type="button"  value='2.php' id='two'/>
</form>
<form action='2.php' name='second'>

</form>
</body>

使用javascript触发操作

var one = document.getElementById('one');
one.onclick=function(){
alert(document.first.submit());
}

var two = document.getElementById('two');
two.onclick=function(){
alert(document.second.submit());
}

如何在同一行上放置两个按钮

4 个答案: