I've got a form laid out using the css below. Mostly it works well, but whenever there are two input fields with the <label> tags I cannot click to select the second field.
If you click the 1st input field it's fine. If you click into the 2nd input field it automatically jumps focus back to the first one.
However, you can tab between the two successfully.
div.largeblock{
margin:5px 0px 20px 0px;
background:#d7e5f2;
border:1px solid #d7e5f2;
}
div.largeblock label{
display:block;
margin-bottom:5px;
}
div.largeblock label span{
display:block;
float:left;
margin-right:6px;
width:130px;
text-align:right;
}
<label>
<span>Postcode</span>
<input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</label>
I have the same problem where I have a <select> & <input> within 1 label. But for the other 20 or so lines with just 1 <input> it's fine.
When you click on a label, the behaviour in most browsers is to give focus (or check in the case of a checkbox) to the related input.
You need to move the second input tag out of the label tag. Probably into it's own.
A label element should refer to a single input element, using the for attribute that should have the same value as the id of the input element it refers to. Otherwise it won't behave predictably, like in your example where the label focuses the first input, which doesn't make any sense in your example. If you are grouping form elements you should use the element fieldset (which can be styled with css to look like a label).
The correct syntax would be:
<label for="postcode1">Postcode 1</label>
<input type="text" id="postcode1" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<label for ="postcode2">Postcode 2</label>
<input type="text" id="postcode2" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
Or if you want to use fieldset:
<fieldset>
<legend>Postcode</legend>
<input type="text" maxlength="4" name="postcode1" required="required" placeholder="Post" />
<input type="text" maxlength="3" name="postcode2" required="required" placeholder="Code"/>
</fieldset>
Related
This is the code in my html file, I use CSS to make it look like an application form. I had to erase some of the tags so it would display all of the html code I typed in here.
<label>Member</label>
<input type="radio" name="Answer" value="Yes"/>Yes<br/>
<input type="radio" name="Answer" value="No"/>No<br/>
<label>MemberID:</label> input type="text" name="MemberID" size="30" /><br/>
<label>Password:</label> input type="text" name="Password" size="25"/><br/>
I want the labels 'MemberID' and 'Password' and their corresponding "text"-inputs to be hidden when the radio button 'no' is enabled. Does anyone know what solutions there are for this problem? It would be of great help!
You would have to change the order of the input and label
<input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" />
<label for="radio-choice-1">Choice 1</label>
Then your css would be
input[type="radio"]:checked+label {....}
Check out this question:
CSS selector for a checked radio button's label
input[type="radio"]:checked+label{ /*styles*/ }
How do I correct the following E-mail textbox alignment: ?
To make it look like this:
I know I can use tables, but how do I solve this problem without using tables? CSS maybe?
HTML:
<form action="" name="contactform" method="post">
<p></p>
First name: <input type="text" class="contact" name="contactfirstname" value="">
<br/>
Last name: <input type="text" class="contact" name="contactlastname" value="">
<br/>
E-mail: <input type="text" class="contact" name="email" value="">
<p></p>
The most minimalized version I could think of...
<form>
<label>First Name: <input type="text" name="firstName"></label>
<label>Last Name: <input type="text" name="lastName"></label>
<label>Email Address: <input type="email" name="emailAddress"></label>
</form>
and
form {
width: 300px;
}
label {
display: block;
margin: 5px;
padding: 5px;
clear: both;
}
label input {
float: right;
}
Since OP has edited his question to include his markup, I'll expand the answer.
Some Points of Improvement:
Remove the empty <p> element, and the <br/> elements. They have no value inside a form.
Use <label>s, that's what they were made for. You can wrap the label and the input inside of the <label> tag, or you can use <label for="element_id">Label</label><input id="element_id">.
Be consistent. If you decided to go with the <br /> type of format for singular tags, stick with it to the <input />s as well.
Use correct input types for specific inputs, there is type="email" for the email field, which will optionally have the browser check for you if it's a valid email address or not!.
Use CSS for design and layout, not <p>s and <br>s.
Good luck!
I'm assuming your HTML is something like:
<p>
Email
<input />
</p>
Change this to:
<p>
<label>Email</label>
<input />
</p>
This means you can then apply a fixed width to all your labels, making them consistent:
label
{
width:100px;
float:left;
}
http://jsfiddle.net/zvWqk/1/
Or as #Zeta has pointed out, nest your input inside the label, and float right. This will prevent you needing to apply a for attribute to your label.
http://jsfiddle.net/tt8gx/
Use CSS to make the labels display as block elements and have a fixed width. Display the inputs as block elements and float them left. Put a clear:left on the labels so they'll each be on a new line.
The following code should allow me to have the label and input field sitting one next to each other.
Any idea what the problem is?
.form{
width:500px;
float:left;
padding:20px 50px;
background-color:orange;
}
label.form{
float:left;
clear:left;
margin-bottom:8px;
}
input.input{
width:400px;
padding:5px 20px;
margin-bottom:8px;
background:#F7F7F7;
border-width:1px;
border-style:solid;
border-color:#333333;
}
<div class="form">
<form action="process.php" method="post">
<label class="form">Name</label><input type="text" name="name" class="input" />
<label class="form">Position</label><input type="text" name="position" class="input" />
<label class="form">Company</label><input type="text" name="company" class="input" />
<label class="form">Address</label><input type="text" name="address1" class="input" />
<label class="form">Town/ City</label><input type="text" name="town" class="input" />
<label class="form">Postcode</label><input type="text" name="postcode" class="input" />
<label class="form">Contact No.</label><input type="text" name="phone" class="input" />
<input type="submit" name ="getcatalogue" class="button" value="Request Catalogue"/>
</form>
</div>
For some reason, the label is sitting above each field?
Any help would be massively appreciated!
Thanks
It’s because the label elements, being in class form, have 50px padding on left and right, making the total width so large that the input element does not fit on its right size, within the width of 500px set for the form.
It’s easy to get confused if you use the same class name for essentially different elements, as here (form and label). The label elements hardly need a class, since they can be referred to using suitable contextual selectors, using their ancestor’s class.
A much better design would use a table with labels in one column, input fields in the other, first without any width settings, then perhaps tuned if needed.
why can't one set a style like the font size in an input tag, e.g.
<input style="font-size:20px" type="radio" name="a" value="a">some text</input>
Shouldn't the font attributes apply?
Secondly, what is the best way to do this then?
Thanks
I think that it's because the CSS you're setting applies to the 'inner' tag of that input.
The thing you want styled is its Value, so you need to wrap your input inside a placeholder and style that.
For example:
<span style="font-size:40px">
<input type="radio" name="a" value="a">some text
<input type="radio" name="a" value="b">some text
</span>
Works as expected.
There's not a lot you can do to style a radio button, however:
<input type="radio" name="radiogroup" id="radio-1">
<label for="radio-1">Radio button 1</label>
you can style the label...
The best way to go about this is providing the style deceleration within an external stylesheet, or perhaps at the top of the document. Inline styles are typically what you want to avoid if at all possible, as it becomes confusing for later changes and can cause really dirty specificity issues.
An example of a fix:
HTMl (example)
<div id="form">
<input type="text" name="name" value="a" />
</div>
CSS (example)
#form input {
font-size: 20px;
}
Hope this helps.
Try the following:
<input type="radio" name="a" value="a"><span style="font-size: 50px;">some text</span></input>
If you wrap the text with a span\p tag you will be able to style the inner text of that tag.
I know this question already has an accepted answer, but I figure it's worth mentioning this:
It may be better to either associate a <label> tag with each radio input (using the for attribute of the label) or wrapping each radio input with a label tag. This lets your user click on the text to select the radio input instead of having to aim for a rather small circle.
So your markup looks like so:
<input type="radio" id="radio1" name="radios" value="something 1" />
<label for="radio1">Something 1</label>
<input type="radio" id="radio2" name="radios" value="something 2" />
<label for="radio2">Something 2</label>
<input type="radio" id="radio3" name="radios" value="something 3" />
<label for="radio3">Something 3</label>
Radio inputs are grouped into mutually exclusive selections by their name, which the group will share. The value specified in the for attribute of the label will match the id attribute of the radio input you want selected. So in the sample above, if you click on the text "Something 1", the radio input that is id'd as radio1 gets selected.
You can then style the text of the label to your heart's content.
This is in regards to the second part of your question,
"Secondly, what is the best way to do this then?"
#input {
background-color: black;
color: green;
text-align: center;
}
<input id="input" value="Value" />
I know it's bad to use HTML Tables for everything... and that tables should be used only to present tabular data and not to achieve some style goal.
My question is, how do you make HTML forms with CSS so they look nice and aligned like when using tables?
Nick Rigby wrote an excellent article for A List Apart titled Prettier Accessible Forms
Uses fieldset, legend, label. Highly semantic.
Take a look at the code used in wufoo forms, they use ul's to format the forms and they look really good.
http://wufoo.com/gallery/templates/
You can try and strip the form as far back as possible and make do with the <label> and various form input elements as needed with a lean on the clear:left; attribute in the CSS.
This would make sure each line starts anew without having to wrap each line of the form in an extra <div> or <p> or even making a list out of it.
.formlabel{
clear:left;
display:block;
float:left;
margin:0 0 1em 0;
padding:0 0.5em 0 0;
text-align:right;
width:8em;
}
.forminput{
float:left;
margin:0 0.5em 0.5em 0;
}
.formwarning{
clear:left;
float:left;
margin:0 0.5em 1em 0;
}
Here's a sample HTML form showing examples of various input types and an extra validation message that you can hide or style as needed:
<fieldset><legend>Details</legend>
<label for="name" class="formlabel">Name</label>
<input id="name" name="name" type="text" class="forminput" />
<div class="formwarning">Validation error message</div>
<label for="dob_year" class="formlabel">DOB</label>
<div class="forminput">
<input id="dob_year" name="dob_year" type="text" size="4" /> /
<input id="dob_month" name="dob_month" type="text" size="2" /> /
<input id="dob_day" name="dob_day" type="text" size="2" />
</div>
<label class="formlabel">Sex</label>
<label for="female" class="forminput">Female</label>
<input id="female" name="sex" type="radio" class="forminput" />
<label for="male" class="forminput">Male</label>
<input id="male" name="sex" type="radio" class="forminput" />
<label for="state" class="formlabel">State</label>
<select id="state" name="state" class="forminput">
<option>ACT</option>
<option>New South Wales</option>
<option>Northern Territory</option>
<option>Queensland</option>
<option>South Australia</option>
<option>Tasmania</option>
<option>Victoria</option>
<option>Western Australia</option>
</select>
<label for="deadseal" class="formlabel">Death certificate</label>
<input id="deadseal" name="deadseal" type="file" class="forminput" />
</fieldset>
In the above example, the DOB does have an extra <div> cluttering things up. You could get rid of it if you style up the date slashes as part of the :after pseudo-element where needed.
Turns out okay in Opera 11.60, Firefox 11, Google Chrome 18 and Internet Explorer 8.
I would lookup using the div tag to layout data on a page.
Tables are still very much useful for tabular data, but its frowned upon for laying out a page.
View source here on stackoverflow.com, there's probably some good examples.
Think about putting field names above the field, rather than beside. I find this works about the best.
HTML
<form>
<div id="personal_name">
<label>Name</label>
<input name="name" />
</div>
</form>
CSS
form
{display: table}
#personal_name
{display: table-row}
#personal_name input, #personal_name label
{display: table-cell}
I think this is enough.