Question

我有一个包含多个按钮的页面，我希望每个按钮将用户带到另一个地方。我一直在搜索教程，无法弄清楚要做什么。我身体里有这个：

<form method="get" action="KFC.html">
    <input type="submit" value="KFC">
</form>

<form method="get" action="Pizza_Hut.html">
    <input type="submit" value="Pizza Hut">
</form>


<form method="get" action="Olive_Garden.html">
    <input type="submit" value="Olive Garden">
</form>


<form method="get" action="Create_Order.html">
    <input type="Submit" value="Create Your Own Order">
</form>

</body>

如何在一个位于不同位置的页面上创建多个按钮？这是正确的吗？它有效，但我被告知这是一个非常糟糕的方法。

Answer 1

尝试添加标准的浏览器独立锚链接，然后使用CSS将它们设置为类似于您想要的按钮。

 <a href="KFC.html" class="button">KFC</a>
 <a href="Pizza_hut.html" class="button">Pizza hut</a>

...诸如此类

然后是CSS。在下面的示例中，我展示了一种样式链接样式的方法，如果您搜索它，我确定您可以找到许多其他更合适的外观。

a.button { 
   display: inline-block;
   padding: 5px;
   border: 1px solid #999;
   background: #aaa;
   color: #333;
   text-decoration: none;
 }
 a.button:hover {
   background: #ccc;
 }

我添加了一个类“按钮”，因此您只将某些链接设置为按钮。这样，您可以添加任意数量的“按钮”，而无需在代码中添加表单，也不会影响页面上的其他链接。

Answer 2

您正在创建多个表单，这些表单可能会导致滞后和验证问题。如果你想让你的按钮去某些地方，特别是有一些方法。

你可以使用onclick属性来捕获click事件，并根据这样的按钮选择正确的位置。

<button type="button" id="1" onclick="window.location = newLocation1;">Click Me 1!</button>
<button type="button" id="2" onclick="window.location = newLocation2;">Click Me 2!</button>
<button type="button" id="3" onclick="window.location = newLocation3;">Click Me 3!</button>

Answer 3

谢谢。结果你会想要与上面的答案非常相似的东西。但由于某种原因，我不理解。这是我的HTML代码：

<body>
<p>Deliveries<p>
<a href="KFC_Menu.html">KFC</a>  #This part -> >KFC</a> gives you the text that appears on the button. The <a href="KFC_Menu.html"> will take you to the KFC_Menu page.

<br>
<a href="Create_Order.html">Create Your Own Order</a>

要将这些链接设置为看起来像按钮，请将这样的CSS文件作为示例：

stylesheet.css中

a {
text-decoration: none;
font-size: 24px;
font-family: sans-serif, arial;
font-weight: bold;
background-color: blue;
color: #ffffff;
padding: 8px;
border: 2px solid grey;
border-radius: 10px;

}

四种形式，四个按钮，四个链接，一个页面。有没有更好的办法？

3 个答案: