如何同时切换按钮和提交表单?

htmlweb developmentfront end technology更新于 2024/4/22 5:00:17

每个 HTML 表单都有一个与服务器端交互的 action 属性。提交表单时，HTML action 属性用于指定表单数据应传输到服务器的位置。每个按钮都会将我们带到同一个位置，因为 action 属性存储了数据的目的地。

HTML 按钮

可点击按钮由 <button> 标签定义。您可以在 <button> 元素内插入文本(以及 <i> <b>、<strong>、<br> 和 <img> 等标签)。使用 <input> 制作的按钮元素，这是不可行的。

语法

以下是 HTML <button> 的语法。

<form action="#" method="post">
<button type="submit">click</button>
</form>

为了更好地理解如何同时切换按钮和提交表单。

示例

在下面的示例中，我们创建一个表单，该表单同时提交表单并切换按钮。

<!DOCTYPE html>
<html>
   <body>
      <form action="https://www.cainiaomax.com/index.htm" method="post">
         Username:<br>
         <input type="text" name="username">
         <br>
         Password:<br>
         <input type="password" name="password">
         <br><br>
         <button type="submit" formaction="https://www.cainiaomax.com/index.htm">
         Signin
         </button>
      </form>
   </body>
</html>

脚本执行后，将生成一个输出，其中包含一个包含输入字段的表单以及网页上的点击按钮。当用户点击按钮时，表单将被提交并显示一个新页面。

示例

请考虑以下示例，我们将同时创建表单、设置切换按钮并提交表单。

<!DOCTYPE html>
<html>
   <body style="background-color:#D5F5E3 ;">
      <form action="https://www.cainiaomax.com/index.htm" method="post">
         <label for="courses">Choose Courses:</label>
         <select name="courses" id="courses">
            <option value="HTML">HTML</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
            <option value="CSS">CSS</option>
         </select>
         <br><br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

运行上述脚本后，输出窗口将弹出，显示下拉列表以及提交按钮。当用户点击提交按钮时，表单将被提交，并同时打开一个新页面。