This question already has answers here:
Center form submit buttons HTML / CSS
(11 answers)
Closed 5 years ago.
Very odd and I spent an hour today trying to figure out what I'm doing wrong. Have a email signup form. Four input fields and a submit button. In my design, the submit button should be centered under the four fields. However, instead the button is flush left aligned no matter whether I use or don't use float:left; or clear:both; or margin:0 auto; In other words, the usual suspects.
Here's the site. The form is on the bottom: http://ellismarsalis2017.jasonmarsalis.com/
Here's the code:
#footerForm {
position: relative;
float: none;
width: 728px;
height: auto;
margin: 0 auto;
padding: 18px auto 0;
}
footer form input {
float: left;
color: #2a358f;
width: 44%;
background: #edc53e;
border-radius: 8px;
margin: 0 2% 14px;
font-size: 18px;
padding: 0 .5%;
border: none;
}
footer form input.signUp {
font-family: "clarendon-urw", serif;
float: none!important;
clear: both;
background: #2a358f;
color: #edc53e;
margin: 0 auto;
font-size: 18px;
padding: 8px 24px;
border: none;
text-align: center;
}
footer p {
padding: 28px 0;
}
<div id="footerForm">
<form name="" method="post" action="http://www.yoursite.com/box.php">
<input name="name" type="text" id="name" value="Your Name">
<input name="field1" type="text" id="field1" value="Your City">
<input name="email" type="text" id="email" value="Your Email Address">
<input name="field2" type="text" id="field2" value="Your State">
<input name="p" type="hidden" id="p" value="7">
<input type="hidden" name="nlbox[1]" value="1">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</form>
</div>
You should put it on DIV section and make it's style text-align:center like that:
<div style="text-align:center;">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>
or with a class and css code :
HTML
<div class="submitsection">
<input type="submit" name="Submit" class="signUp" value="Sign me up for the Email List!">
</div>
CSS
.submitsection {
text-align:center;
}
I'm trying to create two css container classes that can be used to:
Vertically align form elements using .group.
Horizontally align form elements using .group.group--inline.
Each for element will use the class .group__item to make sure there's 16px vertical and horizontal distance between the form elements. For example:
.group__item { margin-top: 16px; }
I however want to sure that the entire height and width of the .group can be used for the form elements and that there is no unwanted whitespace. Not having any margin around our components makes it easier to properly layout them.
To negate the margin on the .group__item's I'm adding it as negative margin to the .group and .group--inline. For example:
.group { margin-top: -16px; }
I'm wondering if there are any negative side effects to giving the .group container a negative margin?
function toggleGroupBorder() {
var groups = document.querySelectorAll('.group');
for (var i = 0, j = groups.length; i < j; i++) {
groups[i].classList.toggle('group--show-border');
}
}
.container {
margin: 32px;
padding: 32px;
border: 1px solid #99f;
}
.group {
margin-top: -16px;
}
.group.group--show-border {
border: 1px solid #f99;
}
.group .group__item {
display: block;
margin-top: 16px;
}
.group.group--inline {
margin-left: -16px;
}
.group.group--inline .group__item {
margin-left: 16px;
display: inline-block;
}
* {
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial;
margin: 0;
}
input {
height: 32px;
padding: 0 8px;
}
button {
height: 32px;
padding: 0 24px;
border: none;
}
<button onclick="toggleGroupBorder();">Toggle Group Border</button>
<h2>Vertical field alignment using <code>.group</code></h2>
<div class="container">
<div class="group">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
<h2>Horizontal field alignment using <code>.group.group-inline</code></h2>
<div class="container">
<div class="group group--inline">
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<input class="group__item" type="text" />
<button class="group__item" >Default</button>
</div>
</div>
Or see this CodePen
If you visit my page (http://www.dentalfixrx.com/local-equipment-repair/) and click the "get started" button at the top right you will open a lightbox form.
I would like to create code so the lightbox appears on page load automatically.
Here is the code to open the lightbox currently: <img src="images/mobile-dental-repairs.gif" width="184" height="36"border="0" class="getstarted" />
simply visiting http://www.dentalfixrx.com/local-equipment-repair/download-kit.html does not work
Wrap the lightbox code into a parent div (.parent) and hide that whole div initially
HTML:
<div class="parent">
<div class="downloadkit"><form action="formmail.php" method="post" >
<input type="hidden" name="recipients" value="brian#dentalfixrx.com,billdonatojr#gmail.com,andy#dentalfixrx.com" />
<input type="hidden" name="subject"value="New DentalFixRx Lead!" />
<input type="hidden" name="good_url" value="thanks-downloadkit.php" />
<div style=" width:300px; position:absolute; right:10px; top:15px;">
<h1 style="font-size:20px; margin:5px auto;">Emergency Fix Needed?</h1>
To receive a fast response, please complete the form below and click the "submit" button.
</div>
<p><label>Name/Business:<span class="red">*</span></label><input type="text" name="name" id="name" /></p>
<p> <label> Phone:<span class="red">*</span></label> <input type="text" name="phone" id="phone" / > </p>
<p> <label>Email:<span class="red">*</span></label> <input type="text" name="email" id="email" / ></p>
<p> <label>State:</label> <input type="text" name="st" id="st" / ></p>
<p> <label>Zip Code:</label> <input type="text" name="zip" id="zip" / ></p>
<p> <label>Service Needed:</label><select name="">
<option>Select one</option>
<option>Handpiece Repair</option>
<option> -Low Speed</option>
<option> -High Speed</option>
<option> -Electric High Speed</option>
<option>Equipment Repair</option>
<option> -Autoclaves</option>
<option> -Chairs & Delivery Units</option>
<option> -Compressors</option>
<option> -Vacuum Pumps</option>
<option> -Ultrasonic Scalers</option>
<option> -Instrument Sharpening</option>
<option> -Upholstery</option>
<option> -Curing Lights</option>
<option> -Film Processors</option>
<option>Other Service</option>
</select></p>
<p> <label>Select type of request:</label><select name="">
<option>Select one</option>
<option>Just a casual question</option>
<option>I need some help but it's not super time-sensitive</option>
<option>Things are broken and I'd like them not to be!</option>
<option>I can't get things done, please reply ASAP</option>
</select></p>
<div class="clear"></div>
<input value=" " type="submit" class="download-btn" width="231px" height="36px" />
<span>Exit</span>
</form></div>
</div>
CSS:
div.parent
{
display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
text-align: center;
font-family: 'Myriad Pro', Arial, sans-serif !important;
font-size: 22px !important;
border: 2px solid #aaa;
z-index: 1040;
-moz-box-shadow: 0px 0px 20px 2px #ccc;
-webkit-box-shadow: 0px 0px 20px 2px #ccc;
box-shadow: 0px 0px 20px 2px #ccc;
background: rgb(54, 25, 25); /* Fall-back for browsers that don't
support rgba */
background: rgba(255, 255, 255, .7);
}
div.downloadkit
{
position: fixed;
width: 200px;
height: 100px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -50px;
}
Then, on your home page of your site, add the following code: Note, this is jQuery, so just add the jquery library to your site, either in the header or just above the closing body tag -
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
Now add this code right below where you added jQuery:
<script type="text/javascript">
$(window).load(function(){ //this is pageload
$('div.parent').show(500); //500 is the animation speed
})
</script>
NOTE: If
$('div.parent').show(500);
does not work, try:
$('div.parent').css('display','block');
I got this form...
<form method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>">
<fieldset>
<legend>Who are you?</legend>
<label for="first-name">First name</label><input type="text" name="first_name" required /><br />
<label for="last-name">Surname</label><input type="text" name="last_name" required /><br />
<label for="email">E-mail</label><input type="email" name="email" required /><br />
<input type="button" name="submit1" id="submit1" value="Next" />
<input type="button" name="clear" id="clear" value="Clear" />
</fieldset>
</form>
With this CSS…
form {
margin: 24px 0 0 0;
}
form legend {
font-size: 1.125em;
font-weight: bold;
}
form fieldset {
margin: 0 0 32px 0;
padding: 8px;
border: 1px solid #ccc;
}
form label {
float: left;
width: 125px;
}
form label, form input {
margin: 5px 0;
}
I'm looking for an easy way to make the input fields fluid so that the width of input elements is always relative to the width of the fieldset element. In other words, the width of the label (125px) and input element should always be 100% of the width of the fieldset element. Is there an easy way to do this (without adding divs)?
See: http://jsfiddle.net/thirtydot/pk3GP/
You can do this by adding a harmless little span around each input:
<span><input type="text" name="first_name" required /></span>
And this new CSS:
form input {
width: 100%;
}
form span {
display: block;
overflow: hidden;
padding: 0 5px 0 0;
}
You can also do it with display: table, which is usually a better approach: How can I put an input element on the same line as its label?
How to position a complex form with multiple fields in line across the screen?
Why are people so hell-bent on avoiding tables?
Tables are not deprecated and should be used when displaying content which logically belongs in a table.
If your form is logically grouped such that a table would be intuitive, please use a table.
Always be thinking: "What's the cleanest, simplest, most maintainable way to achieve this result."
If you want a fluid form with a variable number columns, then disregard this.
I prefer the slightly-more-semantic way, using a definition list:
<dl class="form">
<dt><label for="input1">One:</label></dt>
<dd><input type="text" name="input1" id="input1"></dd>
<dt><label for="input2">Two:</label></dt>
<dd><input type="text" name="input2" id="input2"></dd>
</dl>
Then your CSS:
dl.form {
width:100%;
float:left;
clear:both;
}
dl.form dt {
width:50%;
float:left;
clear:left;
text-align:right;
}
dl.form dd {
width:50%;
float:left;
clear:right;
text-align:left;
}
This should produce a form centered in the page, with the labels in the left column and the inputs in the right
There are many different ways to do this. It's all a matter of preference. What I typically do is have a wrapper div that contains all of the rows, and then a div block per row that contains the label, input, and validator. You can use the line-height CSS property to help you with vertical alignment. Example:
<div class="formWrapper">
<form>
<div class="formItem">
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="validator" style="display: none;">*</>
</div>
... <!-- Rinse repeat -->
</form>
</div>
<style type="text/css">
.formWrapper { width: 400px }
.formWrapper .formItem { line-height: 35px; height: 35px; }
.formWrapper label { width: 50px; }
.formWrapper input { width: 100px; border: 1px solid #000; }
.formWrapper .validator { padding-left: 10px; color: #FF0000; }
</style>
Hope that helps.
After looking at many many different solutions, I found the examples on this page (particularly the one from 'Fatal'?) some of the most helpful. But the extensive and tags did bother me a bit. So here is a little bit of a modification that some may like. Also, you find some sort of 'wrapper' or 'fieldset' style very necessary to keep the float from affecting other HTML. Refer to examples above.
<style>
.formcol{
float: left;
padding: 2px;
}
.formcol label {
font-weight: bold;
display:block;}
</style>
<div class="formcol">
<label for="org">organization</label>
<input type="text" id="org" size="24" name="org" />
</div>
<div class="formcol">
<label for="fax">fax</label>
<input type="text" id="fax" name="fax" size="2" />
</div>
<div class="formcol">
<label for="3">three</label>
<input type="text" id="3" name="3" />
<label for="4">four</label>
<input type="text" id="4" name="4" />
<label for="5">five</label>
<input type="text" id="5" name="5" />
</div>
<div class="formcol">
<label for="6">six</label>
<input type="text" id="6" name="6" />
</div>
That would be done using CSS by setting the "display" property to "inline" (since form elements are, by default, block level elements).
Do a search for "layouts without tables". Many sites describe formatting with CSS. Here is a simple intro: http://www.htmlgoodies.com/beyond/css/article.php/3642151
I suggest you blueprint CSS framework. Have a quick look at the demo page.
This is what I usually use when I need to design pretty complex forms.
HTML:
<fieldset> <legend>Consent group</legend> <form> <fieldset class="nolegend"> <p><label><span>Title</span> <input type="text" name="title" size="40" value="" /></label></p> <p><label><span>Short name</span> <input type="text" name="sname" size="20" value="" /></label></p> <p><label><br /><input type="checkbox" name="approval"> This consent group requires approval</label></p> </fieldset> <fieldset class="nolegend"> <p><label><span>Data use limitations</span> <textarea name="dul" cols="64" rows="4"></textarea></label></p> </fieldset> <input type="submit" value="Submit" /> </form></fieldset>
CSS:
body, input, textarea, select { font: 1em Arial, Helvetica, sans-serif;}input, textarea, select { font-size: .8em }fieldset,fieldset legend { background-color: #EEE;}fieldset { border: none; margin: 0; padding: 0 0 .5em .01em; top: 1.25em; position: relative; margin-bottom: 2em;}fieldset fieldset { margin: 0 0 1em 0;}fieldset legend { padding: .25em .5em 0 .5em; border-bottom: none; font-weight: bold; margin-top: -1.25em; position: relative; *left: -.5em; color: #666;}fieldset form,fieldset .fieldset { margin: 0; padding: 1em .5em 0 .5em; overflow: hidden;}fieldset.nolegend { position: static; margin-bottom: 1em; background-color: transparent; padding: 0; overflow: hidden;}fieldset.nolegend p,fieldset.nolegend div { float: left; margin: 0 1em 0 0;}fieldset.nolegend p:last-child,fieldset.nolegend div:last-child { margin-right: 0;}fieldset.nolegend label>span { display: block;}fieldset.nolegend label span { _display: block;}
I omitted couple lines of CSS with Safari hacks. You can check out live version of this code.
Pace KyleFarris but I just had to give Ben S a vote for having the guts to mention tables. Just look at the variety of CSS solutions on this page and around the internet for a ridiculously simple problem. CSS may one day become a good solution, but for the time being replicating the simple row and column grid that the table tag provides is extremely complex. I have spent countless fruitless hours with this prejudice against tables for things like a form. Why do we do this to ourselves?
input fields, by default, are inline. Therefore, you can simply use line them up without Another option if you want them lined up correctly is as follows:
<div id="col1" style="float: left;>
<input type="text" name="field1" />
<br />
<input type="text" name="field3" />
</div>
<div id="col2" style="float: left;>
<input type="text" name="field2" />
<br />
<input type="text" name="field4" />
</div>
I prefer to use fieldset to group all elements and p for each form field.
<html>
<head>
<style type="text/css">
fieldset {
width: 500px;
background-color: lightblue;
}
fieldset legend {
font-weight: bold;
}
fieldset p {
clear:both;
padding: 5px;
}
fieldset label {
text-align: left;
width: 100px;
float: left;
font-weight: bold;
}
fieldset .Validator {
color: red !important;
font-weight: bold;
}
</style>
<head>
<body>
<form>
<fieldset>
<legend>Data</legend>
<p>
<label for="firstName">First Name:</label>
<input name="firstName" id="firstName" class="required" type="text" />
<span class="Validator" style="display: none;">*</span>
</p>
<p>
<label for="lastName">Last Name:</label>
<input name="lastName" id="lastName" class="required" type="text" />
<span class="Validator">*</span>
</p>
</fieldset>
</form>
</body>
</html>