I am creating a form for a landing page, so I want to keep the text input field side by side so I don't make the form very long.I trying to do something like this :
But it seems really difficult right now, this is what my form current looks like:
.teaser-right {
float: right;
width: 45%;
margin: 3% 0 0 0
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
Add this to your CSS:
.form-section{
display:inline-block;
}
To put 2 input fields beside each other you can use of float. if you float the elements you need to make sure you use the clearfix hack on the parent div. Otherwise the parent div won't have a height.
Another option is to use display: inline-block If you use display inline-block you need to reset the font-size on the parent to 0. The elements that where you use display: inline-block need to get the font-size: 12px; for example. With display inline-block you can get a slight height difference.
Example:
float: left;
https://jsfiddle.net/ymma61hu/3/
Clearfix hack:
https://css-tricks.com/snippets/css/clear-fix/
Example 2:
display: inline-block;
https://jsfiddle.net/vh49gtzL/
Hi just put input elements inside same div see fiddle. https://jsfiddle.net/v5omym1a/
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
I cleaned up your markup a bit. You don't need to wrap your <h3> and <h4> in div-s - those are block level elements as well and can be perfectly styled.
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 800px;
position: right;
bottom: 0;
overflow: hidden;
}
.form-section {
float: left;
width: 50%;
}
label {
display: block;
margin-bottom: .25em;
}
<div id="calltoaction-form" class="teaser-form">
<h3 class="form-title">sample form</h3>
<form id="contact_form" action="_contact-us.php" method="post">
<h4 class="form-header">Personal details</h4>
<div class="form-section">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<label for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</form>
</div>
.form-section {
float: left;
margin: 1%;
width: 48.5%;
}
.form-section input {
width: 100%;
}
.form-section:first-child {
margin-left: 0;
}
.form-section:last-child {
margin-right: 0;
}
#calltoaction-form {
background: #f2f2f2;
padding-bottom: 10px;
width: 100%;
position: right;
bottom: 0
}
<div id="calltoaction-form" class="teaser-form">
<div class="form-title">
<h3>sample form</h3>
</div>
<form id="contact_form" action="_contact-us.php" method="post">
<div class="form-header">
<h4>Personal details</h4>
</div>
<div class="form-container">
<div class="form-section">
<input id="name" name="name" type="text" placeholder="Your name">
</div>
<div class="form-section">
<input id="email" name="email" type="text" placeholder="Your email">
</div>
</div>
Related
I am having a simple registration form, but one of the label fields sticks next to another label field.
Currently it looks like this:
Email should be under the Username, not next to it. Other form elements align nicely, but not these two.
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div>
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div>
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Why don't you just use flex, clean and less code.
.form-wrapper {
width: 400px;
border: 1px solid blue;
}
.username,
.useremail {
display: flex;
margin: 10px;
width: 350px;
justify-content: space-between;
font-weight: bold;
}
<div class="form-wrapper">
<div>
<div class="username">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="useremail">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
If you are going with float you have to know about using clear property for it's next elements. So a best way to handle is, to create a after pseudo-element on the parent and clear:both.
In the below code have added 'field' class for each container and styled it with :after.
.field::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
label {
float: left;
}
input {
float: right;
}
<div class="form-wrapper">
<div>
<div class="field">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="field">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
Labels and input fields are stacked from the left and the right, resp., due to the css float properties. Note that the label/input pairs render on individual lines when removing the css, though without proper vertical alignment.
The CSS display: table property and friends can be employed to rectify this. Basically they cause the renderer to apply table layouting to elements other than tableand descendants.
.d-t {
display: table;
}
.d-tr {
display: table-row;
}
.d-tr > label, .d-tr > input {
display: table-cell;
}
<div class="form-wrapper">
<div class="d-t">
<div class="d-tr">
<label for="user-name">Username:</label>
<input type="text" id="user-name" name="user-name" required>
</div>
<div class="d-tr">
<label for="user-email">Email:</label>
<input type="email" id="user-email" name="user-email" required>
</div>
</div>
</div>
I need to create a form using only HTML and CSS. The form fields are of different lengths depending on which field it is.
I've tried just about every solution I've found on SO and other sites that use things like display modes but those all seem to be aimed at forms where all the input fields are the same size. I've also tried to use a table to make the form but I don't know enough about them to make that work. I am still open to using a table if anyone is willing to teach me how to have it work.
form {
margin-top: 25px;
}
.form {
margin-left: 10px;
background-color: #fff;
float: left;
width: 620px;
}
.form p {
margin-left: 10px;
}
.form h3,
.summary h3 {
font-size: 36px;
background-color: #fff;
width: auto;
padding-top: 35px;
}
.form label {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
margin-left: 10px;
color: #8f8f8f;
}
input {
float: left;
margin-left: 10px;
background-color: #f9f9f9;
border: 1px solid #cdcdcd;
height: 36px;
border-radius: 2px;
}
.form span {
color: #861919;
}
.name {
width: 288px;
}
.bigbar {
width: 448px;
}
.smallbar {
width: 128px;
}
<form action="#" method="POST">
<label for="firstname">First Name <span>*</span></label>
<input type="text" id="firstname" required class="name" />
<label for="lastname">Last Name <span>*</span></label>
<input type="text" id="lastname" required class="name" />
<label for="address">Street Address <span>*</span></label>
<input type="text" id="address" required class="bigbar" />
<label for="apt">Apt/Unit/Suite #</label>
<input type="text" id="apt" class="smallbar" />
<label for="city">City <span>*</span></label>
<input type="text" id="city" required class="bigbar" />
<label for="province">Province <span>*</span></label>
<input type="text" id="province" required class="smallbar" />
<label for="code">Postal Code <span>*</span></label>
<input type="text" id="code" required class="smallbar" />
<label for="phone">Phone Number <span>*</span></label>
<input type="tel" id="phone" required class="bigbar" />
<button type="submit" id="submit">Continue Checkout</button>
</form>
At the end it's supposed to look like this: https://puu.sh/DQhyH/2aed3ce204.png
but as far as I'm able to get it with my knowledge it looks like this: https://puu.sh/DQhAs/eb0a1eeb5b.png (can't post images due to just making my account)
so it's almost there but the fields aren't aligned properly.
This could be done fairly easy with a table using colspan attribute on td elements. However, tables are intended for the display of data, and should be not used for layout (this article lists several reasons why).
You need to look at your desired result and form a grid with containing div elements. You have several "rows", so put the content of each row inside a div.row that takes the full width. Your content within the rows is either 1,2, or 3 "columns" wide out of 4 total. So you make div.col1, div.col2, div.col3 with appropriate widths and inline-block display. Then just make sure you put four columns in each row. The containing divs now determine the widths so we set inputs and labels to width:100% to take the full width of their respective parents.
div.field {
display: inline-block;
padding: .5em;
}
div.row,
input,
label,
button {
width: 100%;
}
form {
margin-top: 25px;
width: 620px;
}
form label {
font-family: Arial, sans-serif;
font-size: 14px;
display: block;
margin-left: 10px;
color: #8f8f8f;
}
input {
/*float: left;*/
margin-left: 10px;
background-color: #f9f9f9;
border: 1px solid #cdcdcd;
height: 36px;
border-radius: 2px;
}
form span {
color: #861919;
}
.col2 {
width: 288px;
}
.col3 {
width: 448px;
}
.col1 {
width: 128px;
}
<form action="#" method="POST">
<div class="row">
<div class="col2 field">
<label for="firstname">First Name <span>*</span></label>
<input type="text" id="firstname" required/>
</div>
<div class="col2 field">
<label for="lastname">Last Name <span>*</span></label>
<input type="text" id="lastname" required/>
</div>
</div>
<div class="row">
<div class="col3 field">
<label for="address">Street Address <span>*</span></label>
<input type="text" id="address" required class="bigbar" />
</div>
<div class="col1 field">
<label for="apt">Apt/Unit/Suite #</label>
<input type="text" id="apt" />
</div>
</div>
<div class="row">
<div class="col3 field">
<label for="city">City <span>*</span></label>
<input type="text" id="city" required/>
</div>
<div class="col1 field">
<label for="province">Province <span>*</span></label>
<input type="text" id="province" required/>
</div>
</div>
<div class="row">
<div class="col1 field">
<label for="code">Postal Code <span>*</span></label>
<input type="text" id="code" required/>
</div>
<div class="col3 field">
<label for="phone">Phone Number <span>*</span></label>
<input type="tel" id="phone" required/>
</div>
</div>
<div class="row">
<div class="col1 field"></div>
<div class="col2 field">
<button type="submit" id="submit">Continue Checkout</button>
</div>
<div class="col1 field"></div>
</div>
</form>
this is a very beginner question, but I have been trying to figure out a way to have the Name, Email, and Age aligned to the left of the input fields. And then have it centered on the input boxes.
Here is a link to my codepen.io
I have tried floating the text to the left and making the inputs display as blocks. The input seems to be stuck having an extremely wide width which is making the text not display properly. If I manage to shrink the width of the box, and want to adjust the padding it makes the input box bigger! Instead of moving the the text and input left or right.
#text-label {
width: 50%;
}
#text-input {
width: 40%;
display: block;
margin: auto;
}
#email-input {
width: 80%;
display: block;
margin: auto;
}
#number-input {
width: 80%;
display: block;
margin: auto;
}
<div id="name-email-age">
<div id="name" class="center">
<label id="text-label">
* Name:
</label>
<input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
<div id="email" class="center">
<label id="email-label">
* Email:
</label>
<input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
</div>
<div id="age" class="center">
<label id="age-label">
* Age:
</label>
<input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" required max="122" min="5" />
</div>
</div>
Change the input display styles to inline-block.
https://codepen.io/AustinGordon/pen/yEodLo
Maybe your can try this:
Wrap labels and controls in .control-group for optimum spacing
and change box to ideal size =).
#text-label {
width: 50%;
}
#text-input {
width: 50%;
display: block;
}
#email-input {
width: 100%;
display: block;
}
#number-input {
width: 100%;
display: block;
}
.control-group {
width: 80%;
margin: auto;
text-align: left;
}
<div id="name-email-age">
<div id="name" class="center">
<div class="control-group">
<label id="text-label">* Name:</label>
<input id="text-input" type="text" name="Enter your name" placeholder="Enter your name" required />
</div>
</div>
<div id="email" class="center">
<div class="control-group">
<label id="email-label">* Email:</label>
<input id="email-input" type="email" name="Enter your email" placeholder="Enter your Email" required />
</div>
</div>
<div id="age" class="center">
<div class="control-group">
<label id="age-label">* Age:</label>
<input id="number-input" type="number" name="Enter your age" placeholder="Enter your Age" max="122" min="5" required />
</div>
</div>
</div>
I am trying to create a message input box in a bootstrap form, however the box has to be of sufficient height so the user could read his message, the place holder of "message" would stay in the middle, also when I write the text it keeps going horizontally without considering margins, I am a newbie programmer so please don't be too harsh.
.theform {
margin-left: 200px;
margin-right: 200px;
margin-top: 50px;
border: 5px solid;
padding: 20px 20px 20px 20px;
}
.theform h1 {
font-size: 50px;
text-decoration: underline;
}
#formGroupExampleInput {
height: 50px;
}
.form-control {
font-size: 30px;
}
#messagebox {
height: 200px;
margin-right: 40px;
line-height: 0px;
}
#message {
height: 200px;
margin-right: 40px;
line-height: -20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="theform" id="link3">
<h1 class="text-center">Contact</h1>
<form>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50">
</div>
</div>
</fieldset>
<fieldset class="form-group">
<label for="formGroupExampleInput">Example label</label>
<div class="row">
<div class="col-md-6">
<input type="text" class="form-control" id="messagebox" placeholder="Message" size="50">
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
You have to use a textarea instead of an input. If you want to center the placeholder vertically, you also have to use some JS, just to adjust the textare.
Just look into this codepen for an example implementation of a vertical centered textarea:
https://codepen.io/desandro/pen/gICqd
NO JS REQUIRED
you can fix this issue by puting the text area :
<textarea name="" id="" cols="30" rows="10"></textarea>
by default in text area the placeholder is sent to the top left.
Don't make the mistake of puting input instead because when you will give it a huge height the placeholder will be sent to the middle left !!!
I have 2 divs that I want to position close together, however they keep moving eachother. They are both under the main div.
HTML:
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
The CSS is as follows:
Main body which both divs comes under:
#main {
padding-top: 50px;
}
Form div:
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
margin-top: 150px;
}
Error div:
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
I know that perhaps it has something to do with the position attribute..
Here is an image of what it looks like now, as you can see, I want both of the center objects to be close together without pushing each other away from the vertical center.
remove the margin-top from the #signin div - as this is what is putting pixels between the #notif div and the #signin div.
#main {
padding-top: 50px;
}
#signin {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
margin: auto;
}
#notif {
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
height: 20px;
margin: auto;
margin-top: 140px;
}
<div id="header">
<div id="title">Social</div>
</div>
<div id="main">
<div id='notif'><strong>Incorrect details.</strong>
</div>
<div id="signin">
<form name="signinform" action="authenticate.php" method="post" onsubmit="return validate(this)" id="signinform">
<p>
<input placeholder="Username / Email" class="input" type="text" name="user" id="user" maxlength="50">
</p>
<p>
<input placeholder="Password" class="input" type="password" name="password" id="password" maxlength="50">
</p>
<p>
<input type="checkbox" name="remember" id="remember" value="checked">
<label for="remember">Remember me</label>
</p>
<p>
<input class="button" type="submit" value="Sign in">
</p>
</form>
</div>
</div>
Debugging
In this sort of situation, your page inspector is going to be your best friend.
In chrome, for example, when the page inspector is open, hovering an element will show you the margins of the element, as well as any padding being given to it.