Forms layout zonder tabellen

Info 
Door: Franky Braem Moeilijkheidsgraad: 2/3
Views:25.441Reacties: 7(Bekijken)
  Log in om zelf te reageren
 Waardering:9.7/10 (3 stemmen)



Volgens de webstandaard mogen tabellen enkel gebruikt worden voor tabelgegevens. Tabellen gebruiken voor de layout van de pagina is dus eigenlijk niet volgens de standaard. Is dit belangrijk voor jou? Voor jou misschien niet, maar stel je voor dat een blinde jouw site bezoekt. Hij zal een programma gebruiken dat de inhoud van de pagina voorleest. Het programma kan danig in de knoop geraken als er tabellen gebruikt worden waar het eigenlijk niet nodig is.

Een veel gebruikte manier om forms een layout mee te geven is door gebruik te maken van tabellen. Ik toon je hier nu een manier hoe je dat kunt zonder:

Eerst de CSS code:

#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
label
{
  width:25%;
  text-align:left;
  float:left;
  font-weight:bold;
}
  
.screen
{
  border:1pt dotted red;
  padding:5pt;
  width:35em;
}
  
.row
{
  padding:5pt;
}

Nu een HTML-voorbeeldje:
#Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<form class="screen">
 <div class="row">
  <label for="description">Omschrijving:</label>
  <input type="text" id="description"
         name="description" size="25" />
 </div>
 <div class="row">
  <label for="valid_from">Geldig vanaf:</label>
  <input type="text" id="valid_from"
         name="valid_from" size="10" />
 </div>
 <div class="row">
  <label for="valid_until">Geldig tot</label>
  <input type="text" id="valid_until"
         name="valid_until" size="10" />
 </div>
 <div class="row">
  <label for="text">Tekst:</label>
  <textarea id="text" name="text"
            cols="45" rows="10"></textarea>
  <br />
 </div>
</form>


Door gebruik te maken van float:left voor een label zal de label steeds mooi links bovenaan staan.

7 reacties
shanna Geplaatst op 03-09-2008 om 13:53
 

Regular
DW gebruiken is prima, als je maar weet hoe je zelf de code naar je hand kan zetten. Want DW codeert nog niet geheel foutloos.
huub8 Geplaatst op 23-01-2008 om 21:54
 

Regular
ik zou zeggen, stop met dreamweaver en ga eerst eens goed html css xthml enz leren.
Lubie Geplaatst op 11-07-2006 om 23:14
 

Regular
ik zoek hulp met maken van een site ik wil graag dat je je kan registreren op mijn sitem maar weet niet hoe! ik werk met dreamweaver
ElBaknifico Geplaatst op 01-11-2005 om 16:12
Avatar van ElBaknifico

Moderator
Wat bedoel je met een "Contactsysteem"?

Deze tutorial gaat gewoon over het feit dat je gemakkelijk een formulier kan opmaken, zonder gebruik te maken van tabellen. Je kan deze manier van werken gebruiken bij elk soort formulier, dus ook een contactformulier.

Meestal moet je voor een contactformulier php gebruiken, daarvoor kan je ook eens deze tutorial bekijken.


Btw wij lezen niet elke dag alle pagina's door om te zien of er ergens gereageerd is hoor ;-)
phromatica Geplaatst op 01-11-2005 om 12:01
 

Regular
bedankt voor de snelle reactie :/

Pagina 1 2 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder