In the following HTML (also in jsfiddle) I am using CSS tables to align the fields in the form:
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>input, form>div>textarea {
display: table-cell;
}
</style>
</head>
<body>
<form>
<div>
<label for='form-name'>Name:</label>
<input id='form-name' type='text'/>
</div>
<div>
<label for='form-email'>Email:</label>
<input id='form-email' type='email'/>
</div>
<div>
<label for='form-comments'>Comments:</label>
<textarea id='form-comments'></textarea>
</div>
<div>
<input type='submit'/>
<input type='reset'/>
</div>
</form>
</body>
</html>
My questions are:
why does the textarea cell have a greater width than that of the cells above it?
why don't the two button input fields reside on the same row?
update
Here's an updated jsfiddle based on the accepted answer.
Give width: 100%; to form>div>input, form>div>textarea and following css:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 48%;
}
will make it as per your expected output.
Working Fiddle
Attached a snippet.
<!doctype html>
<html>
<head>
<style>
form {
display: table;
width: 200px;
}
form>div {
display: table-row;
}
form>div>label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form>div>div {
display: table-cell;
}
form>div>div>input {
width: 100%;
}
form>div>div>textarea {
width: 100%;
}
form
</style>
</head>
<body>
<form>
<div>
<label forName='form-name'>Name:</label>
<div>
<input id='form-name' type='text' />
</div>
</div>
<div>
<label forName='form-email'>Email:</label>
<div>
<input id='form-email' type='email' />
</div>
</div>
<div>
<label forName='form-comments'>Comments:</label>
<div>
<textarea id='form-comments'></textarea>
</div>
</div>
<div>
<input type='submit' />
<input type='reset' />
</div>
</form>
</body>
</html>
all 4 div have the same width in your fiddle.
use float's on the submit and reset input's to display them on the same row
Try this:
HTML
<table>
<form>
<tr>
<td><label for='form-name'>Name:</label><br>
<input id='form-name' type='text'/></td>
</tr>
<tr>
<td><label for='form-email'>Email:</label><br>
<input id='form-email' type='email'/></td>
</tr>
<tr>
<td><label for='form-comments'>Comments:</label><br>
<textarea id='form-comments'></textarea></td>
</tr>
<tr>
<td><input type='submit'/>
<br>
<input type='reset'/></td>
</tr>
</form>
</table>
CSS
form {
display: table;
width: 200px;
}
form div {
display: table-row;
}
form div label {
display: table-cell;
padding-right: 10px;
text-align: right;
vertical-align: middle;
}
form div input, form div textarea {
display: table-cell;
}
div{
border:1px solid black;
}
table td input, table td textarea{
width: 100%;
}
table td{
width: 150px;
}
JSFiddle:
First a comment about label for:
label forName="form-email
should be written:
label for="form-email
This is quite useful for:
label (text) click -> focus on input field that text is used for.
To answer your questions:
why does the textarea cell have a greater width than that of the cells above it?
It happens because of html element textarea can have rows and cols attributes inside, it has default values if you don't specify it. Check this for example (it would be 50% less in size):
<textarea cols="10" rows="5" id='form-comments'></textarea>
Default values are listed here (20 cols, 2 rows):
http://www.w3schools.com/tags/att_textarea_rows.asp
http://www.w3schools.com/tags/att_textarea_cols.asp
If you would like to override it just put width: 100% to fill width.
Why don't the two button input fields reside on the same row?
You're using table displays on divs and your styles aren't specific enough, you're making general div and input styles and that's your problem.
To fix this, omit last div that wraps your buttons so you just have:
<input type='submit'/>
<input type='reset'/>
And remove display: table from your "form" styles.
https://jsfiddle.net/n3145f60/13/
Related
I have a form that is styled with CSS as a table. However the two input elements are shown to be on top of each other and not side by side. How can I get them to be side by side?
As noted in the comments this might be browser related. I am running it on IE 11.0.14393.0 on Windows 10.
div,
a {
font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
display: table;
}
.FormContainer form div {
display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
display: table-cell;
margin: 5px 0px;
}
.FormContainer form div label {
vertical-align: middle;
padding-right: 10px;
}
.FormContainer form div input[type=text] {
min-width: 200px;
}
<body>
<div>
<p><font size="6"><u><strong>Search Users</strong></u></font></p>
<p>Search for...</p>
</div>
<div class="FormContainer">
<form action="SearchNewestUsers.php" method="post">
<div>
<label for="UserCount">Newest users</label>
<input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
<input type="submit" name="SearchButton" id="SearchButton" value="Search">
</div>
</form>
</div>
</body>
The snippet above produces the following output for me:
So the fault is with IE, and it doesn't seem to like the display: table-cell that you have. The solution I've found is to change to inline-block for the two inputs.
div,
a {
font-family: Segoe, "Segoe UI", sans-serif
}
.FormContainer form {
display: table;
}
.FormContainer form div {
display: table-row;
}
.FormContainer form div label,
.FormContainer form div input {
display: table-cell;
margin: 5px 0px;
}
.FormContainer form div input {
display: inline-block!important;
margin: 5px 0px;
}
.FormContainer form div label {
vertical-align: middle;
padding-right: 10px;
}
.FormContainer form div input[type=text] {
min-width: 200px;
}
<body>
<div>
<p><font size="6"><u><strong>Search Users</strong></u></font>
</p>
<p>Search for...</p>
</div>
<div class="FormContainer">
<form action="SearchNewestUsers.php" method="post">
<div>
<label for="UserCount">Newest users</label>
<input type="text" name="UserCount" id="UserCount" placeholder="Enter number of users...">
<input type="submit" name="SearchButton" id="SearchButton" value="Search">
</div>
</form>
</div>
</body>
I have a form and I am trying to make a row "justified" so the entire row (which is a 4 textboxes and labels) to fit an exact pixel width (lets say 800px). Normally, if i just lay it out without any special css, It is less than 800px. I want to "stretch" it to be 800px. I don't care if I have to stretch the textboxes or the spaces in between them.
This is similar to justified layout in MS word if that helps describe what i am looking for. Is this possible within html / css in a form layout?
You basically need text-align-last: justify which specifies the justification of the "last text line" in a block element, this defaults namely to the standard direction, which is left in LTR.
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 15994654</title>
<style>
#fields {
width: 1000px;
border: 1px solid gray;
}
.justified {
text-align-last: justify;
}
</style>
</head>
<body>
<p id="fields" class="justified">
<label for="input1">label1</label>
<input id="input1" />
<label for="input2">label2</label>
<input id="input2" />
<label for="input3">label3</label>
<input id="input3" />
<label for="input4">label4</label>
<input id="input4" />
<p>
</body>
</html>
This works in IE and Firefox (for older Firefox versions, add -moz-text-align-last: justify if necessary), however this fails in Webkit based browsers (Chrome/Safari). To cover those browser as well, you'd need to replace .justified as follows, so that the last line doesn't appear as a "last line" anymore, so that text-align: justify can do its job the usual way:
.justified {
text-align: justify;
}
.justified:after {
content: '';
display: inline-block;
width: 100%;
}
Note that the text-align-last: justify becomes redundant this way.
Here's the jsfiddle demo.
Actually, there's a very natural way to do this with pure CSS using text-align: justify;.
You didn't succeed because justification doesn't work for the last line (and when there's only one line, it's considered to be the last). There's a CSS3 property that sets text alignment for the last line: text-align-last. Unfortunately, it is not broadly supported.
The solution is to spawn an extra element that will drop to next line, then the first line will be justified:
<form>
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
</form>
form {
width: 800px;
text-align: justify; /* Can we really make this work? Sure! */
}
input {
display: inline-block; /* making elements respect text-align */
}
form:after {
content: ""; /* creating a hidden element that drops to next line */
display: inline-block; /* making it respect text-align and width */
width: 100%; /* forcing it to drop to next line */
}
Demo: http://jsbin.com/ituroj/5/ (click "edit" in top right corner to fiddle with the code).
Result: semantic, no HTML footprint, minimal CSS code, full browser support.
One approach would be:
input[type=text] {
width: 25%;
box-sizing: border-box;
}
Or, if the fields are really inside a <table/> like in this Fiddle, you can set the width of the textboxes to 100%, so the table controls the width:
input[type=text] {
width: 100%;
box-sizing: border-box;
}
You can do it by nesting the input and labels inside of 'columns' that you determine the width of by percentage - this way you can control the width of the form and the inputs will stay justified.
HTML
<form>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
<div class="col4 last">
<label>Input</label>
<div class="inputWrapper">
<div class="textInput">
<input type="text"/>
</div>
</div>
</div>
</form>
CSS
form{
width:800px;
}
.col4{
width:23.5%;
margin-right:2%;
float:left;
}
.last{
margin:0;
}
.inputWrapper{
width:100%;
}
.textInput{
border:1px solid #ccc;
display:block;
padding:5px;
}
.textInput input{
width:100%;
border:none;
padding:0;
}
You can see a jsFiddle example here http://jsfiddle.net/patricklyver/4mbks/
You can combine float with box-sizing. You will have to float, because forms have different weirdness around them in different browsers. For example in Safari on OS X there is always a hidden 1px padding on the top.
JSfiddle
HTML
<form id="myForm">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<div class="clear"></div>
</form>
CSS
#myForm {
border: 1px solid blue;
width: 800px;
}
#myForm input[type=text] {
margin: 0px;
display: block;
float: left;
box-sizing: border-box;
width: 25%;
border: 0px;
background-color: orange;
}
#myForm .clear {
clear: both;
}
I have a seemingly easy problem to solve, but am struggling. How do I get these two inputs to align to the right of the form, without using the BR element ?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
form {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<input name="declared_first" value="above" />
<br/> <!-- I want to get rid of this -->
<input name="declared_second" value="below" />
</form>
</body>
</html>
I just want the first input to appear above the second input, both on the right hand side.
You can use floating to the right and clear them.
form {
overflow: hidden;
}
input {
float: right;
clear: both;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
You can also set a right-to-left direction to the parent and restore the default left-to-right on the inputs. With display: block you can force them to be on different lines.
form {
direction: rtl;
}
input {
display: block;
direction: ltr;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Or the modern way, flexbox layout
form {
display: flex;
flex-direction: column;
align-items: flex-end;
}
<form>
<input name="declared_first" value="above" />
<input name="declared_second" value="below" />
</form>
Try use this:
<html>
<body>
<input type="text" style="direction: rtl;" value="1">
<input type="text" style="direction: rtl;" value="10">
<input type="text" style="direction: rtl;" value="100">
</body>
</html>
input { float: right; clear: both; }
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
text-align: right;
}
input {
width: 100px;
}
</style>
</head>
<body>
<form>
<p>
<input name="declared_first" value="above" />
</p>
<p>
<input name="declared_second" value="below" />
</p>
</form>
</body>
</html>
To affect ONLY text type input boxes use the attribute selector
input[type="text"]
This way it will not affect other inputs and just text inputs.
https://www.w3schools.com/css/css_attribute_selectors.asp
example, use a div and give it an idea to refer to:
#divEntry input[type="text"] {
text-align: right;}
Use some tag, to aligning the input element.
So
<form>
<div>
<input>
<br />
<input>
</div>
</form>
.mydiv
{
width: 500px;
height: 250px;
display: table;
text-align: right;
}
I answered this question in a blog post: https://wscherphof.wordpress.com/2015/06/17/right-align-form-elements-with-css/
It refers to this fiddle: https://jsfiddle.net/wscherphof/9sfcw4ht/9/
Spoiler: float: right; is the right direction, but it takes just a little more attention to get neat results.
Try use this:
input {
clear: both;
float: right;
margin-bottom: 10px;
width: 100px;
}
Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>
Assuming the following markup:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
Here's a working copy
Tested in Safari 3, FireFox 3, and IE7.
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
Make input and label both
float: left;
display: block;
Set width's for the label and input.
apply
clear: both;
vertical-align: middle;
to all the li's.
You should use white-space: normal; in label for multiline