中心表单提交按钮html/css

中心表单提交按钮是指在HTML和CSS中创建一个位于表单中心位置的提交按钮。为了实现这个效果，你可以使用以下代码：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Centered Form Submit Button</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="form">
       <input type="text" placeholder="Enter your name" />
       <input type="email" placeholder="Enter your email" />
       <input type="password" placeholder="Enter your password" />
       <button type="submit" class="submit-btn">Submit</button>
    </form>
</body>
</html>

CSS代码（styles.css）：

.form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

input {
    margin-bottom: 10px;
    width: 100%;
    padding: 10px;
}

.submit-btn {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin-top: 20px;
}

这个代码将创建一个表单，其中包含三个输入框（姓名、电子邮件和密码）以及一个位于表单中心的提交按钮。通过使用Flexbox布局，我们可以轻松地将提交按钮居中。

这个示例中使用的CSS样式可以根据需要进行调整，以适应不同的设计需求。

页面内容是否对你有帮助？

有帮助

没帮助

将表单输入/提交按钮与表单右侧对齐

css、forms、alignment

在表单中，我有一个提交按钮&它出现在表单的下方(我需要向下滚动屏幕才能看到它)。我已经尝试过css右对齐/浮动&事物-但这通常会将实际的表单移动到左/右，或者将提交按钮放在屏幕的右侧(表单和按钮之间有很大的间隙)。按钮在右边-但仍然在html表单的底部。在屏幕的底部。有没有办法 a)将主窗体保持在屏幕的中间/中

浏览 0提问于2016-11-05得票数 0

2回答

如何对齐多个表单元素？

html、css、web

我对设计一无所知，我试图得到一个简单的HTML表单，如下所示：基本上，它是一个有三个输入字段和一个提交按钮的表单。关于提交按钮，我希望它是完美的中心对齐，水平和垂直，与输入字段，但在这些右边。谢谢你的指点！编辑：我更喜欢用CSS完成，而不是基于表的。(我听说以桌子为

浏览 1提问于2011-03-14得票数 7

回答已采纳

1回答

CSS:将提交按钮定位在窗体上的最后一个控件之后

css

我以编程方式生成一个HTML表单，并将控件放在上面，如下所示：我的问题是如何指定Submit按钮的位置，我也通过编程将其添加到HTML中。我知道表单</em

浏览 0提问于2010-06-27得票数 1

回答已采纳

2回答

如何在HTML中将文本框与屏幕中心对齐？

php、html、css

> <body><p align="center">Please enter your username andvalue="Login"></td> </table></body> &l

浏览 0提问于2015-11-17得票数 0

回答已采纳

2回答

HTML中的表单标记提交与JS中的document.getElementById("form1").submit()

javascript、html

嘿，我现在正在学习如何在JS中编写代码，我有一个问题；为什么我需要使用document.getElementById("form1").submit()，而我可以通过在html中添加一个提交按钮并将其放在一个表单标记中来提交表单和数据

浏览 20提问于2017-02-20得票数 2

回答已采纳

2回答

我希望能得到一些意见，你认为什么是最好的做法是编码表单提交按钮。我正在建设一个新的网站，并正在考虑改变。以下是我所看到的选项： input type="submit"与背景图像，和CSS隐藏的价值文本-这是我目前使用的。input type="image" with src="source.jpg" -我知道我不需要隐藏值文本，但是我总是喜欢将图像放在CSS的中心位置，所以如果我需要更改它，我可以很容易地做到这一点。butt

浏览 10提问于2012-10-17得票数 1

回答已采纳

2回答

简单的C#和MVC项目

c#、asp.net-mvc、visual-studio-2013

出现了Textbox和submit按钮。在文本框中输入名称并单击submit后，它不会显示在下一页中。= "Access TextBox and TextboxFor Value From View To Controller In Asp.net MVC"; @Html.Label("Name") @using (Html.BeginForm("Welcome",&quo

浏览 1提问于2016-07-13得票数 0

2回答

IE未打开href HTML

html、internet-explorer、href

我有下面的href，我需要它看起来像一个按钮<input type="submit" value="Log in"><

浏览 16提问于2017-02-02得票数 0

回答已采纳

1回答

CSS属性文本- iOS Webkit为提交按钮重写的对齐

html、ios、css、webkit、text-align

以下是表单提交按钮的CSS代码： -webkit-appearance: none !important;然而，在使用chrome和safari的桌面版本上，文本按其应有的中心显示：我不认为这是一个特定的问题，因为!important声明的text-align: center应该阻止

浏览 3提问于2018-10-28得票数 0

回答已采纳

2回答

无法将‘动画按钮’链接到上传文件的php文件

php、html

因此，基本上我尝试通过表单中的upload按钮来上传文件。我的代码一直运行得很好，直到我决定让我的upload按钮有点“时尚”。我真傻。<form action="upload_file.php" method="post" enctype=&q

浏览 1提问于2012-10-16得票数 0

回答已采纳

1回答

海滨-带有提交按钮的报告

smalltalk、seaside

(OrderedCollection new renderBlock: [ :each :html| (html submitButton title: ''

浏览 0提问于2013-07-17得票数 1

6回答

表单、发布和提交按钮

php、html、css、forms

我想提交一个页面，目标本身，在按下一个按钮，但与它携带一块数据。编辑|删除有什么想法吗？

浏览 2提问于2009-08-17得票数 1

回答已采纳

2回答

弹出登录页面

jquery、jquery-ui、zend-framework、jquery-dialog

我已经在www.mywebsite.com/members/login创建了一个登录页面我希望这对登录页面有最小的影响，我的意思是我不想再重新编写整个程序，我可以想到几个选项1-将所有代码放在所有页面中，然后在需要时对其进行“对话”2-在jquery对话框中使用Iframe来显示登录页面的内容但我想知道是否有更好的技术来做到这一点。

浏览 1提问于2011-10-07得票数 0

回答已采纳

1回答

带显示的中央窗体:表格单元格

html、css、css-tables

我在表单标签里有一个提交按钮。此表单标记具有一些css-属性：在移动设备上，它有一个百分比宽度。在这些浏览器中，提交按钮不是居中的，而是位于左侧。因此，我编写了一个jquery脚本，它计算宽度并将其设置为submit按钮(而不是width:auto)。这就是解决办法。我做了一项研究，现在我知道，我可以使用显示:表格单元格；在表单标签中，它将以内容(提交按钮)为<em

浏览 0提问于2013-08-21得票数 0

3回答

增量和递减按钮

javascript、jquery

DOCTYPE html><head> <script= 0; } }); </scri

浏览 0提问于2018-02-23得票数 0

回答已采纳

3回答

Javascript元素隐藏不起作用

javascript、css、forms、show-hide

我试图通过在页面开头定义一个javascript函数并通过按钮的onclick属性调用它来隐藏html表单中的元素。document.getElementById('search').style.display = 'none'; firefox是否默认使用css当我点击“高级”按钮时，它确实消失了一小段时间，然

浏览 0提问于2011-09-21得票数 1

回答已采纳

3回答

在MVC 5中将submit按钮移到表单外具有部分视图

javascript、html、ajax、asp.net-mvc、forms

如果在部分视图中的表单中有提交按钮，它可以工作。但是我希望保存按钮在对话框的按钮上，因此在表单和部分视图之外。 @Ht

浏览 0提问于2015-02-04得票数 4

回答已采纳

2回答

登录按钮不提供提交信息，同时点击enter works获取凭据

php、html、phishing

我使用xampp在我的本地服务器上托管了我的index.html，当有人记录我可以获取他们的信息时，我想要这样做。post.php，当我使用用户名和密码时，它给了我信息，并且只有当我点击enter时，它才能工作，当我在登录时，它只是将我重定向到我创建的页面，而我的文本file.While中没有任何信息，我悬停在我的登录按钮(激活)上，它让我重定向到redircet页面，我made.Do，您有什么建议，我如何使那个m，y登录按钮(在代码中激活)仍然给我相同的信息，当我点击enter？下面是index.html的代码。<

浏览 9提问于2022-02-10得票数 -2

3回答

2个按钮，1个窗体

ruby-on-rails、forms

我有一个简单的表单，如下所示 <%= f.submittrue : false 所以问题是，如果用户单击"Approve“按钮或"Deny”按钮，发送的参数就是该:commit => "Approve"。

浏览 0提问于2009-05-21得票数 0

回答已采纳

3回答

将数据传递给控制器

asp.net、asp.net-mvc、asp.net-mvc-5

set; } public virtual Cell Cell { get; set; } 索引页面显示商店表： @Html.Hidden("id", @item.StoreID)@item.StoreNo

浏览 1提问于2015-01-13得票数 0

回答已采纳

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

中心表单提交按钮html/css

相关·内容

将表单输入/提交按钮与表单右侧对齐

如何对齐多个表单元素？

CSS:将提交按钮定位在窗体上的最后一个控件之后

如何在HTML中将文本框与屏幕中心对齐？

HTML中的表单标记提交与JS中的document.getElementById("form1").submit()

提交按钮的最佳实践

简单的C#和MVC项目

IE未打开href HTML

CSS属性文本- iOS Webkit为提交按钮重写的对齐

无法将‘动画按钮’链接到上传文件的php文件

海滨-带有提交按钮的报告

表单、发布和提交按钮

弹出登录页面

带显示的中央窗体:表格单元格

增量和递减按钮

Javascript元素隐藏不起作用

在MVC 5中将submit按钮移到表单外具有部分视图

登录按钮不提供提交信息，同时点击enter works获取凭据

2个按钮，1个窗体

将数据传递给控制器

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐