I am struggling to align the input on this form. I've tried many things but none of them worked.
If anyone can help me fix this that will be great. Please find attached the code and the form
enter image description here
enter image description here
[
<form action="" method="post" enctype="text/plain">
<label>First Name</label>
<input type="text" name="Your Name" value=""><br/>
<labe>Last Name</label>
<input type="text" name="Last Name" value=""><br/>
<label>Contact Number</label>
<input type="value" name="Contact Number" value=""><br/>
<label>Email address</label>
<input type="email" name="Email" value=""><br/>
<label>Date of the application</label>
<input type="date" name="Date"><br>
<label> Add your message</label><br>
<textarea name="Message" rows="10" cols="30"></textarea><br>
<label>Have you read the terms and condition of the website?</label>
<input type="checkbox" name="box"><br>
<label>Submit application</label>
<input type="submit" name="">
</form>
]3
How to align input forms in HTML
This question has been already answered before. If you could elaborate a little bit of what you have tried and what failed then it might be helpful.
Your question is not understand clearly, but it seems you want to align label and input for all the places with equal space between the two items right?
I modified your code and I created the new code, look at this you will get some idea. This will give equal space between the label and input.
HTML code:
<div class="form-label">
<label>Name</label>
<input type="text" name="">
</div>
CSS code:
label {
color: #000;
width: 50%;
float: left;
}
.form-label {
width: 100%;
display: inline-block;
}
input {
width: 50%;
}
Related
I need to separate a form into 2 pieces. 3 fields on one site and the other field and submit button on the other. I gave them all one class called "contactform" exept for the button. I'm working with drupal, that means that i can ONLY work with the CSS. So i cant add any other HTML tag a class other then the inputfields.
What i have
What i'm trying to achieve
The only code i can provide is the HTML code inside "Inspect element", which i cant post here so i'll post in in a comment below
I hope you guys can help me out with this and thank you in advance!
This is what i can give you. Its a whole mess of code but there's nothing more i can do:
<form class="webform-client-form webform-client-form-14" action="/drupal/contact-0" method="post" id="webform-client-form-14" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield webform-component--naam form-group form-item form-item-submitted-naam form-type-textfield form-group"><input required="required" placeholder="Uw naam" class="contactform form-control form-text required" type="text" id="edit-submitted-naam" name="submitted[naam]" value="" size="50" maxlength="40" /> <label class="control-label element-invisible" for="edit-submitted-naam">Naam <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-email webform-component--email form-group form-item form-item-submitted-email form-type-webform-email form-group"><input required="required" class="email contactform form-control form-text form-email required" placeholder="Uw emailadres" type="email" id="edit-submitted-email" name="submitted[email]" size="50" /> <label class="control-label element-invisible" for="edit-submitted-email">Email <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textfield webform-component--onderwerp form-group form-item form-item-submitted-onderwerp form-type-textfield form-group"><input required="required" placeholder="Uw onderwerp" class="contactform form-control form-text required" type="text" id="edit-submitted-onderwerp" name="submitted[onderwerp]" value="" size="50" maxlength="255" /> <label class="control-label element-invisible" for="edit-submitted-onderwerp">Onderwerp <span class="form-required" title="This field is required.">*</span></label>
</div><div class="form-item webform-component webform-component-textarea webform-component--bericht form-group form-item form-item-submitted-bericht form-type-textarea form-group"><div class="form-textarea-wrapper"><textarea required="required" placeholder="Uw bericht" class="contactform2 form-control form-textarea required" id="edit-submitted-bericht" name="submitted[bericht]" cols="50" rows="5"></textarea></div> <label class="control-label element-invisible" for="edit-submitted-bericht">Bericht <span class="form-required" title="This field is required.">*</span></label>
</div><input type="hidden" name="details[sid]" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-4vEZg04Y8Zevfr2GC6ONWVw8UI_4vxf3AL8NRrCFWtg" />
<input type="hidden" name="form_token" value="gNUgTXDR4TC0WhrHOwB7IaYOMOR6Nxz01qjuvrsVPPQ" />
<input type="hidden" name="form_id" value="webform_client_form_14" />
<div class="form-actions"><button class="webform-submit button-primary btn btn-primary form-submit" type="submit" name="op" value="Submit">Submit</button>
</div></div></form>
</section>
The CSS
.webform-client-form-14 {
float: left;
width: 45%;
margin-top: 20px;
margin-bottom: 30px;
}
.contactform {
border-radius: 0;
border: none;
}
The issue is that you set the whole form to 45% width, but we only want elements within it to be 45% width. Without being able to add wrappers to the html, you will need to target each input group one-by-one with either the :nth-child(n) css selector or the field group's custom class, eg: .webform-component--bericht.
Example:
.webform-client-form-14 .form-item:nth-child(1) {
width:45%;
display:block;
float:left;
}
try giving the text area display: block;
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 trying to create a form to use for my work, I guess my question is more of a why does this happen.
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
my css class of "checkbox" looks like this
.checkbox {
float: left;
display: inline;
}
now my code at the next element
<div>First name:<br>
<input type="text" name="firstname"><br>
</div><br><br><br>
I have to add 3 <br>'s to get the "First name:" to be on a new line. I started with only 2 radio buttons and then I only needed 2 <br>'s. Is there a way to format my css to not need any <br>'s?
I think I need the <br>'s (correct me if I'm wrong) due to the fact that html file is reading the radio buttons as new lines and displaying them on one line, therefore the <br>'s fix that issue, but I don't like using them nor do I think it is semantically correct.
Let's start with a nicely marked up form
The form elements
The radio buttons can be wrapped in a <fieldset> element
The labels can all be marked up with <label> elements. The for attribute links to its input via the matching id attribute. One benefit of this is that users can click/touch on the label.
That gives us this:
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Bring each text input onto a new line
The default display value for inputs is display: inline which brings them all onto one line. Use display: block on text inputs to knock them down:
input[type=text] {
display: block;
}
We want the radio buttons to remain on the one line, so they can be left at their default display: inline. More information on display.
Full example
Bring it all together with a little bit more CSS:
input[type=text] {
display: block;
margin: 5px 0;
}
input[type=radio] + label {
margin-right: 10px;
}
label,
input[type=radio] {
cursor: pointer;
}
fieldset {
border: none;
}
form {
background: #FFF9C4;
width: 500px;
font-family: sans-serif;
}
<form>
<fieldset class="checkbox">
<input type="radio" name="transport_method" id="delivery">
<label for="delivery">Delivery</label>
<input type="radio" name="transport_method" id="pick-up">
<label for="pick-up">Store Pick-Up</label>
<input type="radio" name="transport_method" id="day-trip">
<label for="day-trip">Day Trip</label>
</fieldset>
<fieldset class="names">
<label for="firstname">First name:</label>
<input type="text" name="firstname" id="firstname">
<label for="lastname">Last name:</label>
<input type="text" name="lastname" id="lastname">
</fieldset>
</form>
Try like this: Demo
<div class="checkbox">
<input type="radio" name="transport_method">Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method">Day Trip</div>
<div class="clear"></div>
<div>First name:
<input type="text" name="firstname">
</div>
.clear{clear:both} instead of <br/>
EDIT: If you dont want to create new class you can use like this too :
Updated dmo
.checkbox::after {
display:block;
clear:both;
content:"";
}
<div class="checkbox">
<input type="radio" name="transport_method" >Delivery
<input type="radio" name="transport_method">Store Pick-Up
<input type="radio" name="transport_method" >Day Trip
</div>
<div class="clear"></div>
<div>
First name:
<br>
<input type="text" name="firstname"><br>
</div>
<div class="clear"></div>
in css
.clear{
clear:both
}
It's as simple as this:
.checkbox{display:block}
And if you mean to have those checbox inputs floated to left, then use
.checkbox input{display:inline-block}
And there you go, no floats, no br tags, nothing weird
Using the new class amit made
use .clear{clear:both} instead of
on the following element, in my case
<div >First name:<br>
<input type="text" name="firstname"><br>
</div>
turned into
<div class="clear">First name:<br>
<input type="text" name="firstname"><br>
</div>
can anyone help me?
I need to place a div after a textbox in a html form.
ie.label,textbox,and new div is in same line
please see my html code .i didn't add div code yet.
please can any one help me to add a div in same line without any modification to this codes.
because i made several css codes for aligning this labels and text boxes
<form action="operates/signup.php" method="post" name="signupform" id="signupform">
<label id="fnamelabel" for="fnam">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" />
<p>
<label id="lnamelabel" for="lnam">Last Name :</label>
<input type="text" name="lnam" id="lnam" tabindex="2" />
</p>
<p>
<label id="yemail" for="email">Your Email :</label>
<input type="text" name="email" id="email" tabindex="3" />
</p>
<p>
<label id="reemail" for="remail">Re-enter Email :</label>
<input type="text" name="remail" id="remail" tabindex="4" />
</p>
<p>
<label id="npass" for="password">New Password :</label>
<input type="text" name="password" id="password" tabindex="5" />
</p>
<p>
<label id="mskill" for="bskill">Main Skill :</label>
<select name="bskill" id="bskill" tabindex="6">
</select>
</p>
<p>
<input type="checkbox" name="termsanc" id="termsanc" tabindex="6" />
<label id="terms" for="termsanc">I agreed the Terms and Conditions</label>
</p>
<div id="signupbutton" onclick="document.forms.signupform.submit()"></div>
</form>
Thank you
You can style the div as inline, but you should rather use a span.
<label id="fnamelabel" for="fnam" style = "display:inline">First Name :</label>
<input type="text" name="fnam" id="fnam" tabindex="1" style = "display:inline" />
<div id="newDiv" style = "display:inline"></div>
normally I wouldn't use in-line CSS like that, but as you didn't post the css i felt it'd be necessary.
First of all, let's work on that markup!
<form action="operates/signup.php" method="post" name="signup_form">
<label>First Name:
<input name="first_name"></label>
<label>Last Name:
<input name="last_name"></label>
<label>Your Email:
<input type="email" name="email"></label>
<label>Please Reenter Your Email:
<input type="email" name="validate_email"></label>
<label>New Password:
<input type="password" name="password"></label>
<label>Main Skill:
<input name="main_skill"></label>
<label><input type="checkbox" name="terms_and_conditions">I agreed the Terms and Conditions</label>
<button type="submit">Submit</button>
</form>
<style type="text/css">
form {
display: block;
width: 400px;
}
label {
display: block;
padding: 5px;
margin: 5px;
}
form label input {
float: right;
}
input[type=checkbox] {
float: none;
}
</style>
There, now doesn't that look much better?
As for the original question, don't use a div, div is a completely-unsemantic block-level element. If you want an inline element (i.e. to show on the same line), use a span, which is a completely-unsemantic inline-level element.
I would like to produce the following form style:
Name Email
[.................] [.................]
Subject
[.................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
The HTML code I have is:
<form name="message" method="post">
<section>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
At the moment it is producing:
Name [...................]
Email [...................]
Subject [...................]
Message
[.........................................]
[.........................................]
[.........................................]
[.........................................]
What would be the best way to do this? I keep getting in a muddle my floats!
I'd make both the input and label elements display: block , and then split the name label & input, and the email label & input into div's and float them next to each other.
input, label {
display:block;
}
<form name="message" method="post">
<section>
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div style="float:left;">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
<br style="clear:both;" />
</section>
<section>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</section>
</form>
Probably a bit late but this worked for me.
i simply used column flex-direction on the label and input elements
HTML
<form id="survey-form">
<label for="name">Name</label>
<input type="text" id="name">
<label>Email</label>
<input type="email" id="email">
</form>
CSS
label,input{
display:flex;
flex-direction:column;
}
You could try something like
<form name="message" method="post">
<section>
<div>
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
<div>
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</div>
</section>
<section>
<div>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</div>
<div class="full">
<label for="message">Message</label>
<input id="message" type="text" value="" name="message">
</div>
</section>
</form>
and then css it like
form { width: 400px; }
form section div { float: left; }
form section div.full { clear: both; }
form section div label { display: block; }
I know this is an old one with an accepted answer, and that answer works great.. IF you are not styling the background and floating the final inputs left. If you are, then the form background will not include the floated input fields.
To avoid this make the divs with the smaller input fields inline-block rather than float left.
This:
<div style="display:inline-block;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
Rather than:
<div style="float:left;margin-right:20px;">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</div>
I'd prefer not to use an HTML5 only element such as <section>. Also grouping the input fields might painful if you try to generate the form with code. It's always better to produce similar markup for each one and only change the class names. Therefore I would recommend a solution that looks like this :
CSS
label, input {
display: block;
}
ul.form {
width : 500px;
padding: 0px;
margin : 0px;
list-style-type: none;
}
ul.form li {
width : 500px;
}
ul.form li input {
width : 200px;
}
ul.form li textarea {
width : 450px;
height: 150px;
}
ul.form li.twoColumnPart {
float : left;
width : 250px;
}
HTML
<form name="message" method="post">
<ul class="form">
<li class="twoColumnPart">
<label for="name">Name</label>
<input id="name" type="text" value="" name="name">
</li>
<li class="twoColumnPart">
<label for="email">Email</label>
<input id="email" type="text" value="" name="email">
</li>
<li>
<label for="subject">Subject</label>
<input id="subject" type="text" value="" name="subject">
</li>
<li>
<label for="message">Message</label>
<textarea id="message" type="text" name="message"></textarea>
</li>
</ul>
</form>
There is no need to add any extra div wrapper as others suggest.
The simplest way is to wrap your input element inside a related label tag and set input style to display:block.
Bonus point earned: now you don't need to set the labels for attribute. Because every label target the nested input.
<form name="message" method="post">
<section>
<label class="left">
Name
<input id="name" type="text" name="name">
</label>
<label class="right">
Email
<input id="email" type="text" name="email">
</label>
</section>
</form>
https://jsfiddle.net/Tomanek1/sguh5k17/15/
Using flex-direction: column; on the label elements will place the labels above their boxes, however it will also lock all the boxes in a long column. To get more than one box per line, with the label above the boxes you must pair them with divs. Here is an example of both:
#survey-form1 label {
display:flex;
flex-direction:column;
}
#survey-form2 {
display: flex;
flex-direction: row;
}
.inputPair {
display: flex;
flex-direction: column;
margin-right: 10px
}
<form id="survey-form1">
<label for="name1">Name</label>
<input type="text" id="name1">
<label for="email1">Email</label>
<input type="email" id="email">
</form>
<form id="survey-form2">
<div class="inputPair">
<label for="name2">Name2</label>
<input type="text" id="name2">
</div>
<div class="inputPair">
<label for="email2">Email2</label>
<input type="email" id="email2">
</div>
</form>
10 minutes ago i had the same problem of place label above input
then i got a small ugly resolution
<form>
<h4><label for="male">Male</label></h4>
<input type="radio" name="sex" id="male" value="male">
</form>
The disadvantage is that there is a big blank space between the label and input, of course you can adjust the css
Demo at:
http://jsfiddle.net/bqkawjs5/
OR....you can use flexbox with flex-direction: column on the imputs and they will arrange like bliss.