•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 456,515 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,766 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 854 | Replies: 5
![]() |
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Well...
Use the <fieldset> tag to collect related parts of the form together (if a large form).
Apply <legend> to help indicate what the form pertains to.
Ensure all Inputs have a <label> tag.
Also ensure all Labels/Inputs have unique IDs.
The label should go first for most inputs, (text, text area etc.), and last for things like Checkbox lists, radio groups etc.
Use the font-size tag for the Label/Inputs, using % or EM units.
Apply styling for :focus for inputs so that users can see which form element that are currently in (such as changing the BG colour or altering the Border Colour etc.).
(NOTE: doesn't work on IE6.)
Consider applying a little JS to enhance usability (autofocus the first part of a form and enable IE6 to use the :focus).
-------
If it helps....
Use the <fieldset> tag to collect related parts of the form together (if a large form).
Apply <legend> to help indicate what the form pertains to.
Ensure all Inputs have a <label> tag.
Also ensure all Labels/Inputs have unique IDs.
The label should go first for most inputs, (text, text area etc.), and last for things like Checkbox lists, radio groups etc.
Use the font-size tag for the Label/Inputs, using % or EM units.
Apply styling for :focus for inputs so that users can see which form element that are currently in (such as changing the BG colour or altering the Border Colour etc.).
(NOTE: doesn't work on IE6.)
Consider applying a little JS to enhance usability (autofocus the first part of a form and enable IE6 to use the :focus).
-------
If it helps....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
<title>Center Block Element 2</title>
<style type="text/css">
html
{
margin: 0;
padding: 0;
font-size: 100%;
font-family: trebuchet, arial, sans-serif;
}
body
{
margin: 0;
padding: 10px;
font-size: 62.5%;
}
form
{
margin: 0;
padding: 0;
width: 500px;
}
fieldset
{
margin: 0;
padding: 10px;
border: 1px solid #d6d6d6;
display: block;
}
legend
{
margin: 0 0 15px 0;
padding: 4px 8px;
border: 0px solid #d6d6d6;
font-weight: bold;
font-size: 1.6em;
background-color: #000000;
color: #ffffff;
}
.formelementwrappersingle
{
margin: 2px;
padding: 0;
float: left;
clear: both;
width: 40em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoubleinline
{
margin: 2px;
padding: 0;
float:left;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
.formelementwrapperdoublebreak
{
margin: 2px;
padding: 0;
float:left;
clear: both;
width: 19em;
border: 1px solid #c2c2c2;
background-color: #f6f6f6;
}
label
{
margin: 0;
padding: 3px;
font-weight: bold;
display: block;
width: 15em;
float: left;
font-size: 1.2em;
}
input.textinput, textarea.textarea
{
background-color: #ffff99;
font-size: 1.4em;
border: 1px solid #c2c2c2;
}
input.textinput:focus, textarea.textarea:focus
{
background-color: #ffffff;
font-size: 1.4em;
border: 1px solid #d6d6d6;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Test Form 1</legend>
<div class="formelementwrappersingle">
<label for="name">
Name
</label>
<input id="name" name="name" type="text" class="textinput" />
</div>
<div class="formelementwrappersingle">
<label for="description">
Description
</label>
<textarea id="description" name="description" class="textarea"></textarea>
</div>
</fieldset>
<fieldset>
<legend>Test Form 2</legend>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_0">
<input type="radio" name="colourchoice" id="colourchoice_0" title="Red" class="radioinput" checked="checked" />
Red
</label>
</div>
<div class="formelementwrapperdoubleinline">
<label for="colourchoice_1">
<input type="radio" name="colourchoice" id="colourchoice_1" title="Blue" class="radioinput" />
Blue
</label>
</div>
</fieldset>
<fieldset>
<legend>Test Form 3</legend>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_0">
<input type="radio" name="animalchoice" id="animalchoice_0" title="Cat" class="radioinput" checked="checked" />
Cat
</label>
</div>
<div class="formelementwrapperdoublebreak">
<label for="animalchoice_1">
<input type="radio" name="animalchoice" id="animalchoice_1" title="Dog" class="radioinput" />
Blue
</label>
</div>
</fieldset>
</form>
</body>
</html> Last edited by autocrat : Sep 30th, 2007 at 12:33 pm. Reason: Code
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Not a problem - let me know if you want any extra help with it (Forms can be a sod sometimes (esp. if you don't do them that often!)
Sometimes life holds wonderful suprises - shame I sleep through them all.
http://www.choose-easyweb.com - Not my design, nor my idea :)
http://www.choose-easyweb.com - Not my design, nor my idea :)
Tables are not deprecated. They are just discouraged for use to format pages for purposes other than tables.
If the form is like an invoice form (with several blanks on each line), there is no reason why you shouldn't use a table to contain it.
Also, the alternate methods the W3C prefers don't always work, don't work inside some other tags, and fall apart if the browser window is reduced in size. So, if you can't get it to work, don't waste hours on it; just use a table instead.
If the form is like an invoice form (with several blanks on each line), there is no reason why you shouldn't use a table to contain it.
Also, the alternate methods the W3C prefers don't always work, don't work inside some other tags, and fall apart if the browser window is reduced in size. So, if you can't get it to work, don't waste hours on it; just use a table instead.
Daylight-saving time uses more gasoline
![]() |
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
advertising blog browser browsing code community css data design development devices div domains dreamweaver firefox google holiday html india internet java legal linux marketing microsoft mobile applications mozilla multimedia news php privacy report research search security software standards sun symantec tables users video w3c web web development wysiwyg xml yahoo youtube
- How can show/view Infopath dynamic files(xml) without infopath in a computer (XML, XSLT and XPATH)
- CSS/PHP Web Developer Needed (Web Development Job Offers)
- Looking for web designer (Web Development Job Offers)
- Opinions? javascript/php/etc and programming standards (JavaScript / DHTML / AJAX)
- Web programmers making more then software programmers? (Web Developers' Lounge)
- where to use two forms in one page.. (JSP)
- Myhomehost (Web Hosting Company Web site) Review (Website Reviews)
- Internet Explorer or Firefox (Web Browsers)
- When a host says "included scripts" (Networking Hardware Configuration)
- www.gthelp.com (Website Reviews)
Other Threads in the HTML and CSS Forum
- Previous Thread: Anchor tag and layers???
- Next Thread: Wordpress plugin problem



Linear Mode