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
Related
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.
This question already has answers here:
<button> vs. <input type="button" />. Which to use?
(16 answers)
Closed 8 years ago.
In order to use an image as a form's submit button, I have come across two ways and would like to know which one is correct/best-practice.
Version 1:
<button type="submit">
<img src="mybutton.jpg" alt="Submit" />
</button>
Version 2:
<input type="image" src="mybutton.jpg" border="0" alt="Submit" />
I personally feel that the first version is better because it makes semantic sense and has a type of "submit". In the second version its saying the input is of type "image" which doesn't mean much to me as a human.
Which one should I go with?
Personally I would set it as a background rather than an image inside the button. So you would get the following.
<button type="submit" class="styledButton></button>
<style>
.styledButton {
background: url('mybutton.jpg') no-repeat;
}
</style>
That is just a matter of style, there is not really a "better" way, use the way you feel your code to be more clean with.
My personal opinion is that all form elements should be "<input>" because that feels more natural for me. I don't like it when things doing the same stuff (being form-elements in this case) looks different of having a different syntax, so I declared this to my personal standard.
However the most annoying thing is that an image, or <input type="image"> will not transfer name="" and value="" when submitting a form, that's why it is bad to use incase you have multiple "buttons" decorated as images in a form and you want to know which one was pressed.
In that case the best opinion is to make an <input type="submit"> and let it look like an image using CSS.
However, my statement for this question is: do it the way you feel best but keep it that way and don't switch around. Decide for one "standard" and use it always. Will make your code more strict and easier to read.
I personally use CSS to apply an image to submit button
Reason behind this is : you don't need to write the same code everywhere, just calling the css class will be sufficient
Instead of above 2 versions mentioned by you.
Try This:
<div id="submitForm">
<input type="submit" value="Submit" name="submit">
</div>
CSS
div#submitForm input {
background: url("mybutton.jpg") no-repeat scroll 0 0 transparent;
color: #000000;
cursor: pointer;
font-weight: bold;
height: 20px;
padding-bottom: 2px;
width: 75px;
}
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.
I've been a developer for a long time, however forms have always been my least favourite part, more specifically designing them!
I'd really like to know how you do you forms, and why. I've had a few discussions with fellow developers over <div> vs <p> on form fields. Which one would you stick with, and why?
An example of what I am talking about:
<form action="" method="post">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Log In" />
</p>
</form>
VS
<form action="" method="post">
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</div>
<div>
<label for="submit"></label>
<input type="submit" name="submit" id="submit" value="Log In" />
</div>
</form>
When it comes to styling, it seems you can do pretty much the same with both, so is it just personal preference, or is there logic behind using one over the other?
Thanks for your time :)
UPDATE
I ended up following a nice article on HTML5 forms and have actually found it to allow MUCH better styling of forms. They are much more organised from a development perspective too. For anyone interested, it is located here: http://24ways.org/2009/have-a-field-day-with-html5-forms
HTML is all about semantics. There is no reason username or submit should be inside a paragraph (<p>) because it's not a paragraph.
So I would go using <div> instead. Ok, maybe <div> has no meaning at all. But it's better than <p>.
I prefer the <div> variant, because its semantics is closer on what you want to express and markup.
A <p> tag is for text paragraphs, whereas a <div> is a general block of any kind.
One option I'd like to suggest:
You could consider wrapping the input inside its label. That way you possibly can avoid additional elements. Also (if you don't need to support IE6) then this allows you to drop the for. And finally if the input is a check box or radio button, then it allows the user to click on the whole text instead of just the tiny control, just like in most operating systems:
<label>Username: <input type="text" name="username" /></label>
Also I'm not sure what the point of an empty label for the submit button is good for, except being lazy when writing the style sheet.
Just thought I'd throw my 2 cents in (assuming we all agree that semantic markup is the goal):
While one can argue that form elements themselves are not semantic, this doesn't mean that the context in which they appear is not as well. There is no "one true way" to markup all form controls.
If the control is actually appearing in a paragraph of text, that is fine - but that pretty much never happens.
If it is an ordered list of checkboxes for example, put them in an <ol> tag.
If order is not relevant, use a <ul> in that case.
If it is a label/text_input pair, one could argue that a <dl> element is appropriate
If it is a spreadsheet, use a <table> (Yes, tables can be appropriate! In fact, I've heard the (questionable) argument many times that form data is tabular)
By the way it is considered a description list in HTML5 to clear up confusion about meaning, and whether or not it's appropriate for things other than literal definition terms.
Almost no one will ever say a <p> is appropriate, but very few will argue that a <div> is inappropriate because there are no attached semantics.
Semantically, each label is bound to its control through the for attribute. There's no need to wrap the pair for semantic reasons, although you may wish to do so for styling reasons. So div is appropriate.
Similarly, grouping of controls has a dedicated element fieldset so there's no sense in using ul, ol or dl for that purpose, and using them is simply a form of listitis.
What about fieldsets ? - it is more logical for forms
And in fact you can style anything the way you want
Semantically I'd say divs make more sense simply because they have no semantic meaning and the only reason to use a block container like this is for layout purposes. That said, I use paragraphs, but completely out of habit. It's the only place I use paragraphs while not considering their semantic meaning.
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.