https://codepen.io/anon/pen/jgWdMW
I'm trying to align the inputfields so that they start all at the same point, I've tried multiple things since yesterday, positioning is harder than I thought..
A Survey Form
<p id="description"> Let us know how we can improve FFC</p>
<div class="labels">
<div>
<label for="name">* Name: </label>
<input type="text" id="name" placeholder="Enter your name" required>
</div>
<div class="one">
<label for="email">* Email: </label>
<input type="text" id="email" placeholder="enter your mail">
</div>
<div>
<label for="age">* Age: </label>
<input type="number" id="email" placeholder="Enter your Age">
</div>
<div>
<label for="Number">* Number: </label>
<input type="text" id="Number" placeholder="Enter your Number">
</div>
</div>ยด
One option is to define a width for your labels, this means they all take up the same amount of space next to the input boxes. For this you need the following css:
label {
display: inline-block;
width: 100px;
}
There's also a slight issue with the "Age" box being slighly larger than the others due to the number input and padding (for me on firefox at least). You could set a width on the input boxes to fix this e.g.
input {
padding: 8px;
margin: 12px;
width: 200px;
}
Codepen
Related
Why does the form element, which is now a grid element, does not contain its cells (grid cells are sticking out) when viewport width is changed around 225px?
Here's my link to the code I'm having trouble with: https://codepen.io/skanda1395/pen/RXNZZO
What changes do I need to make the following piece of code?
form {
display: grid;
width: 50vw;
margin: auto;
grid-template-columns: 1.1fr 1.5fr;
grid-gap: 17px;
background-color: white;
border-radius: 5px;
padding: 33px;
}
To display properly you can put the tags into divs so the grid will easily work
<div>
<label for="name" id="name-label">Name:</label>
<input class="wide" id="name" type="text" placeholder="Enter your name" required>
</div>
<div>
<label for="email" id="email-label">Email:</label>
<input class="wide" id="email" type="email" placeholder="Enter your email" required>
</div>
<div>
<label for="number" id="number-label">Age:</label>
<input class="wide" id="number" type="number" min="0" max="10" placeholder="Enter your age">
</div>
<div>
<label for="dropdown">What do you do?</label>
<select class="wide" id="dropdown">
<option>Student</option>
<option>Full-time Employee</option>
<option>Self-employed</option>
<option>Other</option>
</select>
</div>
You can too nesting the input inside the label, but to work you have to set the display as 'block' like this label{display:block;}
<label for="name" id="name-label">Name:
<input class="wide" id="name" type="text" placeholder="Enter your name" required>
</label>
I am making a copy of a pen-and-paper character sheet for a RPG, as a way of learning html/css. However I got stuck right at the beginning when trying to style a form, holding some background information about the character.
Currently I've managed to make my form of labels and input-fields to look like the picture to the left. However the pen-and-paper character sheet (and the desired look) is formatted like the one on the right.
Below is the code I'm using.
.sheet-character-background form input,
label {
margin-bottom: 10px;
}
.age-input {
width: 60px;
}
<div class="sheet-character">
<div class="sheet-character-background">
<form>
<label>Name</label>
<input type="text" name="attr_name">
<br>
<label>Race</label>
<input type="text" name="attr_race">
<br>
<label>Gender</label>
<input class="gender-input" type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
<br>
<label>Religion</label>
<input type="text" name="attr_religion">
<br>
<label>Occupation</label>
<input type="text" name="attr_occupation">
<br>
<label>Archetype</label>
<input type="text" name="attr_archetype">
<br>
<label>Environment</label>
<input type="text" name="attr_environment">
<br>
<label>Background</label>
<input type="text" name="attr_backgrund">
</form>
</div>
</div>
What are the steps for going from what I have to what I want? I played around with surrounding each "row" with a <div> and class and setting their width in css. However this didn't work out so I reverted to my initial version and got stuck.
Many people would probably suggest to get a css framework, but what you want can be done with some simple css.
First, your html basically consists of a form with a series of rows, except for one row where it consists of two fields in one row. So I modified your html slightly that each row is wrapped by a div with a class as .form-row and delete the <br> (let css to do the rendering instead of using html tag):
To achieve what you want will then come down to set a width for the form, and how each row will behave, and set the width of input, and last override the setting for the special case of .age-input.
This is just a 'quick-and-dirty' way to achieve what you want, hopefully it provide you some ideas and suggestions in your learning.
form {
width: 300px;
}
.form-row {
display:flex;
}
input {
width: 100%;
}
.age-input {
width: 60px;
}
<form>
<div class="form-row">
<label>Name</label>
<input type="text" name="attr_name">
</div>
<div class="form-row">
<label>Race</label>
<input type="text" name="attr_race">
</div>
<div class="form-row">
<label>Gender</label>
<input type="text" name="attr_gender">
<label>Age</label>
<input class="age-input" type="number" name="attr_age" min="0">
</div>
<div class="form-row">
<label>Religion</label>
<input type="text" name="attr_religion">
</div>
<div class="form-row">
<label>Occupation</label>
<input type="text" name="attr_occupation">
</div>
<div class="form-row">
<label>Archetype</label>
<input type="text" name="attr_archetype">
</div>
<div class="form-row">
<label>Environment</label>
<input type="text" name="attr_environment">
</div>
<div class="form-row">
<label>Background</label>
<input type="text" name="attr_backgrund">
</div>
</form>
Simple question, and undoubtedly an easy solution--I'm just having a lot of trouble finding it despite searching SO and Google for a while.
All I'm looking to do is take the snippet of text "I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)" and having it aligned to the right of the check box (with the text left aligned), but not wrapping around it like it is now.
Here's my JSFiddle
Code (using PureCSS for styling):
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Product Name</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Contact Name</label>
<input id="password" type="text" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Contact Email</label>
<input id="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Website</label>
<input id="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="foo">Description:</label>
<textarea id="description" type="text" placeholder="Enter description here..."></textarea>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
Any help would be much appreciated. Thanks.
Here's a simple way. There are probably others.
<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
I'm interested in an enhanced listing or premium profile,
(a member of our team will respond promptly with further information)
</div>
I used a div to "block" structure the text and moved it to the right. The float: left on the input keeps the checkbox to the left of the text (not above). The margin-top on the input tweaks the top alignment with the text.
The fiddle.
This is the method, that I used. It worked better for me than the many other methods I found on SO.
LABEL.indented-checkbox-text
{
margin-left: 2em;
display: block;
position: relative;
margin-top: -1.4em; /* make this margin match whatever your line-height is */
line-height: 1.4em; /* can be set here, or elsewehere */
}
<input id="myinput" type="checkbox" />
<label for="myinput" class="indented-checkbox-text">I have reviewed the business information and documentation above, and assert that the information and documentation shown is current and accurate.</label>
Try floating the check box left, and then wrap the text in a div with "overflow: hidden;". Maybe additionally, add some padding as I did below to give the text some breathing room from the check box (the padding is optional though).
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" type="checkbox" style="float: left;">
<div style="overflow: hidden; padding: 0px 0px 0px 5px;">
I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
</div>
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</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.