Just wondering how people in here code their forms using XHTML and CSS? More precisely, how they position the different labels to their form elements? What about 2 to 3 column forms? I'm thinking it might be a daunting task programming forms with alot of form fields in them...I'd suggest reading through this thread (<!-- m --><a class="postlink" href="http://www.codingforums.com/showthread.php?s=&threadid=30718">http://www.codingforums.com/showthread. ... adid=30718</a><!-- m -->). The web is small since I know some of the members there from other forums.
I'd use <label> and <legend> in general.I have designed 4 column forms with css and with tables in xhtml.
Which is correct? Both in my view.
There is too much hype about the misuse of tables:
You can change an element into another <div style="display:table;"></div> a table or a div?
Or wil css3 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/css3-multicol/">http://www.w3.org/TR/css3-multicol/</a><!-- m -->) be the answer with the advent of columns (aka tables)?Thanks for the info. I've been tinkering all afternoon with this and I can't seem to access anything thru CSS...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="css">
/*First form*/
test#personal_information{
background-color: blue;
width: 300px;
}
#personal_information{
font-family: arial;
font-size: 80%;
}
form#test label{
font-family: arial;
}
/*second form*/
form#test2 label{
background-color: blue;
font-family: arial;
}
</style>
</head>
<body>
<form id="test" action="file.cfm" method="post">
<fieldset id="personal_information">
<legend>Personal Information</legend>
<label for="fname">First Name: <input name="fname" id="fname" type="text"/></label>
<label for="lname">Last Name: <input name="lname" id="lname" type="text"/></label>
<label for="address">Address: <input name="address" id="address" type="text"/></label>
<input type="submit"/>
</fieldset>
</form>
<br/>
<form id="test2" action="file2.cfm" method="post">
<label for="bname">Bank Name: <input name="bname" id="bname" type="text"/></label>
<input type="submit"/>
</form>
</body>
</html>Got it... it seems its supposed to be "text/css" as the type of style...
ie. <style type="css"> -> <style type="text/css">
I'd use <label> and <legend> in general.I have designed 4 column forms with css and with tables in xhtml.
Which is correct? Both in my view.
There is too much hype about the misuse of tables:
You can change an element into another <div style="display:table;"></div> a table or a div?
Or wil css3 (<!-- m --><a class="postlink" href="http://www.w3.org/TR/css3-multicol/">http://www.w3.org/TR/css3-multicol/</a><!-- m -->) be the answer with the advent of columns (aka tables)?Thanks for the info. I've been tinkering all afternoon with this and I can't seem to access anything thru CSS...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled</title>
<style type="css">
/*First form*/
test#personal_information{
background-color: blue;
width: 300px;
}
#personal_information{
font-family: arial;
font-size: 80%;
}
form#test label{
font-family: arial;
}
/*second form*/
form#test2 label{
background-color: blue;
font-family: arial;
}
</style>
</head>
<body>
<form id="test" action="file.cfm" method="post">
<fieldset id="personal_information">
<legend>Personal Information</legend>
<label for="fname">First Name: <input name="fname" id="fname" type="text"/></label>
<label for="lname">Last Name: <input name="lname" id="lname" type="text"/></label>
<label for="address">Address: <input name="address" id="address" type="text"/></label>
<input type="submit"/>
</fieldset>
</form>
<br/>
<form id="test2" action="file2.cfm" method="post">
<label for="bname">Bank Name: <input name="bname" id="bname" type="text"/></label>
<input type="submit"/>
</form>
</body>
</html>Got it... it seems its supposed to be "text/css" as the type of style...
ie. <style type="css"> -> <style type="text/css">