<input type=”submit”>和<button type=”submit”>有什么不同?
时间: 2023-02-25 16:14:38 浏览: 171
<input type="submit"> 和 <button type="submit"> 的不同在于它们的外观和用途。
<input type="submit"> 是一个输入字段,通常是一个单行文本框,用于向服务器提交表单数据。它通常是一个简单的按钮,并且用户可以单击它来提交表单。
<button type="submit"> 则是一个按钮元素,它允许开发人员在其中定义更丰富的内容,如文本、图像和样式。这使得它更适合用于创建复杂的设计和交互,并且可以在提交表单时使用。
因此,当你需要简单的提交按钮时,使用 <input type="submit"> 可能是更好的选择;而当你需要创建复杂的提交按钮时,使用 <button type="submit"> 可能是更好的选择。
相关问题
<!DOCTYPE html> <html> <head> <title>Login</title> </head> <body> <h1>Login</h1> <form action="/login" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="password">Password:</label> <input type="password" id="password" name="password"><br><br> <input type="submit" value="Submit"> </form> </body> </html> 增加取消按钮
要在上述代码中添加一个取消按钮,可以在 `<form>` 标签的后面插入一个 `<input>` 标签。以下是修改后的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<h1>Login</h1>
<form action="/login" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
<input type="button" value="Cancel" onclick="window.location.href='/cancel'">
</form>
</body>
</html>
```
在上述代码中,我们添加了一个 `<input>` 标签,类型为 "button",值为 "Cancel"。同时,我们为该按钮添加了一个 `onclick` 事件,当点击该按钮时,会跳转到 "/cancel" 页面。你可以根据需要修改跳转页面的 URL。
<div class="container__form container--signup"> <form action="{{ url_for('auth.login') }}" class="form" id="form1" method="POST"> <h2 class="form__title">注册</h2> <input type="text" placeholder="用户名账号" class="input" name="username" /> <input type="email" placeholder="邮箱" class="input" name="email"/> <input type="password" placeholder="密码" class="input" name="password"/> <input type="hidden" name="register_submit" value="register_submit"> <button class="btn" type="submit" name="register_submit" onclick="submitForm()">注册</button> </form> </div> <!-- Sign In --> <div class="container__form container--signin"> <form action="{{ url_for('auth.login') }}" class="form" id="form2" method="POST"> <h2 class="form__title">登录</h2> <input type="email" placeholder="邮箱" class="input" name="email"/> <input type="password" placeholder="密码" class="input" name="password"/> <a href="#" class="link">忘记密码?</a> <input type="hidden" name="login_submit" value="login_submit"> <button class="btn" type="submit" name="login_submit" onclick="submitForm()">登录</button> </form> </div>为什么点登录仍然会提交到注册
可能是因为在登录表单中也设置了一个名为"register_submit"的隐藏输入字段,并且使用了相同的名称作为登录提交按钮的名称。这会导致在点击登录按钮时,表单将尝试提交"register_submit"的值,而不是"login_submit"的值。您可以在登录表单中更改隐藏输入字段的名称,以确保它与注册表单中的名称不同,或者在登录提交按钮中使用不同的名称。
阅读全文