My apologies in advance, I have VERY modest coding experience and am trying to get to grips with HTML...
While applying some basic code for a contact form from insightly (below/attached), I'm trying to incorporate whats discussed here
Can't seem to get it right though, would just like the field titles on the left with the actual fields behind them aligned, with a return between each and while sticking to the coding needed for it to work with Insightly..
Thanks in advance for any help!
[EDIT 1]
Thanks a lot, I have now managed to make it appear more or less as wanted with a bit of CSS (attached). Unfortunately I can't quite get it to behave as need be though, it submits to insightly fine but it doesn't clear the fields upon submit, nor have I found a working method to provide confirmation that it was sent, other than a particularly ugly alert window (especially in chrome)..Any help on 'resetting on submit' and a way of telling the user that it was sent would be great! I did try a bit of CSS from here but to no avail...
<style type="text/css">
/*************CHSE Stylesheet ***/
body {
background-color: transparent;
height:360px;
width:280px;
}
textarea {
height:70px;
width:273px;
}
</style>
<style>
form label{
display: inline-block;
width: 100px;
font-weight: bold;
}
</style>
<form name="insightly_web_to_contact" action="https://example.insight.ly/WebToContact/Create" method="post"<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><input type="hidden" name="formId" value="xxxxxxxxxxxxxxx/xxxxxx=="/>
<span style="font-size:14px;"><span style="color:#FFFFFF;font-weight:bold"><span style="font-family:Open Sans;"><center>Quick Message:</center><br/>
<label for="insightly_firstName">First Name: </label><input id="insightly_firstName" name="FirstName" required="" type="text"/><br/><br/><label for="insightly_lastName">Last Name: </label><input id="insightly_lastName" name="LastName" required="" type="text"/><br/><br/><input type="hidden" name="emails[0].Label" required="" value="Work"/><label for="email[0]_Value">Email: </label><input id="emails[0]_Value" name="emails[0].Value" required="" type="text"/><br/><br/><label for="insightly_background">Message: </label><textarea id="insightly_background" name="background">
</textarea><br/><br/><center><input type="submit" value="Send Message"></center></form>
The key to attractive layouts is DIVs and CSS.
First, use DIVs to group the various input areas, and to divide each area into left/right (via float).
For example, you might want the label and the input fields to be nicely aligned:
.frmGroup{overflow:hidden;}
.frmLeft {float:left;width:120px;}
.frmRight{float:left;width:300px;}
#thisone{margin-top:50px;}
<form>
<div class="frmGroup">
<div class="frmLeft"><label for="fn">First Name:</label></div>
<div class="frmRight"><input id="fn" type="text" /></div>
</div>
<div class="frmGroup">
<div class="frmLeft">Last Name:</div>
<div class="frmRight"><input type="text" /></div>
</div>
<div id="thisone">
<textarea cols="50" rows="5"></textarea>
</div>
</form>
The float instruction is particularly useful, as it allows you to align the DIVs side-by-side. However! It also removes the DIVs from the HTML "flow", meaning that they take zero vertical space. To counter that, add overflow:____ to the parent DIV. In example, I used overflow:hidden]. In the jsFiddle at bottom, experiment by deleting/adding that line.
You can also give an ID to a specific DIV and style it to have either margin or padding above/below/left/right.
DIVs have the added advantage of being block elements, which has the same effect as adding a <br> to the end.
*Also note that the <label> tag is really only useful for buttons, checkboxes, etc. because they allow the user to click the button/checkbox by also clicking on the text label.
Here is a jsFiddle of the above demo that you can experiment with.
Related
How do I get five more space between text in an HTML page? I am regularly suing but it is not enough.
In below example I need more space between LANDMARK and STREET in one line
<html>
<body>
LANDMARK:<input type="text" name="land_mark">
SREET:<input type="text" name="street">
</body>
</html>
You can seprate the elements close to each other using the margin property.
input {margin-right: 20px;}
However, a better way of achieving this would be to change your markup to become a little more semantic, a demo here
HTML :
<div class="form_container">
<form method="POST" name="form_name" class="some_form">
<label for="land_mark">
landmark
</label>
<input type="text" name="land_mark" id="land_mark" />
<label for="street">
street
</label>
<input type="text" name="street" id="street" />
</form>
</div>
CSS
.some_form label {
text-transform : uppercase;
margin-right: 5px;
}
.some_form input {
margin-right: 20px;
}
Update
The reason it is better to use labels to denote the input actions :
(source)
clicking the label focuses on the
text field, which is something a lot
of users expect
it's helpful for the accessibility reasons
how else is the user going to know which field is which? you could you
just text or a span or something, but
why would you?
It leads to a more semantic markup.
As far as not usng goes, it's best to seprate appearance and content, it helps keeping it much cleaner and maintainable. It is much better to just use something like margin-right : 10px, than specifying tons of
In this particular case(because the two words are in separate tags) a simple
margin-left: 20px;
would do.
But you should use the word-spacing CSS style to achieve this effect without  
take some lesson of css. It's very important to use css. margin property is a well solution given to you.But please take some knowledge of css. I bet it will be more helpful for your future plan
I am trying to code an input form with instructions throughout. I would like the text to not be selectable, but of course I would like the input to be selectable so that the users can modify their text easily.
My HTML looks something like this:
<div id="form">
<header> Some header text </header>
Instructions on what to do.
<form>
<label>first name:</label><input type="text" name="fname" />
<label>last:</label><input type="text" name="lname" />
<label>email:</label><input type="text" name="email" />
</form>
<div id="extras"> A bunch of separate notes and maybe a textarea box</div>
</div>
and my CSS looks something like this:
#form{ user-select:none; }
#form form input{user-select:auto}
A couple of notes:
I included all the css for various browsers in my actual code.
I tried user-select:text, and it did not work.
I have many bits of text separated into different sections, so I very much prefer to remove the ability to select as the default behavior and just apply the ability to select to the inputs. Applying code to make each little bit of text unselectable would be a pain.
Even if I did the above fix, I would still be curious about this issue.
Anyone know why this is happening?
There's no such thing as user-select: auto; You should use user-select: text;
Your given code works, so you may want to include the rest of the code or link to it.
<td>
<form name="search_form" action="" method="POST">
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</form>
</td>
now when ever we use this code it adds an extra line after it ends.... see the image below
see the red boxed area... there is nothing there... nothing but that space is added for no reason by the FORM
BUT... BUT.. if i use the code like this
<form name="search_form" action="" method="POST">
<td>
<input type="text" name="search_text">
<input type="submit" name="search_bt" value="Go">
</td>
</form>
everything is fine... the space disappears..
WHY SIRE !!!! WHYYYYYYYYYYYYYYYYYY
thats just the way most browsers treat the form element
use css padding/spacing to tell it that it shouldnt added extra space for form elements.
in your css file just add
form {
margin: 0;
padding: 0;
}
and you'll be fine.
This page has a good write-up on what's occurring.
http://www.cs.tut.fi/~jkorpela/forms/extraspace.html
Browsers typically leave some empty
space, roughly corresponding to one
empty line, after a form. The problem
discussed here is often classified as
“extra vertical space after a submit
button”, but this is not the correct
diagnosis. Rather, it’s about spacing
below the entire form, but it is
observed especially often when a form
contains just an input button (often
inside a table cell.
Oddly enough, form elements have CSS styling attached to them. Margins, padding, etc. That's why.
I want to display an HTML form containing labelled text fields, like this:
First Name: [_____________]
Last Name: [_____________]
Date of Birth: [________]
My obvious approach is to use a <TABLE> and simply place the labels and text fields in its cells, but is there a better way, e.g. a CSS-based approach?
EDIT:
I'm looking for a way that reduces the verbosity in the HTML file.
And yes, I'm looking for auto-sizing of the labels. See a related question about wrapping labels
If you need the labels to the left of the fields like that, just go ahead and use a table. Not only do tables degrade nicely on older browsers, but they auto-size the column of labels to the text in them (assuming you use white-space: no-wrap on the cells containing the labels, and/or — and this is true heresy — the trusty old nowrap attribute on the th tag), they handle being made fairly narrow well, and they're easy. Make each label cell a header and each field cell a normal cell. And it's a pain, but make sure the labels really are labels and link to their fields, because accessibility matters, even if (perhaps especially if) you're using a table non-semantically.
I'd love to hear about CSS solutions that auto-size the label columns, handle being narrow well, and don't involve 18 hacks to deal with inconsistencies across browsers. I'd be thrilled to see them. But every time I've looked (and that's several), it's still been a gap. A gap that needs filling, IMV, so we can stop doing this without wearing hairshirts.
For anyone reading who doesn't need the labels to the left like that, check out jball's answer for a good-looking, semantic alternative.
In terms of usability and if vertical space is not a limiting factor, a list of fields with the label above each field is the quickest to read and fill out, and can be done aesthetically. See many of the usability studies on the web for more info, eg. http://www.lukew.com/resources/articles/web_forms.html
I'd like to use definition lists (<dl>) they tends to be semantically correct.
A label is defined by an user input. It has sense to me.
<dl> expresses semantic contents more accurately than a table.
<dl>
<dt><label for="name>Name</label></dt>
<dd><input type="text" id="name" /></dd>
<dt><label for="email>Email</label></dt>
<dd><input type="text" id="email" /></dd>
</dl>
Here is an example
By the way they degrade gracefully in all browser, even text-based.
I think something like this is what i do but also won't autosize to the length of the text but it's cleaner in my opinion
<form>
<label for="firstName">First Name</label>
<input type="textfield" name="firstName" />
<label for="lastName">Last Name</label>
<input type="textfield" name="lastName" />
</form>
label {
float:left;
width:30px;
}
input {
float:left;
margin-left:30px;
}
The article is a bit old, but I've always found a list apart's advice to be solid: (if you do want to get rid of your tables)
http://www.alistapart.com/articles/prettyaccessibleforms/
CSS Table Display
From IE8+ you can use CSS Table Display for this:
<!DOCTYPE html>
<html>
<head>
<style>
form > div > label { text-align: right; vertical-align: top }
form { display: table; }
form > div { display: table-row; }
form > div > label,
form > div > textarea,
form > div > input { display: table-cell; }
</style>
</head>
<body>
<form method="post">
<div>
<label for="name">Name</label>
<input type="text" id="name" size="14"/>
</div>
<div>
<label for="message">Message</label>
<textarea id="message"></textarea>
</div>
<div>
<label for="ssn">Social Security Number</label>
<input type="text" id="ssn"/>
</div>
<div>
<label></label>
<input type="submit" value="Send"/>
</div>
</form>
</body>
</html>
Use a CSS framework like Blueprint and use that to style the forms.
Another trick would be to create virual "columns" with css and float them next to each other. Labels in one column and inputs in another. Put that (both columns) in a div with a large enough width and float the columns the opposite way you want to align them.
Here's some code (because I am creating a form) that will work for basic forms. The only constraint is the large right margin on inputs.
form input, form select
{
float: right;
margin-right: 650px;
}
form label
{
float: right;
margin-top: 5px;
margin-right: 10px;
}
form .nofloat
{
float: none;
margin: 0;
}
form br
{
clear: both;
}
And layout like so
<input type="text" id="name" />
<label for="name">Name</label>
<br />
On top of this small, narrowly written code, there is an entire article related to creating tableless forms in CSS.
Typically, I have found that there are at least some issues when not using Tables for forms. The general things I have not been able to solve:
Background-color for fields/inputs is not really possible without a faux background
Auto-sizing columns, but I think this is OK
Field hover with CSS, you could use JS but Tables can do this with pure CSS
I might be missing a few things, but the most flexible mark-up if you are using CSS is as below:
<div class='form-field'>
<label>Name</label>
<input />
</div>
You have issues if you want multiple fields per label section, so you have to introduce another div to hold the inputs (to allow the label to still float left etc):
<div class='form-field'>
<label>Name</label>
<div class='form-inputs'>
<input />
<input />
</div>
</div>
With the above mark-up you can achieve very flexible forms, I won't post the CSS as it's very similar to a 2 Column-Layout.
I still need to sit down and try and figure out if pure CSS forms are viable for all occasions but tbh it's very unlikely!
Forms are the worst thing to style using CSS. The only major Cross Browser problems i've had are when styling the FieldSet and Legend elements. No real hacks, but they take some work to look good.
One problem with tables is the space bug. When you don't use tables you can write your label and input like this:
<label for="foo">Blah <input id="foo" type="text"/></label>
which properly encapsulates the input and the label.
In a table, on the other hand, you get those separated:
<td><label for="foo">Blah</label></td><td><input id="foo" type="text"/></td>
That means the area between the </label> and the <input/> does not respond to mouse clicks.
It's not too bad with plain fields, it's really annoying with radio buttons and checkboxes though (or maybe I'm just being super picky.)
Now, to answer your question: I don't think there is a good way to do formatting of a column in CSS (unless the column width is known--you could obtain that feat with JavaScript...) So T.J. Crowder certainly has an excellent answer.
However, there's one argument for CSS (and forced widths) as in one case I created a very large form that covered the whole screen. All the fields would appear in one screen (As the customer wanted) and the CMS did not output a table. But even though, a table would have been a nightmare simply because all the fields were for many placed in non-aligned columns. That would be quite difficult with a table (lots of rowspan using the table as a grid which would be a table for layout!).
Update:
As per comment below, singe31 says that <input/> cannot be defined within the <label> tag. This is wrong. The HTML 4.01 DTD is easy to read and we see that:
<!ELEMENT LABEL - - (%inline;)* -(LABEL) -- form field label text -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">
So in other words an <input/> can appear in a <label> tag. It is perfectly legal.
HTML 5 clearly shows that this is legal in the documentation on w3c here:
http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element
Scroll down a bit up to the "Code Example" and you see:
Code Example
For example, on platforms where clicking or pressing a checkbox label checks the checkbox, clicking or pressing the label in the following snippet could trigger the user agent to run synthetic click activation steps on the input element, as if the element itself had been triggered by the user:
<label><input type=checkbox name=lost> Lost</label>
On other platforms, the behavior might be just to focus the control, or do nothing.
[Meta-note:] I was browsing the question page, getting really tired of "DIVS vs Tables" "When to use tables vs DIVS" "Are Divs better than Tables" "Tables versus CSS" and all the questions that ask THE SAME THING OMG PEOPLE but I would like to see all the ways people tackle the translation of the canonical example of "why you should give up and use tables":
<table>
<tr>
<td> Name </td>
<td> <input> </td>
</tr>
<tr>
<td> Social Security Number </td>
<td> <input> </td>
</tr>
</table>
Question: How to best (semantically, simply, robustly, fluidly, portably) implement the above without tables. For starters, I guess a naive implementation uses a fixed column width for the first column, but that can have iffy results for dynamically generated content. Including strengths/weaknesses of your approach in the answer would be nice.
P.S. Another one I wonder about a lot is vertical centering but the hack for that is covered pretty well at jakpsatweb.cz
EDIT: scunlife brings up a good example of why I didn't think out the problem that carefully. Tables can align multiple columns simultaneously. The Question still stands (I'd like to see different CSS techniques used for alignment/layout) - although solutions that can handle his? more involved example definitely are preferred.
What I usually do is :
<form>
<label for="param_1">Param 1</label>
<input id="param_1" name="param_1"><br />
<label for="param_2">Param 2</label>
<input id="param_2" name="param_2"><br />
</form>
and in a CSS :
label,input { display: block; float: left; margin-bottom: 1ex; }
input { width: 20em; }
label { text-align: right; width: 15em; padding-right: 2em; }
br { clear: left; }
Of course, you'll have to define the width according to your actual data :-)
First, give label and input display: block, so that it can be assigned a size and be lined up.
They both get float: left because Explorer does things a bit differently
Format the label nicely
hack the br so that there's a clear: left somewhere, and I remember that putting it on the label didn't work on some browser.
Plus, with the br you get a nice formatting even if the browser does not support CSS :-)
The trick is when the form gets more complicated than your sample, you realize that tables enable a "flexible grid" that no other elements do.
e.g. what if the "input" is more complicated than a text box? e.g. a bunch of radio buttons, each with their own label:
Color: [____Red___][v]
Hood: [*]
Size: (_) Small
(_) Medium
(_) Large
(*) X-Large
If all you need are simple forms, CSS is great, but as soon as you need a grid, things get interesting...
If you really want to do this, I would check out The Man In Blue's Solution, it works pretty well and is very clean.
People talk about tables getting their forms to display the way they want, that's true, ONLY if you want to display your forms in columns and are willing to lose semantic meaning. With the following HTML in place, it's possible to display this form in as many layouts as you might wish.
BTW - No to the <br />
<form>
<fieldset>
<legend>Personal Info</fieldset>
<div>
<label for="name">Name</label>
<input id="name" name="name" />
</div>
<div>
<label for="ssn">Social Security Number</label>
<input id="ssn" name="ssn" />
</div>
</fieldset>
</form>
You can clear the <divs> or set them to overflow: hidden to ensure that the floats are cleared.
Options from the above html:
Name |==============| SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name |==============|
SSN |==============|
Name: |==============|
SSN: |==============|
Name:
|==============|
SSN:
|==============|
All of the above can be accomplished with just a few lines of css.
When it comes to radio, checkboxes, and submit buttons it gets a little more complicated, but clean semantic HTML CAN be displayed the way you want it using css.
Although the other suggestions are probably better for getting a flexible layout, the literal answer to the question is something like:
<form action="www.example.com">
<div class="table">
<div class="tbody">
<div class="tr">
<div class="td"> <label for="name">Name</label> </div>
<div class="td"> <input id="name"> </div>
</div>
<div class="tr">
<div class="td"> <label for="ssn">Social Security Number</label> </div>
<div class="td"> <input id="ssn"> </div>
</div>
</div>
</div>
</form>
with
<style type="text/css">
div.table { display:table; border-spacing:2px; }
div.tbody { display:table-row-group; }
div.tr { display:table-row; }
div.td { display:table-cell; vertical-align: middle; padding:1px; }
</style>
This works with the latest versions of Firefox, Chrome, Opera, and Safari. It also works with IE8 Beta 2 (standards mode). It doesn't work with IE7 or earlier, but "progressive enhancement" and all that.
I was thinking of something like:
<div style="text-align:right; float:left;">
Name: <input /> <br />
Social Security Number: <input /> <br />
</div>
which, if the right column is fixed-length, aligns OK with variable text length, but I wonder what are the disadvantages of this method?