I am trying to get a better handle on CSS positioning by using only basic positioning properties. The goal is to get an HTML5 input and it's associated label to line up horizontally, one pair on each row, with the label on the left and input on the right. Essentially there will appear to be two columns, one for labels and the other for inputs.
I also want each column to be left-justified, which is where I'm currently stuck.
Using the CSS below I can get the two-column look I want, however none of the input elements are justified correctly.
If I set the position of the input elements to absolut, however (the thinking that adjusting the left property will align each element the same pixel length from the left containing edge), each element justifies properly, however all on the same row.
Any hints as to how to accomplish the two-column/left-justified layout w/o using tables or grid-column?
Fiddle: http://jsfiddle.net/fjwy3Lov/
CSS
/*Styles for basic form label and input elements*/
.basicForm{
margin: 10px 0 10px 10px;
}
.basicForm label{
float:left;
clear:left;
margin:inherit;
}
.basicForm input{
position:relative;
left:100px;
float:left;
margin: inherit;
}
HTML
<!DOCTYPE html>
<head>
<title>Form Validation Demo</title>
<link href="form.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>HTML 5 Input Types and Form Validation</h1>
<form class="basicForm">
<label for="UserName">User Name:</label>
<input type="text" id="UserName" required="required">
<label for="Password">Password:</label>
<input type="password" id="Password" required="required" />
<label for="UserEmail">Email:</label>
<input type="email" id="UserEmail">
<label for="PhoneNumber">Phone Number:</label>
<input type="tel" id="PhoneNumber">
<label for="Website">Homepage:</label>
<input type="url" id="Website">
<label for="Quantity">Quantity:</label>
<input type="number" id="Quantity" min="1" max="10" step="1" pattern="/\d/">
<label for="StartDate">Start Date:</label>
<input type="date" id="StartDate" min="2000-01-02" max="2016-01-01">
<label for="FavColor">Favorite Color:</label>
<input type="color" id="FavColor">
<label for="CurrentMonth">Current Month:</label>
<input type="month" id="CurrentMonth">
<label for="CurrentWeek">Current Week:</label>
<input type="week" id="CurrentWeek">
<label for="CurrentTime">Current Time:</label>
<input type="time" id="CurrentTime">
<input type="button" id="submit" value="submit">
</form>
</body>
</html>
This happens because as per your CSS all input elements are 150px to the left of the corresponding label but those are not the same width, so your inputs are not aligned.
You need to make all labels the same width:
.basicForm label{
float:left;
clear:left;
min-width:150px;
}
.basicForm input{
float:left;
}
Instead of min-width you could also use width, whichever you prefer.
If you insist on using absolute positioning, you could wrap each label/input pair in a div so you don't need to position each element individually, check this example:
.input-group {
position: relative;
height:2em;
}
.input-group label {
position: absolute;
top: 0;
left: 0;
}
.input-group input {
position: absolute;
top: 0;
left: 100px;
}
<div class="input-group">
<label>Label 1</label>
<input type="text">
</div>
<div class="input-group">
<label>longer Label</label>
<input type="text">
</div>
<div class="input-group">
<label>short</label>
<input type="text">
</div>
Related
I want to apply some css styling on my labels for my web page but have no idea how to make it work. At first, I thought I could type
label{text-align: center} but it's not giving my any styling at all. What should I type to style my labels? This is my code:
<label for="fname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" required>
Thanks in advance everyone!
Ok, text-align:center didn't work because basically the label elements are inline
inline elements are elements who their display is set to inline , explicitly or by default
these elements won't accept any width or height and only get ENOUGH width and height for their content
they even don't accept vertical margins...
so your label here is as small as it's content and there is no room to change your text's alignment...
you can change it's display to make it's text centered
Here You can see what I said, I've added another label and changed it's display and colored the labels so you can see diffrence
<style>
label{
background: khaki;
}
.lname{
display:block;
text-align:center;
}
.test{
display: block;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
<label class="lname" for="lname">Last Name</label>
<input type="text" placeholder="Enter Last Name" name="lname" id="lname" required>
<label class="test" for="test">Test</label>
<input type="text" placeholder="Enter Test" name="test" id="test" required>
I think what you want is the middle one
========%%%%=======%%%%=========
Ok Based On Your comment and image
it's not label who you want to center, it's your input
<style>
input{
display:block;
text-align:center;
width: 100%;
}
input::placeholder{
text-align: center;
}
</style>
<label class="fname" for="fname">First Name</label>
<input type="text" placeholder="Enter First Name" name="fname" id="fname" >
input {
width: 100%;
text-align: center;
}
I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don't work properly. The submit button and checkbox gets hidden.
<div class="form">
<div class="inputs">
<input type="text" autocomplete="off" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">username</span>
</label>
<input type="password" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">password</span>
</label>
<div class="hide">
<input type="checkbox" onclick="myFunction()">Show Password
</div>
<button>Login</button>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/
Any help is appreciated. Thanks
Absolute positioning require to use a relative positioning on a parent element.
.inputs > div {
position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
...
Edited Fiddle
edit 1 CSS rules for specified input type only
Change the following CSS property as this;
.form{
position: relative;
height: 50%;
width: 50%;
}
I have a simple form like this:
<form method="post" action="/registration">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
<br>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
<br>
<input type="button" value="registger">
</form>
It works fine, but the I have found out that <br> shouldn't be used for this purpose, as it is only intended to be used with text.
If I remove the <br>, then everything will be rendered on a single line, which I do not want.
What is the correct, most clean way to display name-input pairs in a form with CSS, like this:
Alias: [__field__]
E-mail: [__field__]
[SUBMIT BUTTON]
I'd use divs, which will put the labels and inputs into their own block.
<form method="post" action="/registration">
<div>
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div>
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
<input type="button" value="registger">
</form>
I typically would put the input inside of the label (so when you click the label, it focuses the input), and then tell the label to be display: block;.
So,
<form method="post" action="/registration">
<label for="alias">
Alias: <input type="text" name="alias" id="alias">
</label>
<label for="email">
E-mail: <input type="text" name="email" id="email">
</label>
<input type="button" value="registger">
</form>
Then do:
label[for], // just selects labels that have the "for" attribute.
input[type="button"] {
display: block;
// And a bottom margin for good measure :)
margin: 0 0 10px; // shorthand for margin-bottom
}
And that should get you what you want.
You could use divs with corresponding CSS:
.myFrm {
width: 250px;
}
input[type=text] {
float: right;
}
.form-group {
margin-bottom: 10px;
}
.form-group::after {
content: "";
clear: both;
display: table;
}
<form method="post" action="/registration">
<div class="myFrm">
<div class="form-group">
<label for="alias">Alias:</label>
<input type="text" name="alias" id="alias">
</div>
<div class="form-group">
<label for="email">E-mail:</label>
<input type="text" name="email" id="email">
</div>
</div>
<input type="button" value="registger">
</form>
I would just use a bit of css to do the trick. Give each of the labels a display:block;
label {
display: block;
}
You can use container divs around the label and input to group them or else make sure "display: block" is added to the label and input elements.
If you need the label to the left of the input then wrap both with a container div and to give you more control on the positioning you could float the label and input to the left or use flexbox.
You ask:
What is the correct, most clean way to display name-input pairs in a
form with CSS
I interpret your question to be related to matters of performance, code efficiency and maintainability. Since just changing the HTML structure does not address responsiveness in different view-ports, adding bits of CSS may have render blocking features but it does nevertheless makes your application ready for mobile responsiveness. This is how I see it:
form {
display: inline-block;
}
label {
margin: 10px;
font-weight: 600;
}
input{
position: absolute;
left: 15%;
}
input[type=button]{
top: 4%;
}
Note that for mobile viewports you may want to adjust the relative measures with media queries. So the question here is not about writing less code but the main requirements of the application.
Get a plunk for this here
What you have there is a list.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists
http://reisio.com/temp/form1.html
I have two HTML forms. I want the second one to align to the right of the first one (not below it).
I fiddled (no pun intended) with "display: inline-block;"
The pertinent CSS:
.form {
display: inline-block;
}
The pertinent HTML:
<form>
<label class="firstblocklabel">Traveler's name:</label>
<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />
</br>
. . .
</form>
<form>
<label>Trip Number:</label>
<input type="text" id="tripnumber" title="If Applicable" />
</br>
</form>
The whole shebang can be seen here.
Is the solution to place the two forms in a table, or is there a more elegant element solution?
Use float...
form {
float: left
}
Stick a float:right on the 2nd form to align it to the right side.
When you use inline-block a width must be defined as inline just say to browser that you don't want to jump to the next line.
a best practice is to have a container then for each element you want side-by-side you put a percent value corresponding to 100% divided by the number of columns. Example : 100% / 2 columns make columns of 50% each; 100% / 4 columns would make 25% each; etc.
make sure that you columns have padding/margin/border to 0 as it wouldn't work otherwise and if you need padding, place it in a child element inside the column element.
everythings is better with examples so here it is :
input{
width: 100%;
margin: 5px 0 0 -2px;
}
form{
/* we can add geometry to our form */
border: 4px solid #ddd;
margin: 6px;
padding: 10px;
}
.container{
padding: 0;
}
.col{
vertical-align: top;
display: inline-block;
padding: 0;
margin: 0;
border: none;
}
.col:hover{
/* just to see it */
box-shadow: 0 0 2px 0px red;
}
.col-half{
width: 50%;
}
.col-quater{
width: 25%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>example 1</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Some form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-half">
<form class="" action="index.html" method="post">
<h3>Another form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
<h1>example 2</h1>
<div class="container">
<div class="col col-half">
<form class="" action="index.html" method="post">
<h3>1/2 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div><div class="col col-quater">
<form class="" action="index.html" method="post">
<h3>Another 1/4 form...</h3>
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
<input type="text" name="name" value="">
</form>
</div>
</div>
</body>
</html>
Bonus:
Usually, frameworks works on a grid system : If we take bootstrap as an example, they work on a 12 col grid. meaning that if you use the class col-6 6 being half of 12 you get 50% width, and there goes for all other sizes. 12 is very flexible, the more cols your grid have, the more possibility it have (and the more css you must write) in my example, I made a gird of 4. we could rename col-half for col-2 and col-quater for col-1 so that makes sense as a grid system
First of all, you accidently used a .form class instead of using form for your selector.
Second, adding vertical-align: top to your form selector will allow it to align to the right of your first form as long as there is space.
form {
display: inline-block;
vertical-align:top;
}
However, if your view is too narrow it will slide underneath anyways.
You added a . (.form) means class selection but your html tag doesn't contain a class
So remove the . should make your form work correctly.
form {
vertical-align:top;
display:inline-block;
}
Try this :
form {
display: inline-block;
vertical-align:top; // Added
}
What about using Bootstrap and their helper classes to accomplish this? Especially if you already have Bootstrap loaded? Could use their grid to accomplish a 2 column layout.
I'm learning some css and want to make a two column form, without any table tags and such.
This is what i have got (code from CSS Cookbook 3ed edition).
JSfiddle HERE...
HTML code:
<div class="container">
<form id="regform" name="regform" method="post" action="/regform.php">
<div id="register">
<h4>Register</h4>
<label for="fmlogin">Login</label>
<input type="text" name="fmlogin" id="fmlogin" />
<label for="fmemail">Email Address</label>
<input type="text" name="fmemail" id="fmemail" />
<label for="fmemail2">Confirm Address</label>
<input type="text" name="fmemail2" id="fmemail2" />
<label for="fmpswd">Password</label>
<input type="password" name="fmpswd" id="fmpswd" />
<label for="fmpswd2">Confirm Password</label>
<input type="password" name="fmpswd2" id="fmpswd2" />
</div>
<div id="contactinfo">
<h4>Contact Information</h4>
<label for="fmfname">First Name</label>
<input type="text" name="fmfname" id="fmfname" />
<label for="fmlname">Last Name</label>
<input type="text" name="fmlname" id="fmlname" />
<label for="fmaddy1">Address 1</label>
<input type="text" name="fmaddy1" id="fmaddy1" />
<label for="fmaddy2">Address 2</label>
<input type="text" name="fmaddy2" id="fmaddy2" />
<label for="fmcity">City</label>
<input type="text" name="fmcity" id="fmcity" />
<label for="fmstate">State or Province</label>
<input type="text" name="fmstate" id="fmstate" />
<label for="fmzip">Zip</label>
<input type="text" name="fmzip" id="fmzip" size="5" />
<label for="fmcountry">Country</label>
<input type="text" name="fmcountry" id="fmcountry" />
<input type="submit" name="submit" value="send" class="submit" />
</div>
</form>
</div>
CSS code:
label {
margin-top: .33em;
display: block;
}
input {
display: block;
width: 250px;
}
#register {
float: left;
}
#contactinfo {
padding-left: 275px;
}
Because you float one div and not the other.
With a few simple CSS changes it'll work (as long as the h4 does not span multiple lines):
#register {
float: left;
width: 275px;
}
#contactinfo {
float: left;
}
See the updated fiddle.
Here's how I'd debug (except I'd use Firebug or another Inspect/devtools): http://jsfiddle.net/PhilippeVay/yuxTA/2/
As stated by #Arjan in his answer, this is due to floating and its effects.
Uncomment the last CSS declaration for a solution that won't modify layout. Also add margin-top to both columns or padding-top if you want a vertical margin back...
Another option is to remove the margins from the h4 (although, as said in other answers, floating [or similar] both columns makes more sense).
h4 {margin: 0;}
You have to float all the div in your containter
#register {
float: left;
}
#contactinfo {
float:left;
margin-left:30px; /*increase or decrease if you like*/
}