Hi,
please go to
<!-- m --><a class="postlink" href="http://www.privatedemo.apc-compunet.co.uk/webdev/1/reg_02.php">http://www.privatedemo.apc-compunet.co. ... reg_02.php</a><!-- m -->
I have currently done this via tables, now I know tables is bad practive and I am gettin my head around css design.
Should a layout like this be done in a table as I cant quite understand how I would get the same outcome with css.
Thanks
Adamhi, try this a bit :
i cant write everything so a created the base structure, but it should be easy to do the rest.
<html>
<head>
<title>Shop Login HTML</title>
<style type="text/css">
body{
background-color: #ffcc99;
}
div#container{
width: 450px;
margin: auto;
background-color: #fff;
}
fieldset{
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<fieldset id="pinfo">
<legend>Profile Information</legend>
<label for="salutation">Salutation</label>
<select name="salutation">
<option value="Mr" >Mr</option>
<option value="Miss" >Miss</option>
<option value="Mrs" >Mrs</option>
<option value="Ms" >Ms</option>
<option value="Dr" >Dr</option>
</select>
</fieldset>
<fieldset id="ainfo">
<legend>Account Information</legend>
</fieldset>
</div>
</body>
</html>so in pseudo-code u basically have this
{DIV}
{FIELDSET}
{LEGEND}{/LEGEND}
{LABEL}
{INPUT /}
{FIELDSET}
...
{/DIV}
so: dont put width etc...infos in the tags,
in the label for="" attribute should be the name of the tag that it labels.
legend are optional, but u can do cool things with em
and fieldsets are there for grouping forms.
aite, good nite!Just to expand on what Lil... was describing, here's a short proof-of-concept example I was playing with the other day:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Form Test</title>
<style type="text/css">
body {
margin: 0;
padding: 2em;
font-family: arial, sans-serif;
background-color: silver;
}
div {
width: 26em;
margin: auto;
padding: 1em;
border: solid thin black;
background-color: white;
}
fieldset {
display: block;
padding: 0.5em 1em;
border: solid black thin;
}
legend {
font-weight: bold;
}
label {
float: left;
width: 8em;
}
.form {
margin: 0;
padding: 0.2em 0 0.1em 0;
}
</style>
</head>
<body>
<div>
<form action="..." method="post">
<fieldset>
<legend>Personal Information</legend>
<p class=form>
<label>Last Name:</label>
<input name="personal_lastname" type="text" tabindex="1" size=20 maxlength=40>
</p>
<p class=form>
<label>First Name:</label>
<input name="personal_firstname" type="text" tabindex="2" size=20 maxlength=40>
</p>
<p class=form>
<label>Address:</label>
<input name="personal_address" type="text" tabindex="3" size=30 maxlength=60>
</p>
</fieldset>
<fieldset>
<legend>Medical History</legend>
<p class=form>Select all that apply:</p>
<p class=form>
<input name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<input name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps
<input name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness
<input name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
</p>
</fieldset>
</form>
</div>
</body>
</html>Hi
Ok thanks for the fast replies,
Ok your design Nog Dog is very nice, for something like this though, is tables plausable.
Why would you need to use CSS for the design of something like this surly it would be alot easier using tables.
CSS is gr8 dont get me wrong but i think i am starting to forget about why tables are there?
I need to know really where and where not to use them as
admitingly i used to design in tables
thanks
k0r54I pondered this recently (<!-- m --><a class="postlink" href="http://www.cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms">http://www.cmmwebdesign.com/blog/chroni ... your-forms</a><!-- m -->) - maybe my experience will be helpful to you. I plan on writing a fairly lengthy article on this in the near future.Hi
Ok firstly Jona, very nice site.
Secondly ???? im still confussed, to me it would be classed as tabular data, as you say, once it is filled in then it is.
BUT! is it really worth all the messing about, the code length is pratcily the same, no doubt about it and to be honest it is (for me) much easier to manipulate the table to how i like it using css and it keeps the form elements in place.
I really cant see any difference between the both, code or display wise.
So therefore i am still at the first question of what to do lol
Thanks
k0r54Basically, it turns out that your forms aren't tabular. If they were, the W3C would not have created the label, fieldset and legend tags. They simply would have included some sort of attribute in TD cells much like the FOR attribute of the LABEL tag. This attribute, however, does not exist in TD cells and so it is apparent that the W3C did not have tables in mind for formatting forms. From that I conclude that forms should be lain out via CSS, since they really aren't tabular data. It would be beneficial for you to learn CSS now anyway, since procrastionation will be of no help, and you'll most likely be convinced to do so in the future. Why do the same job twice, when all it takes is doing it right the first time?
Hi,
CSS it is lol, i know CSS have done a few sites in it now (only basic mind) but i am gettin to grips with it.
Well thanks for all your help.
Im quite glad i started a decent discussion
Thanks again
k0r54As am I. You re-introduced something that had fallen behind on my quite lengthy "to-do" list concerning writing material.
Good luck!To my mind the code looks a little cleaner and a little more "semantically meaningful" using the form/fieldset/legend/input method styled with CSS; but to be honest, I ain't gonna lose any sleep over it if you decide to stick with tables.LOL!
Yeah, tbh me neither but i did want to know what was right and wrong!
Thanks
k0r54
please go to
<!-- m --><a class="postlink" href="http://www.privatedemo.apc-compunet.co.uk/webdev/1/reg_02.php">http://www.privatedemo.apc-compunet.co. ... reg_02.php</a><!-- m -->
I have currently done this via tables, now I know tables is bad practive and I am gettin my head around css design.
Should a layout like this be done in a table as I cant quite understand how I would get the same outcome with css.
Thanks
Adamhi, try this a bit :
i cant write everything so a created the base structure, but it should be easy to do the rest.
<html>
<head>
<title>Shop Login HTML</title>
<style type="text/css">
body{
background-color: #ffcc99;
}
div#container{
width: 450px;
margin: auto;
background-color: #fff;
}
fieldset{
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="container">
<fieldset id="pinfo">
<legend>Profile Information</legend>
<label for="salutation">Salutation</label>
<select name="salutation">
<option value="Mr" >Mr</option>
<option value="Miss" >Miss</option>
<option value="Mrs" >Mrs</option>
<option value="Ms" >Ms</option>
<option value="Dr" >Dr</option>
</select>
</fieldset>
<fieldset id="ainfo">
<legend>Account Information</legend>
</fieldset>
</div>
</body>
</html>so in pseudo-code u basically have this
{DIV}
{FIELDSET}
{LEGEND}{/LEGEND}
{LABEL}
{INPUT /}
{FIELDSET}
...
{/DIV}
so: dont put width etc...infos in the tags,
in the label for="" attribute should be the name of the tag that it labels.
legend are optional, but u can do cool things with em
and fieldsets are there for grouping forms.
aite, good nite!Just to expand on what Lil... was describing, here's a short proof-of-concept example I was playing with the other day:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Form Test</title>
<style type="text/css">
body {
margin: 0;
padding: 2em;
font-family: arial, sans-serif;
background-color: silver;
}
div {
width: 26em;
margin: auto;
padding: 1em;
border: solid thin black;
background-color: white;
}
fieldset {
display: block;
padding: 0.5em 1em;
border: solid black thin;
}
legend {
font-weight: bold;
}
label {
float: left;
width: 8em;
}
.form {
margin: 0;
padding: 0.2em 0 0.1em 0;
}
</style>
</head>
<body>
<div>
<form action="..." method="post">
<fieldset>
<legend>Personal Information</legend>
<p class=form>
<label>Last Name:</label>
<input name="personal_lastname" type="text" tabindex="1" size=20 maxlength=40>
</p>
<p class=form>
<label>First Name:</label>
<input name="personal_firstname" type="text" tabindex="2" size=20 maxlength=40>
</p>
<p class=form>
<label>Address:</label>
<input name="personal_address" type="text" tabindex="3" size=30 maxlength=60>
</p>
</fieldset>
<fieldset>
<legend>Medical History</legend>
<p class=form>Select all that apply:</p>
<p class=form>
<input name="history_illness"
type="checkbox"
value="Smallpox" tabindex="20"> Smallpox
<input name="history_illness"
type="checkbox"
value="Mumps" tabindex="21"> Mumps
<input name="history_illness"
type="checkbox"
value="Dizziness" tabindex="22"> Dizziness
<input name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
</p>
</fieldset>
</form>
</div>
</body>
</html>Hi
Ok thanks for the fast replies,
Ok your design Nog Dog is very nice, for something like this though, is tables plausable.
Why would you need to use CSS for the design of something like this surly it would be alot easier using tables.
CSS is gr8 dont get me wrong but i think i am starting to forget about why tables are there?
I need to know really where and where not to use them as
admitingly i used to design in tables thanks
k0r54I pondered this recently (<!-- m --><a class="postlink" href="http://www.cmmwebdesign.com/blog/chronicles/2004/12/12/displaying-your-forms">http://www.cmmwebdesign.com/blog/chroni ... your-forms</a><!-- m -->) - maybe my experience will be helpful to you. I plan on writing a fairly lengthy article on this in the near future.Hi
Ok firstly Jona, very nice site.
Secondly ???? im still confussed, to me it would be classed as tabular data, as you say, once it is filled in then it is.
BUT! is it really worth all the messing about, the code length is pratcily the same, no doubt about it and to be honest it is (for me) much easier to manipulate the table to how i like it using css and it keeps the form elements in place.
I really cant see any difference between the both, code or display wise.
So therefore i am still at the first question of what to do lol
Thanks
k0r54Basically, it turns out that your forms aren't tabular. If they were, the W3C would not have created the label, fieldset and legend tags. They simply would have included some sort of attribute in TD cells much like the FOR attribute of the LABEL tag. This attribute, however, does not exist in TD cells and so it is apparent that the W3C did not have tables in mind for formatting forms. From that I conclude that forms should be lain out via CSS, since they really aren't tabular data. It would be beneficial for you to learn CSS now anyway, since procrastionation will be of no help, and you'll most likely be convinced to do so in the future. Why do the same job twice, when all it takes is doing it right the first time?
Hi,CSS it is lol, i know CSS have done a few sites in it now (only basic mind) but i am gettin to grips with it.
Well thanks for all your help.
Im quite glad i started a decent discussion
Thanks again
k0r54As am I. You re-introduced something that had fallen behind on my quite lengthy "to-do" list concerning writing material.
Good luck!To my mind the code looks a little cleaner and a little more "semantically meaningful" using the form/fieldset/legend/input method styled with CSS; but to be honest, I ain't gonna lose any sleep over it if you decide to stick with tables.LOL!Yeah, tbh me neither but i did want to know what was right and wrong!
Thanks
k0r54