Hello I try to align all my input to have a normal form! I can not make it fit together!!GRR Thanks for your help please...This is made 2 hours im lost my time on this simple thing.....
<form name="input" action="html_form_action.asp" method="get">
<div id="one">
<p><label>Prénom</label> <input type="text" id="Prénom"/></p>
<p><label>Nom</label> <input type="text" id="Nom" /></p>
<p><label>Mot de passe</label> <input type="text" id="Pass" /></p>
<p><label>E-mail</label> <input type="text" id="Mail" /></p>
</div>
<input type="submit" value="Submit" />
</form>
You can give your labels width, and text-align them to the right. To do that you have to make them inline-block elements.
See this fiddle
I guess you don't have to align them right. That's just a style I see a lot when people use a table to do this.
If you just want to make it line up without using a table you can just use some simple CSS:
label {
width: 120px; //however wide your longest label is
float: left;
}
then just take out the p tags and put line breaks after each input.
I suppose you mean tabular appearance for the form, in two columns, one for the label, another for the input field, with the second column aligned left, first column either left or (more readably perhaps) right. The most obvious and most robust way is to make it a table:
<table id="one">
<tr><td><label>Prénom</label> <td> <input type="text" id="Prénom"/>
<tr><td><label>Nom</label> <td> <input type="text" id="Nom" />
<tr><td><label>Mot de passe</label> <td> <input type="text" id="Pass" />
<tr><td><label>E-mail</label> <td> <input type="text" id="Mail" />
</table>
Then style as desired in CSS, e.g. with td:first-child: text-align: right.
This causes the first column to be as wide as needed for the longest label. Other methods require a guess on the width, and this is not robust, as the width needed will depend on the font.
To anyone who then accuses you for “using tables for layout,” you can answer that this is a method that actually works and that there is no reason why a form like this could not be regarded as tabular data.
Not really sure what do you want to achieve.
But if you want to align the values input-ed into textbox. In the input tags , add :
style="text-align: right"
If you want to align all textbox to the right, I suggest you can re-format your form in a table.
Related
Trying to get the input box's to line up with their text, the second input box drops a line and throws everything off when float: right is on. I'd like to know why it skipping a line and how to fix it please. Thank you.
tried rearranging, tried clearfix.
https://jsfiddle.net/dpq1fzcj/4/
<section>
<h1> </h1>
<div id="controls" class="controls">
<form id="add-book-form">
Title:
<input type="text" name="title" required /><br>
Author:
<input type="text" name="author" required /><br>
Pages:
<input type="text" name="pages" type="number" required /><br>
Read:
<input type="checkbox" name="read" /><br>
<input type="submit" id="add-book-btn" value="Add"> <button onclick="hideForm()">nvm</button>
</form>
<button onclick="addBookForm()">Add Book</button>
</div>
</section>
You have several problems.
First, you're floating right the input fields and leaving labels to figure out what to do. First label ends up ok, second up breaks the flow because it fits in the same row as the input field since the text line-height is smaller than height of the input field. But the input field doesnt fit in that same line as its label.
Second, you're using <br> for breakings instead of wrapping everything in some kind of a block element.
Third, you're not using label tag at all.
So, to fix this:
Add labels (and for property in labels)
Float labels left and inputs right.
Add div around every label/input pair and add clearfix to it.
Lose <br> altogether.
I must have this input with a text on the right.
So, it isn't a placeholder, it's a real input.
To do this, I must add a div for the text ?
I sought on the web but I didn't find any code :-(
You need to add value="something" and to pull it to the right, you need to add style="text-align:right"
<form>
<input type="text" style="text-align:right" value="abcd"><br>
<input type="text" style="text-align:right" value="efgh"><br>
<input type="submit" value="Submit">
</form>
I am new to html. This is a very simple question. I am dealing with forms. I want all the input text fields to start at the same x-axis point regardless of the size of the label. I want the labels to be left aligned and all the text fields to start at the same x-axis point.I don't want to use tables or " ". Is there a simple solution or Should I use separate divisions for labels and input fields? I don't mind using css but I prefer it to be simple.
<form>
<label>Name</label>
<input type="text" name="n1"><br>
<label>Phone No.</label>
<input type="text" name="p1">
</form>
I want "n1" and "p1" to start at the same x-axis point.
Add this style to your page:
label{
display:inline-block;
min-width:80px
}
Check here Fiddle
You can use paragraph tags for every input element.
<p><input type="text" name="your name"></p>
<p><input type="email" name="your email"></p>
So I'v seen many tutorials and still haven't come up with a cohesive answer to this question: What's the correct/best way to mark up a form where I have a logical grouping of elements consisting of a label, control (input or select), and previous value, i.e. a single field?
I would like the CSS layout to place each grouping on a new horizontal line.
I've seen <div> wrappers, <br> tags, <ul>, <fieldset>, <tr>, and nothing at all (i.e. no markup tag, only CSS) used for this purpose.
Tables, aside from having a bad rep for doing form layout, aren't very flexible when the format of a row needs to vary. And br seems like a horrible idea (even though I've seen it in tutorials). I'm already using fieldset to create logical groupings of fields in a form, but I could always use two different classes if it's more semantically correct than div. The ul approach seems to be common by weird... the outer fieldset groups multiple fields, why do I need a ul that also groups them?
I really like the simplicity of the markup in this design: http://woork.blogspot.com/2008/06/clean-and-pure-css-form-design.html. But I'm having difficultly adapting the CSS to handle more complex fields, e.g. a select and input that logically belong together.
So in this example, what (if anything) to I wrap around field #1 and field #2 below?
<form .....>
<fieldset> <legend>Group 1</legend>
<!-- 'field #1' -->
<label for="newName">Name</label>
<input type="text" id="newName">
<!-- oldVal Filled in with Javascript or server-side script -->
<span class="oldVal" id="oldName">Old Name</span>
<!-- 'field #2' -->
<label for="newFood">Favorite Food</label>
<select id="newFood">
<option value="pizza">Pizza</option>
<option value="tacos">Tacos</option>
<option value="other">Other</option>
</select>
<input type="text" id="newFoodOther"> <!-- type here when 'other' is selected -->
<span class="oldVal" id="oldFood">Pizza</span>
</fieldset>
<fieldset> <legend> Group 2</legend>
<!-- more fields here -->
</fieldset>
</form>
What's the easiest to use for controlling the form layout, and what's the most semantically correct? And am I fortunate enough to have those be one and the same?
There is no single correct way to semantically mark up a form. Some methods are more flexible than others, but that doesn't mean you should choose them all the time. Sometimes a bit of quick markup is best.
For flexibility, I typically use a structure as follows:
<form>
<fieldset>
<legend></legend> <!-- optional -->
<label>
<span>Label Text</span>
<input type="..." />
</label>
<!-- repeat -->
<input type="submit" ... />
</fieldset>
</form>
Alternatively to help style with CSS I might use multiple labels:
<form>
<fieldset>
<label for="some-id-0">Label Text</label>
<label class="text-label">
<input type="text" id="some-id-0" />
</label>
<label for="some-id-1">Label Text</label>
<label class="password-label">
<input type="password" id="some-id-1" />
</label>
</fieldset>
</form>
But then I could separate this out into a list:
<form>
<fieldset>
<dl>
<dt>
<label for="some-id-0">Label Text</label>
</dt>
<dd>
<label class="text-label">
<input type="text" id="some-id-0" />
</label>
</dd>
<dt>
<label for="some-id-1">Label Text</label>
</dt>
<dd>
<label class="password-label">
<input type="password" id="some-id-1" />
</label>
</dd>
</dl>
</fieldset>
</form>
I find that adding more generic structural elements and classes tends to add flexibility to a certain degree, however you wont need any of that structure if you simply want a mad-lib form:
<form>
<p>
Hi, my
<label for="fullName">name</label>
is
<input type="text" id="fullName" name="fullName" placeholder="Full name" />
and I would like to request a copy of
<select id="publication" name="publication">
<option>Super Awesome Newsletter</option>
<option>Even more awesome-er newsletter</option>
<option>Lorem Ipsum weekly</option>
</select>
please send it to
<input type="temail" id="email" name="email" placeholder="email#example.com" />
</p>
<input type="submit" value="Thank you!" />
</form>
In the end the semantics revolve around how you want the form read. Unfortunately that means restructuring the form if significant changes are made.
"Semantically correct" applies to the HTML, not the CSS, and I'd say you already have that covered.
There's an infinite number of ways to style the form, of course, but one thing you can do without adding any extra markup is to make the labels into one "column" and the inputs into another:
label {
display: block;
float: left;
clear: left;
width: 150px;
}
input, select {
display: block;
float: left;
width: 150px;
}
http://jsfiddle.net/mblase75/ECmwH/
This leaves the problem of where to display your "oldVal" fields, but I think that's a matter of opinion.
What is considered the best practice for laying out forms in html? Specifically where you have a set of fields with labels, and possible error indicators. The best I can do is use a table, but that doesn't work real well in a css oriented layout design. For example:
<table>
<tr>
<td>Name:</td>
<td><input type="text" /></td>
<td style="display: none" id="NameError">*</td>
</tr>
<tr>
<td>Phone:</td>
<td><input type="text" /></td>
<td style="display: none" id="PhoneError">*</td>
</tr>
<tr>
<td>Birthday:</td>
<td><input type="text" /></td>
<td style="display: none" id="BirthdayError">*</td>
</tr>
</table>
This doesn't seem very CSS, but I am not sure how to use a css oriented layout to make this work right.
What would be considered best practice?
I don't know about you guys, but I don't use much markup for form layout.
Here is the markup for a simple log in form (no layout markup i.e. divs, tables, etc)
<form method="post">
<label>Username</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<input type="submit" name="Log In" />
</form>
Here is CSS for the form
label,input{float:left}
label,input[type="submit"]{clear:left}
Here is the result
The amazing thing about this is:
Lack of markup
Lack of CSS
Flexibility
If you look at the css, the label element is being cleared left (and floated left). Meaning that the label will float with its fellow inputs however every label will be a new line.
This makes it VERY EASY to add extra inputs. Even validation messages after inputs
Take this form for example
<form method="post">
<label>Name</label>
<input type="text" name="username" />
<label>Password</label>
<input type="password" name="password" />
<label><abbr title="Date of Birth">D.O.B.</abbr></label>
<input type="text" name="dob_day" />
<input type="text" name="dob_month" />
<input type="text" name="dob_year" />
<input type="submit" name="Log In" />
</form>
With this CSS
label,input{float:left}
label,input[type="submit"]{clear:left}
input[name^="dob_"]{width:44px;margin:2px}
label{width:70px}
We get
It really is that simple :)
Using this concept, you create a huge number of possibilities, and you'll never have to use a table for layout again!
Use actual <label> elements for field labels, which is good for usability too, and style them appropriately using CSS.
For instance,
<label for="name">Name</label>
<input type="text" name="name">
Then in your CSS, you could style LABEL elements with, e.g., display:block and a width of your desire, and appropriate clear values.
For tickbox / radio inputs, the input itself should be inside the <label> element - this means that the label itself should be clickable to select that input, for instance:
<label for="mycheckbox">
<input type="checkbox" name="mycheckbox"> Tick me if you dare</label>
One can argue a form is tabular data, so a table is acceptable. As David states, they main issue is that you want to use proper LABEL tags.
In your example, I'm not sure what you gain from using a table over CSS, though.
Best Practice = NEVER use table for layout.
You can try CSS framework like blueprint our 960 grid system.
"Best Practice" would be to use a table for what it's meant to do (represent data) and use a combination of div, span or other elements to style your input form.
Posting my answer to your follow up question here as it is likely to get closed as a duplicate.
I'm not sure how good the browser support on this is, tested in FF4: http://jsfiddle.net/shanethehat/7h3bC/11/
<div id="tableForm">
<div class="tableRow">
<div class="tableCell">
<label for="mycheckbox"> Tick me if you dare</label>
</div>
<div class="tableCell">
<input type="checkbox" name="mycheckbox" id="mycheckbox">
</div>
</div>
<div class="tableRow">
<div class="tableCell">
<label for="mytext"> Give me some text test test</label>
</div>
<div class="tableCell">
<input type="text" name="mytext" id="mytext">
</div>
</div>
</div>
div#tableForm {
display:table;
}
div.tableRow {
display:table-row;
}
div.tableCell {
display:table-cell;
width:inherit;
}
Yes, I know, I've just created a table using divs. The point though is that this is nicely accessible and semantically proper.
Edit: fails miserably in IE7 where fixed width would be the only way, but 8 and 9 seem OK.
Edit2: switched the label/fields around and set right align: http://jsfiddle.net/shanethehat/7h3bC/12/. The markup is getting a little class heavy at this point. :first-child would be an alternative to using the left class, but at the expense of IE8.