在 HTML 中将两个按钮放在同一行
发布于2022-09-09 09:16 阅读(854) 评论(0) 点赞(27) 收藏(0)
这是我的登录表单：
如您所见，登录和注册按钮位于不同的行上。我希望他们在同一条线上。
我将注册按钮代码放在与登录相同的段落元素中。毫无疑问，它出现在同一行，但是当我单击注册时，它要求我填写用户名和密码。我该如何解决？
这是我的代码：
<form method="post" >
<p><input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required></p>
<p><input id="password" type="password" placeholder="Password" style="margin:10px" required></p>
<p><input class="swd-button" type="submit" value="Sign In"></p>
</form>
<a href="register.html"><button class="swd-button">Register</button></a>
解决方案
只需按如下方式重新排列并将类型添加到您的按钮：
<form method="post" >
<p>
<input id="username" type="text" placeholder="Username" style="margin:10px" autofocus required>
</p>
<p>
<input id="password" type="password" placeholder="Password" style="margin:10px" required>
</p>
<p>
<input class="swd-button" type="submit" value="Sign In">
<a href="register.html"><button type="button" class="swd-button">Register</button></a>
</p>
</form>
通常，如果您button在表单中添加一个，它将把它作为一个提交按钮来触发提交表单。因此，您需要将其指定为type="button".
演示：http: //jsbin.com/EjEbihUDu/2/
所属网站分类: 技术文章 > 问答
作者：黑洞官方问答小能手
链接：http://www.qianduanheidong.com/blog/article/404226/3926b4a13bb99d6939e0/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力