Gathering of Tweakers

Quicksearch
Ik ben een tut aan het volgen over hoe je nette en accessible forms kan maken m.b.v. css.

http://www.sitepoint.com/article/fancy-form-design-css

Dit is goede duidelijke tutorial. Ze geven ook css-code mee om ervoor te zorgen dat IE het ook goed weergeeft. Maar toch kloppen een aantal dingen niet.

Ten eerste zet IE de labels+inputs allemaal wat verder naar rechts dan hoort, waardoor het lijkt alsof iemand er tabs voor heeft gezet ofzo en dat wil ik weg.
En ten tweede geven ze op de 6e pagina een code waarmee je sub-fieldsets in fieldsets kan zetten en ervoor zorgen dat het er goed uit ziet. In FF ziet het er ook perfect uit, maar in IE niet.

En voor beide van de bovenstaande problemen geven ze geen code mee om die te fixen in IE.
Of het kan natuurlijk weer een ontzettende domme fout van mij zijn weer, maar ik zit die al de afgelopen 3 uur te zoeken en ik kan hem niet vinden, dus ik denk ook niet dat ik hem nog ga vinden als die erin zit.

Dus ik vroeg mij af of iemand van jullie ook ooit die tut hebben gedaan en er wel uit kwamen, zoja, zou ik dan de css van het resultaat mogen zien?
Of vindt 1 van jullie die tut misschien sowieso wel interessant. Als jou het dan wel lukt, zou je mij dan misschien willen helpen?
Of als iemand een vergelijkbare manier om met css mooie forms te maken die ook mooi met required-sterretjes en error-messages werkt?

Bij voorbaat dank. :)

[edit]Ik bedacht me net te laat dat die titel eigenlijk niet goed is, veel te vaag, maar kan niet meer editten. Als een mod dat wil doen zou dat heel fijn zijn. :) Of als niemand er zich aan ergert dan maakt het niet uit.

Evertt wijzigde dit bericht 20-07-2008 22:29 (7%)

 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

quote:
Evertt schreef op zondag 20 juli 2008 @ 22:28:
[edit]Ik bedacht me net te laat dat die titel eigenlijk niet goed is, veel te vaag, maar kan niet meer editten. Als een mod dat wil doen zou dat heel fijn zijn. :) Of als niemand er zich aan ergert dan maakt het niet uit.
Doe dan even een voorstel voor een titel, liefst via een TR (http://tweakimg.net/g/forum/templates/tweakers/images/icons/icon_hand.gif). Wij gaan die niet voor je verzinnen ;)

Verder mis ik relevante code of een (proof-of-concept achtige) site waarin je het probleem toont; nu blijft het gissen naar de oorzaak. Ik vermoed echter dat je een doctype mist ;)

edit:
En het voorstel dat je zojuist indiende via een TR slaat ook als een tang op een varken; try again :P Lama, heb al wat voor je verzonnen voor deze ene keer... ;)

RobIII wijzigde dit bericht 20-07-2008 22:41 (38%)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

nope, doctype is not the problem. :)
Ik zal de code wel even online zetten.
Kan wel even duren, want ik heb ondertussen zoveel zitten rommelen in de code dat het niet meer hetzelfde is als wat er in de tut staat.

Lol, zag ik te laat. Dankje iig. :P
[edit] Het gaat ook om IE7 hè:P

Evertt wijzigde dit bericht 20-07-2008 22:43 (16%)

 
Ok, sorry dat het wat lang duurde:
*euh, liever niet*
Dat is de code letterlijk van de tutorial.

RobIII wijzigde dit bericht 21-07-2008 00:14 (26%)

 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

Dude! :X

http://tweakers.net/ext/f/7XTzXHhoZMiH8HYd4m2qjkaE/full.gif

....Euh, doe me een lol en maak er even een coherent ding van, er zijn nu 10(!!! :X ) css files met elk maar een paar regels code, 2 html's en een png in een zip op een host die stikt van de pop-ups/unders en andere meuk. Je kunt dit kleine beetje prima inline in je topic zetten m.b.v. code tags. Zorg dan meteen dat je enkel relevante(!!!) code post, strip alle overbodige meuk eruit. Hier heeft niemand zin in om in te gaan zitten graven en spitten, zeker niet als de pop-ups ons om de oren vliegen en we dik kans maken de verkeerde link aan te klikken en daarmee een bak malware danwel adware binnen te halen :X

Verder: heb je al eens gewoon alle margins en paddings nagelopen?

offtopic:
Verder had ik overigens liever een edit ( http://tweakimg.net/g/forum/templates/tweakers/images/icons/edit.gif ) gezien in plaats van een nieuwe post (i.v.m. topickick binnen 24 uur ), maar dat is je voor deze ene keer vergeven ;)

RobIII wijzigde dit bericht 21-07-2008 00:26 (15%)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

de reden dat er 10 css-bestanden zijn is omdat de tut dat ook doet. en ik dacht, ik neem de tut letterlijk over zodat dat fouten van mijn kant uitsluit.
Bovendien gaat het niet om code die fout is maar volgens mij om code die mist.
en ja ik heb geprobeert wat aan de margins en paddings te futselen, maar ik krijg het niet voor elkaar.
Dit is volgens mij de code waar het om gaat, de code die die lijst van checkboxes regelt:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
fieldset fieldset {  
margin-bottom: -2.5em;  
border-style: none;  
background-color: transparent;  
background-image: none;
}
fieldset fieldset legend {  
margin-left: 0;  
font-weight: normal;
font-style: none;
}
fieldset fieldset ol {  
position: relative;  
top: -1.5em;  
margin: 0 0 0 11em;  
padding: 0;
}
fieldset fieldset label {  
float: none;  
width: auto;  
margin-right: auto;
}

En voor IE:
code:
1
2
3
fieldset fieldset legend {  
top: 0;
}

en ik zal een andere host doen voor de upload:
http://home.planet.nl/~vanbr116/css%20forms.zip

Evertt wijzigde dit bericht 21-07-2008 00:29 (5%)

 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

Nu mis ik nog steeds gewoon een file of post met enkel relevante code. In je post hierboven ontbreekt de HTML en in de zipfile stikt het nog steeds van de CSS files waardoor het debuggen er niet makkelijker op wordt... Je moet je punt toch in een paar regels CSS en HTML duidelijk kunnen maken zonder daar een complete zipfile voor te hoeven posten :?

Als ik 2 minuten aan 't editen sla breng ik de (relevante!) HTML al terug tot:
XHTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <link href="style.css" rel="stylesheet" type="text/css" />
        
        <!--[if lte IE 7]>  
        <style type="text/css" media="all">  
        @import "style-ie.css";  
        </style>
        <![endif]-->

        <title>Form test</title>
    </head>
    
    <body>
        <div id="container">
            <form action="example.php">
                <fieldset>
                    <legend><span>Contact Details</span></legend>
                    <ol>
                        <li>
                            <label for="name">Name: <em>*</em></label>
                            <input id="name" name="name" class="text" type="text" />
                        </li>
                        
                        <li>
                            <label for="email">Email address: <strong>This must be a valid email address</strong></label>
                            <input id="email" name="email" class="text" type="text" />
                        </li>
                        
                        <li>
                            <label for="phone">Telephone:</label>
                            <input id="phone" name="phone" class="text" type="text" />
                        </li>
                    </ol>
                </fieldset>
            </form>
        </div>
    </body>
</html>

Voeg nu je CSS nog even samen en strip daar alles uit wat niets met het probleem te maken heeft en je bent al stukken beter te helpen.

Overigens ook even het lezen waard: RobIII in "[html/css] Div Layout"

[edit]
En na nog wat verder kijken... ik zie in de CSS op meerdere plaatsen dezelde dingen staan (fieldset li komt bijvoorbeeld al 3 keer voor). Nu is dat an sich geen probleem, maar het maakt het niet duidelijker....

RobIII wijzigde dit bericht 21-07-2008 00:52 (73%)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

De html is niet zo bijzonder, het zijn gewoon wat fieldsets en ordered lists met in elke li een label een en input.
En in form2.html staat in een fieldset een 2e fieldset wat de lijst met checkboxen weergeeft en die ziet er het foutste uit in IE en daar is dit de html van:

[code]<li>
<fieldset>
<legend><span>Occupation:</span></legend>

<ol>
<li>
<input id="occupation1" name="occupation1"
class="checkbox" type="checkbox" value="1" />
<label for="occupation1">Doctor</label>
</li>

<li>
<input id="occupation2" name="occupation2"
class="checkbox" type="checkbox" value="1" />
<label for="occupation2">Lawyer</label>
</li>

<li>
<input id="occupation3" name="occupation3"
class="checkbox" type="checkbox" value="1" />
<label for="occupation3">Teacher</label>
</li>

<li>
<input id="occupation4" name="occupation4"
class="checkbox" type="checkbox" value="1" />
<label for="occupation4">Web designer</label>
</li>
</ol>
</fieldset>
</li>[/code]


Voor de rest is het heel moeilijk om relevante code te geven omdat er, nogmaals, volgens mij geen specifieke fout is in de code. Alleen een missende aparte code voor IE omdat die dingen nou eenmaal anders weergeeft dan FF. Maar wàt er bij moet weet ik niet, want anders hoefde ik het niet te vragen.


[edit] Te laat, ik kijk wel of ik de css kan terugbrengen tot 1 bestand.
 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

Begin maar eens met je CSS op te schonen dan, want ik zie zo al op het fieldset element een paar keer een andere padding/margin staan...
quote:
Evertt schreef op maandag 21 juli 2008 @ 00:50:
[edit] Te laat, ik kijk wel of ik de css kan terugbrengen tot 1 bestand.
d:)b En zorg deze keer dat je enkel relevante CSS/HTML overhoudt die het probleem illustreert ;)

Anyhoe, ik ben naar bed :w

RobIII wijzigde dit bericht 21-07-2008 00:56 (54%)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

'k Heb de tut zelf even snel doorlezen en persoonlijk staat hij mij enorm aan. 'k Heb vaak met forms geworsteld om ze mooi met <label> en <li> enz in goede vorm te krijgen, wat niet echt altijd goed lukte, vermits de CSS ervaring toch nog niet van zo'n hoog niveau is als ik in deze tut lees.

Hoe dan ook denk ik wel dat het mogelijk moet zijn om de fouten eruit te krijgen. Kijk naar het voorbeeld dat men aanhaalt bij LinkedIn, als het daar werkt, moet het ook hier werken, 't zal alleen wat zoeken zijn.

Ik ga deze topic allesinds volgen!! Weet nog niet of ik de tijd zal hebben om zelf relevante oplossingen aan te bieden, but I'll try :)

Website : Webtrix
WhatPulse : Join het GoT Pulse-Team!

Foto materiaal:
Nikon D70s | Nikor AF-S DX 18-70mm | Nikon SB600

Dit duurt te lang, ik ga ook maar slapen. :P
Ik zal morgen zeker niet vroeg zijn dus de code zal waarschijnlijk laat in de middag komen. :)

[edit]@bovenstaande post: ik ben blij dat je hem net zo interessant vind als ik. :P

Evertt wijzigde dit bericht 21-07-2008 01:33 (23%)

 
quote:
imp4ct schreef op maandag 21 juli 2008 @ 01:11:
'k Heb de tut zelf even snel doorlezen en persoonlijk staat hij mij enorm aan. 'k Heb vaak met forms geworsteld om ze mooi met <label> en <li> enz in goede vorm te krijgen, wat niet echt altijd goed lukte, vermits de CSS ervaring toch nog niet van zo'n hoog niveau is als ik in deze tut lees.

Hoe dan ook denk ik wel dat het mogelijk moet zijn om de fouten eruit te krijgen. Kijk naar het voorbeeld dat men aanhaalt bij LinkedIn, als het daar werkt, moet het ook hier werken, 't zal alleen wat zoeken zijn.

Ik ga deze topic allesinds volgen!! Weet nog niet of ik de tijd zal hebben om zelf relevante oplossingen aan te bieden, but I'll try :)
Forms blijven een van de lastigere dingen imho en deze tutorial is een mooie samenvatting.

Ik twijfel alleen nog een beetje in semantisch opzicht aan het plaatsen van het formulier in een OL. Fout is het op zich natuurlijk niet, maar ik vind het niet compleet stroken met de invoermogelijkheden van het formulier en het feit dat formulieren al hun eigen specifieke mogelijkheden hebben voor de beschrijving (fieldset/labels). Het voelt een beetje overbodig.

Maar das wel erg puristisch geneuzel waarschijnlijk :P


KLIK HIER!!! >>> Mooie foto's van mijn vriendinnetje! <<< KLIK HIER!!!

quote:
Bosmonster schreef op maandag 21 juli 2008 @ 10:49:
[...]


Forms blijven een van de lastigere dingen imho en deze tutorial is een mooie samenvatting.

Ik twijfel alleen nog een beetje in semantisch opzicht aan het plaatsen van het formulier in een OL. Fout is het op zich natuurlijk niet, maar ik vind het niet compleet stroken met de invoermogelijkheden van het formulier en het feit dat formulieren al hun eigen specifieke mogelijkheden hebben voor de beschrijving (fieldset/labels). Het voelt een beetje overbodig.

Maar das wel erg puristisch geneuzel waarschijnlijk :P
Hmm, ik denk dat het hier wel symantisch klopt vermits hij de velden in fieldsets zet, dus zit er ergens een "logische" volgorde is, voorzover die logisch kan zijn natuurlijk.
't Feit blijft dat er voor symantisch coden de regels niet echt 100% duidelijk zijn, spijtig dat hier nog geen W3C validator voor bestaat :)

Website : Webtrix
WhatPulse : Join het GoT Pulse-Team!

Foto materiaal:
Nikon D70s | Nikor AF-S DX 18-70mm | Nikon SB600

Je zal het niet geloven, maar na het samenvoegen van de css was het probleem van teveel ruimte tussen de li's verholpen, en daarna met wat tweaken lukte het ook om de lijst links te krijgen en om de labels achter de checkboxen goed te zetten.
Het hielp dus wel om de css samen te voegen, maakte alles een stuk overzichtelijker. :P
Ik dacht eerst, ik doe wel wat de tutorial doet, dan kan er niks fout gaan, maar wel dus. XD

Mààr er is nog wel een heel klein puntje waar ik nog niet tevreden over ben:
In IE namelijk zit er imo een te grote ruimte tussen de laatste input en de bottom-border van de fieldset, en het is mij nog niet gelukt om dat kleiner te krijgen.

Hier is de code met maar 2 css-bestanden, 1 algemene en 1 voor IE. Ik kon dat ook samenvoegen, maar ik dacht dat dit misschien toch overzichtelijker was voor debuggen.
http://home.planet.nl/~vanbr116/relevent.zip

En hier een live voorbeeld:
http://home.planet.nl/~vanbr116/relevent.html


[edit]Oeps, ik zie net dat het in IE6 nog niet goed is:
http://browsershots.org/s...71305f359796e3e88ce1c7b0/
En IE 5.5 ook niet.
Maar dat kan ik wel fixen denk ik.

Evertt wijzigde dit bericht 21-07-2008 14:59 (8%)

 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

quote:
Evertt schreef op maandag 21 juli 2008 @ 14:21:
Je zal het niet geloven, maar na het samenvoegen van de css was het probleem van teveel ruimte tussen de li's verholpen, en daarna met wat tweaken lukte het ook om de lijst links te krijgen en om de labels achter de checkboxen goed te zetten.
Het hielp dus wel om de css samen te voegen, maakte alles een stuk overzichtelijker. :P
Ik dacht eerst, ik doe wel wat de tutorial doet, dan kan er niks fout gaan, maar wel dus. XD
Luister dan ook meteen eppo :P
quote:
Evertt schreef op maandag 21 juli 2008 @ 14:21:
Mààr er is nog wel een heel klein puntje waar ik nog niet tevreden over ben:
In IE namelijk zit er imo een te grote ruimte tussen de laatste input en de bottom-border van de fieldset, en het is mij nog niet gelukt om dat kleiner te krijgen.
Again; al eens naar de paddings e.d. gekeken?
quote:
Evertt schreef op maandag 21 juli 2008 @ 14:21:
Hier is de code met maar 2 css-bestanden, 1 algemene en 1 voor IE. Ik kon dat ook samenvoegen, maar ik dacht dat dit misschien toch overzichtelijker was voor debuggen.
http://home.planet.nl/~vanbr116/relevent.zip
En voor de 81ste keer; waarom post je die code nou niet gewoon in het topic :?
quote:
Evertt schreef op maandag 21 juli 2008 @ 14:21:
En hier een live voorbeeld:
http://home.planet.nl/~vanbr116/relevent.html


[edit]Oeps, ik zie net dat het in IE6 nog niet goed is:
http://browsershots.org/s...71305f359796e3e88ce1c7b0/
En IE 5.5 ook niet.
Maar dat kan ik wel fixen denk ik.
Dat je uberhaupt IE5.5 nog wil ondersteunen... Dat ding is inmiddels 8 jaar oud en (ik zou het even moeten nakijken) nagenoeg 0,5 % in gebruik ofzo. Niet de moeite waard IMHO.

offtopic:
En het is relevant ;)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

quote:
RobIII schreef op maandag 21 juli 2008 @ 15:07:
[...]

Luister dan ook meteen eppo :P


[...]

Again; al eens naar de paddings e.d. gekeken?
Ja, ik heb naar me paddings gekeken en me margins, maar ik kreeg het niet voor elkaar. Wel als ik * {margin: 0; padding: 0;} deed, maar dan kwam de fieldset buitenbeeld en dat kon ik ook niet fixen. En daarna heb ik geen andere manier meer gevonden.
quote:
[...]

En voor de 81ste keer; waarom post je die code nou niet gewoon in het topic :?
Ja, maar als ik het in het topic post dan wordt het zo rommelig
quote:
[...]

Dat je uberhaupt IE5.5 nog wil ondersteunen... Dat ding is inmiddels 8 jaar oud en (ik zou het even moeten nakijken) nagenoeg 0,5 % in gebruik ofzo. Niet de moeite waard IMHO.
Ok, IE5.5 boeit me niet, maar IE6 wel. In IE8 klopt het btw ook niet helemaal. Kon je niet iets in html of css doen waardoor IE8 IE7 emuleert?
quote:
offtopic:
En het is relevant ;)
offtopic:
Ik deed een poging tot engels. :P

Evertt wijzigde dit bericht 21-07-2008 15:44 (9%)

 
Woest [GoT]

quote:
Evertt schreef op maandag 21 juli 2008 @ 15:43:
Ok, IE5.5 boeit me niet, maar IE6 wel. In IE8 klopt het btw ook niet helemaal. Kon je niet iets in html of css doen waardoor IE8 IE7 emuleert?
Ja, maar het toevoegen van een extra (nutteloze voor elke andere browser) regel is nou niet echt elegant. Meer een oplossing voor bestaande producten waarvoor checken of ie8 alles goed doet niet een optie is.

E6600 @ 3.03 Ghz @stock vcore @ scythe ninja | 2GB Corsair 5400CL4 | Geforce 7800GT

Hij doet het trouwens ook niet goed in Opera, moet ik me daar zorgen over maken of is dat ook maar 0,001% van de gebruikers? Of moet ik daar toch maar conditional comments van opzoeken?
 

Acties: [view][quote]


Door: RobIII Moderator PRG/SEA/WEB
Papa van LucaIII \o/

quote:
Evertt schreef op maandag 21 juli 2008 @ 18:41:
Hij doet het trouwens ook niet goed in Opera, moet ik me daar zorgen over maken of is dat ook maar 0,001% van de gebruikers?
Kijk eens verder dan je neus lang is :X
quote:
Evertt schreef op maandag 21 juli 2008 @ 18:41:
Of moet ik daar toch maar conditional comments van opzoeken?
Ik zou niet voor iedere *fart* terugvallen op conditional comments (overigens is dat een IE only ding v.z.i.w.)

We all get along with some glue and duct tape here and there - but when the sh*t hits the fan, don’t blame the duct tape.

Trotse papa van Luca! | Pick My Icon!

Ok, ik geef het op.
Het werkt perfect in FF, bijna perfect in IE7 en acceptabel in Opera.
Het werkt voor geen meter in IE6 en ik heb geen flauw idee hoe ik dat moet fixen.

Als iemand de code wil hebben voor zichzelf of het resultaat wil zien:
http://home.planet.nl/~vanbr116/forms/relevent.html
http://home.planet.nl/~vanbr116/forms/relevent2.html
http://home.planet.nl/~vanbr116/forms/relevent.zip

[edit]Ben toch nog aan het debuggen, dus de html-pagina's kunnen er verneukt uit zien, maar de zip is nog gewoon intact.

Evertt wijzigde dit bericht 22-07-2008 21:56 (13%)

 
Woest [GoT]

Opera 9.5 heb ik nog niet op css bugs kunnen betrappen, dus denk ik dat jouw code toch de fout bevat. Even een zipfile neerplempen is natuurlijk wel erg gemakzuchtig he. Reduceer het weer tot een testcase waar het probleem voorkomt met zo weinig mogelijk code (sowieso een goed plan om jezelf dat aan te leren), en post dan de (testcase) code in code tags.

Het ziet er namelijk niet rommelig uit als je in de code tags bijvoorbeeld code=html of code=css neerzet, waardoor de kekke syntax highlighter van GoT ook wakker wordt.

Om maar even de ouwe afgezaagde opmerking te plaatsen: dit is niet de afhaalchinees waar wij even jouw probleem helemaal fixen. (maar wij geven je wel extra sambal bij :P )

E6600 @ 3.03 Ghz @stock vcore @ scythe ninja | 2GB Corsair 5400CL4 | Geforce 7800GT

Hmm, 'k ben even in de HTML en CSS gedoken van Evertt.
Nu vermits ikzelf geen (x)HTML fan ben heb'k het formulier ook even in HTML 4.01 strict gezet en de CSS ook wat anders aangepakt (niet echt drastisch)

My version : http://www.dev153.net/form/

IE 7.0 : ok
IE 6.0 (Avant) : ok
FF 3 : ok
Safari : ok
Opera: shitte :p
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!--[if !IE]> Copyright © 2007 - <? echo date('Y'); ?> by webtrix.be <![endif]-->
<html>
<head>
<base href="http://www.dev153.net/form/">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Description" content="default">
<meta name="Keywords" content="default">
<meta http-equiv="Pragma" content="no-cache">
<title>default</title>
<link rel="stylesheet" href="CORE/css/reset.css" type="text/css">
<link rel="stylesheet" href="CORE/css/main.css" type="text/css">
<!--[if lte IE 7]><link rel="stylesheet" href="CORE/css/main-ie.css" type="text/css"><![endif]-->
</head>
<body>
<!--[if !IE]> START container <![endif]-->
<div id="container">
  <!--[if !IE]> START global frame <![endif]-->
  <div id="frm">
    <!--[if !IE]> START middle_frame <![endif]-->
    <div id="frm_m">
      <div id="frm_m_form">
        <form action="example.php" method="POST">
          <fieldset>
            <legend><span>Contact Details</span></legend>
            <p>Required fields are marked with a <em>*</em></p>
            <ol>
              <li>
                <label for="name">Name: <em>*</em> <strong>This field is required</strong></label>
                <input id="name" name="name" class="text" type="text">
              </li>
              <li>
                <fieldset>
                  <legend><span>Occupation: <em>*</em> <small>Select at least 2</small> <strong>select at least 2</strong></span></legend>
                  <ol>
                    <li>
                      <input id="occupation1" name="occupation1" class="checkbox" type="checkbox" value="1">
                      <label for="occupation1">Docter</label>
                    </li>
                    <li>
                      <input id="occupation2" name="occupation2" class="checkbox" type="checkbox" value="1">
                      <label for="occupation2">Lawyer</label>
                    </li>
                    <li>
                      <input id="occupation3" name="occupation3" class="checkbox" type="checkbox" value="1">
                      <label for="occupation3">Teacher</label>
                    </li>
                    <li>
                      <input id="occupation4" name="occupation4" class="checkbox" type="checkbox" value="1">
                      <label for="occupation4">Web designer</label>
                    </li>
                  </ol>
                </fieldset>
              </li>
              <li>
                <label for="email">Email address: <em>*</em> <small>Valid email address</small> <strong>This field is required</strong></label>
                <input id="email" name="email" class="text" type="text">
              </li>
              <li>
                <label for="phone">Telephone:</label>
                <input id="phone" name="phone" class="text" type="text">
              </li>
            </ol>
          </fieldset>
          <fieldset class="alt">
            <legend><span>Delivery Address</span></legend>
            <ol>
              <li>
                <label for="address1">Address 1:</label>
                <input id="address1" name="address1" class="text" type="text">
              </li>
              <li>
                <label for="address2">Address 2:</label>
                <input id="address2" name="address2" class="text" type="text">
              </li>
              <li>
                <label for="suburb">Suburb/Town:</label>
                <input id="suburb" name="suburb" class="text" type="text">
              </li>
              <li>
                <label for="postcode">Po