如何更改表單內提交按鈕的 position？
[英]How to change position of the submit button inside a form?
問題描述
我的 HTML 代碼：
body{ font-family: cursive; font-size: 25px; font-weight: bold; background-color: rgba(95, 112, 160, 0.479); } h2{ display: block; border: 2px solid black; text-align: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #details{ display: block; background-color:rgba(28, 117, 190, 0.726); } #back{ font-size:20px; margin-left: 100px; border-radius: 8px; } #go{ font-size:20px; margin-left: 800px; border-radius: 8px; }
<body> <h2>Please finalize your details</h2> <form id="details" action=database_registration.php method="post" class="form"> Full name: <strong name="name_1" value=""></strong><br><br> ID No:<strong name="org_number_1" value=""></strong><br><br> Mobile No:<strong name="ph_number_1" value=""></strong><br><br> E-mail: <strong name="email_1"></strong><br><br> ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br> <button id="go" style="background-color: whitesmoke">It's correct</button> </form> <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button> <p id="response"></p> </body>
如您所見，按鈕It's correct位於藍色顯示塊內。 我想在下面重新定位它。 請幫我解決這個問題。
我希望這兩個按鈕都在藍色顯示屏之外並處於相同的高度。
2 個解決方案
解決方案1
1 2021-01-18 04:09:53
要將其放在藍色框下方，您只需添加margin-bottom: (value); 並調整一些東西（見下文）
請參見下面的示例：
body{ font-family: cursive; font-size: 25px; font-weight: bold; background-color: rgba(95, 112, 160, 0.479); } h2{ display: block; border: 2px solid black; text-align: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #details{ display: block; background-color:rgba(28, 117, 190, 0.726); } #back{ font-size:20px; margin-left: 100px; border-radius: 8px; } #go{ font-size:20px; margin-left: 300px; border-radius: 8px; margin-bottom: 800px; }
<body> <h2>Please finalize your details</h2> <form id="details" action=database_registration.php method="post" class="form"> Full name: <strong name="name_1" value=""></strong><br><br> ID No:<strong name="org_number_1" value=""></strong><br><br> Mobile No:<strong name="ph_number_1" value=""></strong><br><br> E-mail: <strong name="email_1"></strong><br><br> ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br> </form> <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button> <button id="go" style="background-color: whitesmoke">It's correct</button> <p id="response"></p> </body>
So there's a couple of things I changed, your go button HTML needed to be at the same position as the back button and I switched the position of that whole line in your HTML code. 其次，我調整了margin-left因為你的按鈕已經離開了。 此外，我添加了margin-bottom以再次調整按鈕的位置。 根據您的要求，您希望它位於此代碼完成該任務的表單下方，但如果缺少其他內容，請告訴我。
解決方案2
0 已采納 2021-01-18 04:52:44
如果按鈕用於提交表單，則需要在表單內部。
你也有一個明顯的缺乏我已經解決的表單元素。
將除按鈕之外的所有內容封裝在filedset 。 然后創建一個特定的div來保存按鈕並使用flex和justify-content來 position 按鈕。
body { font-family: cursive; font-size: 25px; font-weight: bold; background-color: rgba(95, 112, 160, 0.479); } h2 { display: block; border: 2px solid black; text-align: center; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; } #details label { display: block; margin-bottom: 1.5em; } #details fieldset { background-color: rgba(28, 117, 190, 0.726); border: none; } #details input { font-size: 25px; font-weight: bold; border: none; background: none; font-family: cursive; }.buttons { display: flex; margin: 0.5em; justify-content: space-between; }.buttons button { font-size: 20px; border-radius: 8px; }
<body> <h2>Please finalize your details</h2> <form id="details" action=database_registration.php method="post" class="form"> <fieldset> <label>Full name: <input name="name_1" value=""></label> <label>ID No:<input name="org_number_1" value=""></label> <label>Mobile No:<input name="ph_number_1" value=""></label> <label>E-mail: <input name="email_1"></label> <div>ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""></div> </fieldset> <div class="buttons"> <button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button> <button id="go" style="background-color: whitesmoke">It's correct</button> </div> </form> <p id="response"></p> </body>
DHTMLXslider更改值時如何提交表單（沒有提交按鈕）？
[英]how to submit the form (without submit button) when DHTMLXslider change value?
如何覆蓋（禁用）表單標記內的按鈕標記的“提交”行為？
[英]How to override (disable) the “submit” behaviour of a button tag inside of a form tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.