I know this has been answered but none of the solution seem to work for me. I am trying to get a label and 2 small form fields into one line. With around 90px space between the label tag and field. Something like the image below.
I am having a problem getting the label "Monday", onto the same like as the 2 field forms, and when i do manage to accomplish this, 1 out of the 2 form fields falls onto the following line. Having the worse luck with something that is probably simple.
currently it looks something like:
Please help!
div.form-group{
width:100%;
float:left;
width: 100%;
margin-left: 450px;
margin-top: -340px;
z-index:-2;
}
div.form-group > label,[type=text]{
float:left;
}
div.form-group > label{
width:100px;
text-align: left;
padding-left: -10px;
margin-right: 40px;
z-index:9;
}
div.form-group[type=text]{
margin-left: 50px;
z-index: 1
}
<div class="form-group">
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" placeholder="--:--" required tabindex="8">
<input type="text" name="Monds" id="Monday" class="open_hours" placeholder="--:--" required tabindex="9">
<div>
Is this what you were looking for?
HTML:
<div id='firstColumn'>
<label for='frName'>Franchise Name</label>
<input type="text" name="frName" id="frName" placeholder="Enter franchise name" required tabindex="1"/>
<br />
<label for='name'>Your Name</label>
<input type="text" name="name" id="name" placeholder="Joe Blogs" required tabindex="2"/>
<br />
<label for='address'>Address</label>
<input type="text" name="addressNo" id="addressNo" placeholder="No" required tabindex="3"/>
<input type="text" name="addressStreet" id="addressStreet" placeholder="Street" required tabindex="4"/>
<input type="text" name="addressTown" id="addressTown" placeholder="Town / City" required tabindex="5"/>
<input type="text" name="addressZIP" id="addressZIP" placeholder="ZIP Code" required tabindex="6"/>
<br />
<label for='phone'>Phone Number</label>
<input type="text" name="phone" id="phone" placeholder="Enter your phone number" required tabindex="7"/>
<br />
<input type='submit' />
</div>
<div id='secondColumn'>
<p>Opening Hours</p>
<div>
<label for="Monds"> Monday </label>
<input type="text" name="Monds" id="Mon" class="open_hours" value='00:00' required tabindex="8">
<span>-</span>
<input type="text" name="Monds" id="Monday" class="open_hours" value='00:00' required tabindex="9">
<hr />
</div>
<div>
<label for="Tues"> Tuesday </label>
<input type="text" name="Tues" id="Tue" class="open_hours" value='00:00' required tabindex="10">
<span>-</span>
<input type="text" name="Tues" id="Tuesday" class="open_hours" value='00:00' required tabindex="11">
<hr />
</div>
<div>
<label for="Weds"> Wednesday </label>
<input type="text" name="Weds" id="Wed" class="open_hours" value='00:00' required tabindex="12">
<span>-</span>
<input type="text" name="Weds" id="Wednesday" class="open_hours" value='00:00' required tabindex="13">
<hr />
</div>
<div>
<label for="Thus"> Thursday </label>
<input type="text" name="Thus" id="Thu" class="open_hours" value='00:00' required tabindex="14">
<span>-</span>
<input type="text" name="Thus" id="Thursday" class="open_hours" value='00:00' required tabindex="15">
<hr />
</div>
<div>
<label for="Fris"> Friday </label>
<input type="text" name="Fris" id="Fri" class="open_hours" value='00:00' required tabindex="16">
<span>-</span>
<input type="text" name="Fris" id="Friday" class="open_hours" value='00:00' required tabindex="17">
<hr />
</div>
<div>
<label for="Sats"> Saturday </label>
<input type="text" name="Sats" id="Sat" class="open_hours" value='00:00' required tabindex="18">
<span>-</span>
<input type="text" name="Sats" id="Saturday" class="open_hours" value='00:00' required tabindex="19">
<hr />
</div>
<div>
<label for="Suns"> Sunday </label>
<input type="text" name="Suns" id="Sun" class="open_hours" value='00:00' required tabindex="20">
<span>-</span>
<input type="text" name="Suns" id="Sunday" class="open_hours" value='00:00' required tabindex="21">
<hr />
</div>
</div>
CSS:
#firstColumn label,
#secondColumn p {
color: red;
}
#firstColumn {
width: 50%;
float:left;
}
#firstColumn label, #firstColumn input {
width: 90%;
display:block;
}
#addressNo + input,
#addressNo + input + input,
#addressNo + input + input + input {
margin-top: 5px;
}
#secondColumn {
float:left;
width: 50%;
}
#secondColumn div {
display:block;
width: 50%;
}
#secondColumn label {
width: 90px;
margin-top: 15px;
}
#secondColumn label:first-of-type {
margin-top: 0px;
}
#secondColumn input {
width : 15%;
text-align: center;
float: right;
}
#secondColumn span {
float: right;
}
Related
Suppose I have a form:
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
With the following CSS:
form {
width: 400px;
}
p {
display: flex;
}
label {
margin-right: 10px;
}
input {
flex-grow: 1;
}
It looks the following way:
I need to align the right side of inputs, based on the widest label. That's what I want:
I don't know label's width beforehand, so bootstrap-like solutions with columns are not good here. Is there pure HTML/CSS way to achieve it, without using JS?
PS!!: And I don't want to use table
Remove the p and use CSS grid:
form {
width: 400px;
display:grid;
grid-template-columns:auto 1fr;
grid-gap:5px;
margin:10px;
}
input {
width:100%;
}
<form action="#">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</form>
<form action="#" style="width:600px;">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</form>
Or use display:contents with the p
form {
width: 400px;
display:grid;
grid-template-columns:auto 1fr;
grid-gap:5px;
margin:10px;
}
input {
width:100%;
}
p {
display:contents;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
<form action="#" style="width:600px;">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
You should put the flex-grow on the label :) :
form {
width: 400px;
}
p {
display: flex;
}
label {
flex: 1;
margin-right: 10px;
white-space: nowrap;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
You could simply organise it into a table. This will give you the formatting that you want.
Edit: Since you have specified that you don't want to use a table (and it would be better to avoid having to reorganise your html), how about styling your elements as if they were a table? I've changed my answer to keep your original html intact.
form {
display:table;
}
p {
display:table-row;
}
label, input {
display: table-cell;
}
<form action="#">
<p>
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</p>
<p>
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</p>
<p>
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</p>
</form>
The best way to do so is, creating a table with two columns.
<table>
<tr>
<td>label</td>
<td>input</td>
</tr>
<tr>
<td>label</td>
<td>input</td>
</tr>
</table>
Here is the working example:
form {
width: 400px;
}
.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-group label {
margin-right: 10px;
flex: 1;
}
.form-group input {
min-width: 180px;
}
<form action="#">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" placeholder="John Smith" />
</div>
<div class="form-group">
<label for="name">What do you think about him?:</label>
<input type="text" placeholder="Your opinion" />
</div>
<div class="form-group">
<label for="name">Another Text Input:</label>
<input type="text" placeholder="John Smith" />
</div>
</form>
<h4>Full name</h4>
<input type="text" name="fname" id="fn" />
<input type="text" name="lname" id="ln" /><br />
<label for="fname">First Name</label>
<label for="lname">Last Name</label>
In the above code the label for first name and last name appears side by side, how to place the label for last name just below the input field of last name, without using pre tag
You can achieve this using simple Flexbox which is kind of professional work and if you did not know much about Flexbox. Here is a simple tutorial on CSS Flexbox
.maindiv{
display:flex;
flex-direction:row;
align-items:center
}
.inputdiv{
display:flex;
flex-direction:column;
}
<h4>Full name</h4>
<div class="maindiv">
<div class='inputdiv'>
<input type = "text" name="fname" id = "fn" />
<label for="fname">First Name</label>
</div>
<div class='inputdiv'>
<input type = "text" name="lname" id = "ln" />
<label for="lname">Last Name</label>
</div>
</div>
Using flexbox can clean make it easier to do layouts.
.groupings {
display: flex;
}
.groupings label,
.groupings label {
display: block;
}
<fieldset>
<legend>Full name</legend>
<div class="groupings">
<div>
<input type="text" name="fname" id="fn" />
<label for="fname">First Name</label>
</div>
<div>
<input type="text" name="lname" id="ln" />
<label for="lname">Last Name</label>
</div>
</div>
</fieldset>
input {
display: inline-block;
width: 6em;
position: relative;
top: -3em;
}
label {
display: inline-block;
width: 6em;
margin-right: .5em;
padding-top: 1.5em;
}
<label>First Name <input type="text" name="fname" id="fn" /></label>
<label>Last Name <input type="text" name="lname" id="ln" /></label>
I'm horrible with CSS and was wondering how I could center text over input fields.
This is what I have:
.fieldset{
border: 1px solid rgb(255,232,57);
width: 400px;
margin:0px auto;
text-align:center;
}
what I get:
html:
<div class="fieldset" id="Display">
<form id="addNew" action="/RxCard/AddAccount" enctype="multipart/form-data" method="post" novalidate="novalidate"><input name="__RequestVerificationToken" type="hidden" value="gz4TQWfHkdBy6ClvES3plFN_RK4J8F3neJdgvSzTf3_eJX_pnvPvbN71UR8jrBlysSPWi3jHmx05s7svwr82TF1hmGwSDb5EgsODmmE6H6k1"> <fieldset>
<div class="form">
<label id="lblAccountName">Account Name</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.AccountName"></span>
<input name="Pharmacy.AccountName" id="Pharmacy_AccountName" type="text" value="" data-val-required="The account name is required." data-val="true">
<label id="lblAddress" style="margin: 5px;">Address</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.Address"></span>
<input name="Pharmacy.Address" id="Pharmacy_Address" type="text" value="" data-val-required="The address is required." data-val="true">
<label id="lblCity" style="margin: 5px;">City</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.City"></span>
<input name="Pharmacy.City" id="Pharmacy_City" type="text" value="" data-val-required="The city is required." data-val="true">
<label id="lblState" style="margin: 5px;">State</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.State"></span>
<input name="Pharmacy.State" id="Pharmacy_State" type="text" value="" data-val-required="The state is required." data-val="true">
<label id="lblZip" style="margin: 5px;">Zip</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.ZipCode"></span>
<input name="Pharmacy.ZipCode" id="Pharmacy_ZipCode" type="text" value="" data-val-required="The zip code is required." data-val="true" data-val-regex-pattern="^[-,0-9]+$" data-val-regex="Zip code can only contain numeric values.">
<label id="lblPhoneNumber" style="margin: 5px;">Phone Number (optional)</label>
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="Pharmacy.PhoneNumber"></span>
<input name="txtArea" class="valid" id="txtArea" aria-invalid="false" aria-describedby="txtArea-error" style="width: 5em; float: left;" onkeyup="tabout(this,'txtPrefix');" type="text" maxlength="3" value="">
<input name="txtPrefix" class="valid" id="txtPrefix" aria-invalid="false" aria-describedby="txtPrefix-error" style="width: 5em; float: left;" onkeyup="tabout(this,'txtSuffix');" type="text" maxlength="3" value="">
<input name="txtSuffix" class="valid" id="txtSuffix" aria-invalid="false" aria-describedby="txtSuffix-error" style="width: 5em; float: left;" type="text" maxlength="4" value="">
</div>
</fieldset>
<input type="submit" value="Save">
<input type="submit" value="Cancel">
</form> </div>
update:
I think I might have solved it by replacing "block" with a new class called "form" with properties "width:200px;" and "margin:0 auto;"? but I'd still like to get an opinion from the experts.
I'm a huge advocate of flexbox, but this is just me :)
form {
display: flex;
flex-direction: column;
align-items: center;
}
input {
width: 200px; /* SET THIS TO WHATEVER WIDTH */
}
input[type="submit"] {
margin-top: 25px;
}
/* BASIC STYLING */
<form action="#" method="post">
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
<input type="submit" value="Submit" />
</form>
try this
input {
width: 100%;
}
UPD_
You wanted so much? It's simple:
label {
display: block;
}
input[type=text] {
margin:0px auto;
/* OR */
/* width: 100%; */
}
see here - https://jsfiddle.net/7znty0vb/2/
I am wanting to make a label on a form that is much longer than the other labels in the form appear on multiple lines. I then want to align the inputs to the labels on the colons of the labels.
Here is a picture of the current set up:
Basically, I need Releasse Date to appear as
Release Date
(YYYY-MM-DD): [input box]
HTML Code:
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date (YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
CSS Code:
#songform {
margin: 20px;
}
label {
float: left;
width: 250px;
margin-top: 20px;
clear: right;
}
input{
margin-top: 20px;
}
#songsubmit {
margin-left: 80px;
}
Use display:inline-block and vertical-align:bottom. No floats or absolute positioning needed.
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
label {
display:inline-block;
width: 250px;
vertical-align:bottom;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
I've made a fiddle with code for your case: http://jsfiddle.net/862xc2j1/
You can solve it with adding clear:left to each div wrapper for each form field block.
<div class="form-item">
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
.form-item {
clear: left;
}
To get this alignment next to the colon, you can use absolute positioning. Here is a working example - I made a few more changes to get it to work:
#songform {
margin: 20px;
}
#songform > div {
position: relative;
margin-top: 20px;
}
#songform > div:after {
/* Clearfix */
content:"";
display:table;
clear:both;
}
#songform > div > input {
position: absolute;
bottom: 0;
}
label {
float: left;
width: 250px;
clear: right;
}
#songsubmit {
margin-left: 80px;
}
<form action="http://localhost/songadded.php" method="post" id="songform">
<h4>Add a New Song</h4>
<div>
<label for="name">Name:</label>
<input type="text" name="name" size="30" value=""/>
</div>
<div>
<label for="artist">Artist:</label>
<input type="text" name="artist" size="30" value=""/>
</div>
<div>
<label for="album">Album:</label>
<input type="text" name="album" size="30" value=""/>
</div>
<div>
<label for="genre">Genre:</label>
<input type="text" name="genre" size="30" value=""/>
</div>
<div>
<label for="release_date" id="rdlabel">Release Date<br>(YYYY-MM-DD):</label>
<input type="text" name="release_date" size="30" value="" id="rdinput"/>
</div>
<div>
<label for="bpm">BPM:</label>
<input type="text" name="bpm" maxlength="3" value=""/>
</div>
<div id="songsubmit">
<input type="submit" name="submit" value="Add Song"/>
</div>
</form>
I have a simple form with two columns and a field that consists of three inputs (see attached image)
The two columns are floated right.
I need to add a dash between the fields in "Adószám". I tried it with :before pseudo class but it didn't display anything. If I just add it to the HTML markup, the fields are wrapped to the next line.
Here is my HTML:
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" />
<input type="text" id="taxno2" name="taxno2" />
<input type="text" id="taxno3" name="taxno3" />
</label>
And my CSS:
#column1 {
margin-right: 50px;
display: inline-block;
width: 270px;
float: left;
}
#column2 {
display: inline-block;
width: 270px;
float: left;
}
label {
font-weight: bold;
/*display: inline-block;*/
}
input {
width: 255px;
/*display: inline-block;*/
height: 28px;
border: 1px solid #c3c6d1;
background-color: #eaecf2;
margin: 5px 0 5px 0;
font-size: 15px;
padding: 5px;
}
#taxno1 {
width: 82px;
}
#taxno2, #taxno3 {
width: 46px;
margin-left: 23px;
}
please review this code
<div id="column1">
<label for="name">Név:<br /><input type="text" id="name" name="name" /></label>
<label for="pass">Jelszó:<br /><input type="text" id="pass" name="pass" /></label>
<input type="checkbox" id="accept" name="accept" value="1" /> Elfogadom a feltételeket
</div>
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<input type="text" id="taxno1" name="taxno1" /> -
<input type="text" id="taxno2" name="taxno2" /> -
<input type="text" id="taxno3" name="taxno3" />
</label>
#taxno2, #taxno3 {
width: 46px;
margin-left: 10px;
}
Demo here http://jsfiddle.net/z9b5S/
you have to wrap the input inside a span and then giving a class to span element it will work.
<div id="column2">
<label for="email">E-mail cím:<br /><input type="text" id="email" name="email" /></label>
<label for="taxno1">Adószám:<br />
<span class="add"><input type="text" id="taxno1" name="taxno1" /></span>
<span class="add"><input type="text" id="taxno2" name="taxno2" /></span>
<span class="add"><input type="text" id="taxno3" name="taxno3" /></span>
</label>
</div>
And add this class in your CSS file.
.add:after
{
content: "/";
}
.add:last-child:after{
content: " ";
}
A working Demo link is here.. http://jsbin.com/qeduhogi/3/