Is vroeg me af wat de meest clean en semantische manier is (volgens jullie) om een form op te bouwen in html. Tabellen is natuurlijk het makkelijkst om alles strak te krijgen, maar dat valt voor mij gelijk af als het gaat om clean html schrijven. Als jij echter wel vindt dat tabellen een goede manier zijn om forms te bouwen hoor ik graag je argumenten. Ik zelf schrijf op dit moment forms in een <ul>. Ik heb echter van anderen gehoord dat dat nergens op slaat omdat een form natuurlijk geen list is. Ik doe dat gewoon omdat ik geen tabellen wil gebruiken en ook geen <br />.

Andere mensen zeggen weer dat je gewoon per label&input een div moet gebruiken, maar dan krijg je veel zo ontzettend veel div's in je code vind ik.

Anyways, hoe denken jullie er over? Ik twijfel nog heel erg namelijk en ik zou graag met zekerheid kunnen zeggen dat ik forms op de beste manier schrijf. :P

Tja als ik het zelf moet zeggen zou ik gewoon br gebruiken en divs. Je kan wel zeggen dat je het dan veel divs vind in je pagina maar persoonlijk vind ik tables heel onoverzichtelijk coden.

ik gebruik gewoon <p>'s <label>'s en <input>'s :). Ik doe het gewoon zo eigenlijk.

<p><label for="frm_naam">Naam:</label> <input type="text" id="frm_naam"/></p>

ik zou het zo doen eigenlijk ik heb niet vaak gebruikt maar:
[div class="name"]Email[/div][div class="input"]<input type...enz>[/div]
<br style="clear:both" />
en hie rhet zelfde als erboven

dan geef je input en name allebij float:left;

Code:

<form>
    <fieldset>
        <legend></legend>
        <ol>
            <li>
                <label></label>
                <input />
            </li>
        </ol>
    </fieldset>
</form>

sowieso die labels gebruiken, aangezien gebruiksvriendelijk is. Als mensen op de tekst klikken, dat dan de cursor ook in het vak komt te staan.

Code:

<form action="#" method="post">
    <fieldset>
    <legend>Legend for the form</legend>
        <dl>
        <dt><label for="form_id_input_id">Label text</label></dt>
        <dd><input type="text" name="form_id_input_name" id="form_id_input_id" value="" class="text" /></dd>
        <dt><label for="form_id_input_id_2">Label text example two</label></dt>
        <dd><input type="text" name="form_id_input_name_2" id="form_id_input_id_2" value="" class="text" /></dd>
        <dd class="input-info"><em>Information or note goes here.</em></dd>
        <dt><label for="form_id_input_id_3">Label for textarea</label></dt>
        <dd><textarea name="form_id_input_name_3" id="form_id_input_id_3" cols="50" rows="10"></textarea></dd>
        <dt>Reason for checkboxes</dt>
        <dd>
            <ul>
            <li class="fli">
            <input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_1" checked="checked" class="checkbox" />
            <label for="form_id_checkbox_1">Checkbox 1 (Checked)</label>
            </li>
            <li>
            <input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_2" class="checkbox" /> 
            <label for="form_id_checkbox_2">Checkbox 2</label>
            </li>
            <li>
            <input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_3" class="checkbox" /> 
            <label for="form_id_checkbox_3">Checkbox 3</label>
            </li>
            <li class="lli">
            <input type="checkbox" name="form_id_checkbox[]" id="form_id_checkbox_4" class="checkbox" />
            <label for="form_id_checkbox_4">Checkbox 4</label>
            </li>
            </ul>
        </dd>
        <dt>Reason for radio buttons</dt>
        <dd>
            <ul>
            <li class="fli">
            <input type="radio" name="form_id_radio" id="form_id_radio_1" class="radio" />
            <label for="form_id_radio_1">Radio Button 1</label>
            </li>
            <li>
            <input type="radio" name="form_id_radio" id="form_id_radio_2" class="radio" />
            <label for="form_id_radio_2">Radio Button 2</label>
            </li>
            <li>
            <input type="radio" name="form_id_radio" id="form_id_radio_3" class="radio" checked="checked" /> 
            <label for="form_id_radio_3">Radio Button 3 (Selected)</label>
            </li>
            <li class="lli">
            <input type="radio" name="form_id_radio" id="form_id_radio_4" class="radio" />
            <label for="form_id_radio_4">Checkbox 4</label>
            </li>
            </ul>
        </dd>
        <dd class="input-info"><em>Information about the radio buttons goes in here</em></dd>
        </dl>
    </fieldset>
</form>

Dit vind ik een hele nette manier.

Dat is inderdaad ook een prima manier, al verschilt die niet veel met die van mij.

Ik lees net van iemand die gewoon labels en inputs gebruikt en geen divs of ul's of dl's. Het zag er inderdaad goed uit, al had ik geen idee over hoe die dat met right-aligned labels zou doen.

http://ep2.nl/test.html

De manier van Alexander is ook sterk aan te raden.

Divs hoef je inprincipe bijna nooit te gebruiken, probeer dat dan ook zo
vaak mogelijk te mijden. Ik zelf vind het een beetje amateuristisch staan
als er erg veel divs zijn gebruikt in een form.

Akkoord met Alexander echter zou ik een div gebruiken ipv een ul..

Origineel gepost door David C.

Akkoord met Alexander echter zou ik een div gebruiken ipv een ul..

Hoe wou jij dan li's doen?

Trouwens, ik zie nu ineens dat de manier die ik in mijn vorige post suggereerde eigenlijk helemaal niet werkt als de labels niet evenveel tekst hebben. :( XD

Vaak werk je toch al in een div, dus dan is het enige dat je eigenlijk moet doen een <fieldset> gebruiken en met <label> en <input> tags je formulier maken. Labels zijn echt "the way to go".

http://home.planet.nl/~vanbr116/test.html

Dat is wat ik er nu van heb kunnen maken met zo min mogelijk elementen die misschien niet horen in een form.

Het ziet er perfect uit in FF, maar IE7 vern**kt het heeel erg. Weet iemand de oplossing?

Ik gebruik angenoeg altijd labels, list niet dat gebruik ik vooral voor de zoek machine vriendelijke zaken.

Origineel gepost door E.C. van Brussel

http://home.planet.nl/~vanbr116/test.html

Dat is wat ik er nu van heb kunnen maken met zo min mogelijk elementen die misschien niet horen in een form.

Het ziet er perfect uit in FF, maar IE7 vern**kt het heeel erg. Weet iemand de oplossing?

?????
Aanvullend bericht:
*kick*

http://home.planet.nl/~vanbr116/test.html

Woohoo, het is me bijna gelukt!! :D
Er zit alleen nog een 1-pixel-afwijking in IE die ik er niet zo gauw uit krijg.
Heeft iemand suggesties?