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>
Related
I have a simple page that consists of a form. There is a string for what the input box should be, and then the input box.
I want two different behaviors. When a cell phone is accessing the page, I want everything to be stacked on top of each other, but when the page is accessed via a computer I want multiple rows consisting of the the title, followed by the input box on the same row.
I've researched media queries by I still don't understand it enough to get through.
<html>
<head>
<style>
</style>
</head>
<body>
<form>
<center>
<div class="left">
First name:
</div>
<div class="right">
<input type="text" name="firstname"/>
</div>
<div class="left">
Last name:
</div>
<div class="right">
<input type="text" name="lastname"/>
</div>
<div class="left">
Email Address:
</div>
<div class="right">
<input type="text" name="email"/>
</div>
<div class="left">
Address:
</div>
<div class="right">
<input type="text" name="address"/>
</div>
<div class="left">
I've practiced yoga for at least one year:
</div>
<div class="right">
<input type="checkbox" name="oneyear"/>
</div>
<div class="right">
<input type="submit" name="submit" value="submit"/>
</div>
</center>
</form>
</body>
</html>
You have multiple choice: using Bootstrap to easily display your grid in different ways on window resize.
You can also use media queries, combine with a grid layout like Flexbox or Grid.
Or even use Jquery and the windworesize function.
Personnaly, i would choose Flexbox and the flex-direction propriety when the window reach the size of a smartphone or tablet.
To write a media querie, you just have to type something like #media screen and (max-width: 640px) for instance and write your rules inside the curly brackets.
Here is a sample code.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
font-size: 16px;
line-height: 22px;
font-family: Arial, Helvetica, sans-serif;
background-color: #f5f5f5;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.my-form {
width: 100%;
max-width: 920px;
margin: 0 auto;
padding: 20px;
}
.my-form .input {
width: 100%;
padding: 10px;
}
.my-form .input .left {
display: block;
width: 100%;
line-height: 24px;
padding: 3px 0;
margin-bottom: 5px;
}
.my-form .input .right {
width: 100%;
}
.my-form .input input[type='text'], .my-form .input input[type='email'], .my-form .input textarea {
display: block;
width: 100%;
height: 30px;
font-size: 16px;
padding: 3px;
line-height: 22px;
border: 1px solid rgba(0,0,0,.3);
}
.my-form .input textarea {
height: auto;
min-height: 60px;
resize: vertical;
}
.my-form .input input[type='submit'] {
display: block;
width: 100%;
padding: 15px;
background-color: navy;
color: #ffffff;
font-size: 16px;
line-height: 22px;
}
#media screen and (max-width: 1024px) {
.my-form .input:after {
content: "";
clear: both;
display: table;
}
.my-form .input .left {
float: left;
width: 35%;
padding-right: 10px;
margin-bottom: 0;
}
.my-form .input .right {
float: right;
width: 65%;
}
}
</style>
</head>
<body>
<form class="my-form">
<div class="input">
<label class="left" for="firstname">
First name:
</label>
<div class="right">
<input type="text" id="firstname" name="firstname" />
</div>
</div>
<div class="input">
<label class="left" for="lastname">
Last name:
</label>
<div class="right">
<input type="text" id="lastname" name="lastname" />
</div>
</div>
<div class="input">
<label class="left" for="email">
Email Address:
</label>
<div class="right">
<input type="email" id="email" name="email" />
</div>
</div>
<div class="input">
<label class="left" for="address">
Address:
</label>
<div class="right">
<textarea cols="10" rows="5" id="address" name="address"></textarea>
</div>
</div>
<div class="input">
<div class="left"></div>
<div class="right">
<label for="oneyear"><input type="checkbox" id="oneyear" name="oneyear" /> I've practiced yoga for at least one year:</label>
</div>
</div>
<div class="input">
<input type="submit" name="submit" value="submit" />
</div>
</form>
</body>
</html>
You need Media Query for this. Media query is basically writing different CSS for devices with different widths. You can learn more from here- https://www.w3schools.com/css/css3_mediaqueries_ex.asp
Also check out this article- https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
You can also use jQuery for the same using matchmedia..
Here is a JSbin example for you- https://jsbin.com/kutacuzece/edit
(function($) {
/*
* We need to turn it into a function.
* To apply the changes both on document ready and when we resize the browser.
*/
function mediaSize() {
/* Set the matchMedia */
if (window.matchMedia('(min-width: 768px)').matches) {
/* Changes when we reach the min-width */
$('body').css('background', '#222');
$('strong').css('color', 'tomato');
} else {
/* Reset for CSS changes – Still need a better way to do this! */
$('body, strong').removeAttr('style');
}
};
/* Call the function */
mediaSize();
/* Attach the function to the resize event listener */
window.addEventListener('resize', mediaSize, false);
})(jQuery);
OR you can use something as simple as this-
if ($(window).width() < 960) {
$(selector).css({property:value, property:value, ...})
}
else if ($(window).width() < 768) {
$(selector).css({property:value, property:value, ...})
}
else {
$(selector).css({property:value, property:value, ...})
}
I have been trying for several hours to format my form neatly without the use of a table.
I've floated the labels left and the inputs right but they still don't line up neatly with each other. Ideally it would look like so:
Label(Root Diameter) | Input(text) | label(mm)
I know I can do it using a table but I am looking for a more elegant and professional way of doing it. If someone could just point me in the right direction and perhaps give me an example I would appreciate it greatly.
Here is my code.
html:
<head>
<script src="jquery-1.11.0.min.js"></script>
<script src="criticalSpeedCalc.js"></script>
<link rel="stylesheet" href="calcstyle.css">
</head>
<body>
<div id="calcWrapper">
<form name="calculator" id="calculator">
<label class="type">Unit of Measurement:</label>
<br>
<select name="unit" class="input">
<option value="120904000">Metric (cm)</option>
<option value="4760000">Imperial (inches)</option>
</select>
<br>
<label class="type">Root Diameter:</label>
<br>
<input type="text" name="root" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">Width between bearings:</label>
<br>
<input type="text" name="bearings" class="input" autocomplete="off">
<label for="unit">mm</label>
<br>
<label class="type">End Fixity:</label>
<br>
<select name="fixity" class="input">
<option value=".36">1</option>
<option value="1.0">2</option>
<option value="1.47">3</option>
<option value="2.23">4</option>
</select>
<br>
<label class="type">Max Speed:</label>
<br>
<input type="text" name="speed" class="input" autocomplete="off">
<label for="rpm">rpm</label>
<br>
<br> Reset
Calculate
Exit
</form>
</div>
</body>
#calcWrapper {
background-image: url("Design1.png");
width: 265px;
height: 365px;
float: left;
/*border-width: 2px;
border-style: solid;*/
}
css:
#calculator {
width: 186px;
height: 230px;
margin-left: 38px;
margin-top: 115px;
padding-left: 5px;
font: bold 11px Helvetica, Arial, sans-serif;
text-align: center;
-moz-box-sizing:content;
/*border-width: 2px;
border-style: solid;*/
}
.input {
margin: 1px;
max-width: 80px;
max-height: 10px;
font: bold 10px Helvetica, Arial, sans-serif;
display: block;
vertical-align:middle;
margin-bottom: 10px;
float: right;
}
select.input {
max-height: 18px;
}
label.type {
width: 80px;
display: block;
vertical-align:middle;
float:left;
clear:left;
margin: 2px;
}
And here is a fiddle link
You can have "normal" html tags and table-like display using the CSS Table Model
Since this is not a tabular data not using table is the right choice however you can use div elements to create a table :)
.table {
display:table;
}
.table-row {
display: table-row;
}
.table-cell {
display:table-cell;
vertical-align:middle;
}
Here is the fiddle: http://jsfiddle.net/3Ej7Q/3/
You can just float your .input class to the left and make it a bit narrower (max-width:70px).
See it here: http://jsbin.com/pepixare/1/edit
I use div's to solve this problem.
my width is in % you can use px if you prefer.
col- represents the width of the div in %.(col-40 == width:40%;)
you can easily implement this with other attributes like inputs,ul,ol,a,img ect.
<div class="table">
<div class="tr">
<div class="th col-40 fl pd-l-2">monday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
<div class="tr">
<div class="th col-40 fl">tuesday</div>
<div class="td col-2 fl">:</div>
<div class="td col-58 fr txt-alnC">09:30 - 18:00</div>
</div>
</div>
.table {
width: 100%;
float: left;
cursor: pointer;
}
.table .tr {
float:left;
width:100%;
height:40px;
}
.table .tr .th,
.table .tr .td {
height:47%;
padding:5% 0;
}
I managed to find the solution to my problem which involved setting all the elements inside the form to display:inline-block, and setting the form's text-aligntment to justify.
For a better explanation than I am able to give give this a squiz. (The answer is in the text align section)
And here is a link to an updated fiddle
Hope I was able to help anyone in the same predicament.
I'm trying to make a very simple form (picture above) with three columns but without using tables. Unfortunately for me, it's not as simple in code for me as it was in Photoshop. I've been fighting with the HTML/CSS below for an hour and this is the best I could get. Is there any chance somebody could please help me with my code?
<style type="text/css">* {
}
.containerANE {
overflow: hidden;
background: #C6DEFF;
width: 992px;
}
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
}
.leftANE {
float: left;
width: 152px;
outline: 1px solid #8191a6;
}
.middleANE {
width:717px;
outline: 1px solid #8191a6;
}</style>
<h1>E-mail US</h1>
<form action="confirmed.php" method="get">
<div class=containerANE>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
Name
</div>
<div class=middleANE>
<input type="text">
</div>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
Description
</div>
<div class=middleANE>
<textarea rows="4" cols="50">
</textarea>
</div>
<div class=rightANE>
<img width="25" src="Help-icon.png">
</div>
<div class=leftANE>
E-mail<br><br>Phone
</div>
<div class=middleANE>
<input type="text">
<br> OR <BR>
<input type="text">
</div>
<input type="submit" value="SUBMIT">
Your using floats. so you need a clearfix.
Try adding group to the div's your floating:
.group:after {
content: "";
display: table;
clear: both;
}
your example fixed with .group :
http://jsfiddle.net/agconti/YvQEs/
Adding a clearfix is the best practice way to do it. You can add this class to any element that you're floating to solve similar issues in the future. Additionally the link above will tell you all you need to know about how to use it.
Also, you need to wrap your class names with quotes like class="right" instead of class=right for the classes to apply.
clear add clear right on class .rightANE
.rightANE {
float: right;
width: 30px;
outline: 1px solid #8191a6;
clear: right;
}
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;
}
The 'required' text is showing up to the left of the input box. Similar problem in Opera except is displays on the next line (creates a line break). Looks as expected in FF3.1 and chrome. Any suggestions? Eventually I would like to use the display:none attribute on the 'required' span and show this span as necessary with javascript.
<html>
<head>
<title></title>
<style type="text/css">
<!--
input.missing { background-color: #FFFF77; }
div.row {
clear: both;
padding-top: 5px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
// float: right;
width: 235px;
text-align: left;
padding-right: 0px;
padding-left: 45px;
}
div.spacer {
clear: both;
}
.container{
width: 425px;
background-color: #ccc;
border: 1px dotted #333;
padding: 5px 5px 5px 5px;
margin: 0px auto;
}
.error{
color: #ff0000;
}
.required{
color: #ff0000;
float: right;
// display:none;
// display:inline;
}
-->
</style>
</head>
<body>
<div id="contact_form">
<form action="/jr/index.php" method="POST" id="contact">
<div id="top_message" style="width: 360px; margin: 10px auto;">
Enter Your Information Below</div>
<div class="container">
<div class="row">
<span class="label">Name:</span>
<span class="formw"><input size="30" maxlength="30" name="name" id="name" value=""></span>
</div>
<div class="row">
<span class="label">Email:</span>
<span class="formw"><input size="30" maxlength="30" name="email" id="email" value=""></span>
<span id="email_error" class="required">(required)</span>
</div>
<div class="row">
<span class="label">Shoe size:</span><span
class="formw"><input type="text" size="25" /></span>
</div>
<div class="row">
<span class="formw">
<input type="image" value="submit" name="submit" class="button" src="submit.png" alt="Submit" /></span>
</div>
<div class="spacer">
</div>
</div>
<div id="message_ajax" style="width: 360px; margin: 10px auto;"></div>
</form>
</div>
</body>
</html>
IE really makes me hate web dev sometimes.
You probably should start by adding the proper DocType tag at the top of your file.
EDIT:
After looking at your code, it appears you are not using your floats properly. First off - // does NOT comment out lines in a CSS file. You need to wrap it in /* and */ to comment it out. So your SPAN.formw style is floating to the right, which is before your SPAN.required, which also floats right. Since you're using SPAN tags, you really don't need to float anything here. If you remove all of those it should just fall into place for you.
Which doctype are you using ? A strict one may prevent that kind of problem... Also, I usually start my CSS design with a reset file to get rid of all those kind of annoyances : http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
Using double slash "//" is not valid CSS commenting. So this float right rule:
div.row span.formw { // float: right;
Is being applied.
Use:
/* comment */
When commenting CSS.
Put a float:left on the formW class
Float all the boxes in the row to the left, instead of mixing floating and inline elements:
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: left;
width: 235px;
padding-left: 45px;
}
.required{
float: left;
color: #ff0000;
// display:none;
}
jriggs, since IE8 is still not completely stable, for some projects you can have IE8 revert to IE7 rendering rules. One of the benefits is that this doesn't give the user the compatibility view button on the right of the location bar.
For more info and specifics see
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx