[HTML/CSS] Ongewenste tabvolgorde

[wackmaniac]

Voor een community site heb ik een formulier gebakken, die ik zoveel mogelijk semantisch heb opgebouwd. Dat heb ik als volgt gedaan:

code:

<fieldset>
  <form>
    <ul class="fields">
      <li>
        <label for="username">Gebruikersnaam</label>
        <input type="text" name="username" id="username" />
      </li>
      <li>
        <label for="email">Email adres</label>
        <input type="text" name="email" id="email" />
      </li>
    </ul>
  </form>
</fieldset>

Probleem is nu dat ik in FF op TAB druk terwijl ik in het veld voor de gebruikersnaam sta, ik niet direct naar het volgende veld, maar naar de li springt. Je moet tijdens het invullen dus telkens tweemaal op TAB drukken. In IE en Opera heb ik dit probleem niet. Heeft iemand een idee hoe ik dit probleem kan omzeilen?

[dB90]

Google eens op tabindex, je moet wel even aangeven wat je al geprobeerd hebt etc. voordat je het hier vraagt

[wackmaniac]

@dB90
Zal volgende keer een lijst geven Had namelijk al wel gezocht, maar misschien moet ik minder specifiek zoeken.

Een tabindex lijkt het probleem te verhelpen. In mijn gedachte had dit alleen invloed op de volgorde van de invoervelden.

[ Voor 19% gewijzigd door wackmaniac op 30-05-2007 12:21 ]

[crisp]

Ik vind je keuze voor een unordered list toch wel wat vreemd eerlijk gezegd, persoonlijk had ik een definition list gebruikt of zelfs helemaal geen list en de inputs binnen het label geplaatst

Overigens kan je beter je fieldset in je form plaatsen en je bent het verplichte legend-element vergeten.

[ Voor 21% gewijzigd door crisp op 30-05-2007 12:34 ]

[wackmaniac]

Is misschien een kwestie van smaak, maar ik vind een definition list een nog vreemdere keuze. En een input binnen je label lijkt mij ook niet de te bewandelen weg: je invoer is namelijk gekoppeld aan je label en niet onderdeel van je label.
Ik switch zelf nog weleens van unordered list en ordered list, maar naar mijn mening is een formulier ook een lijst; Een lijst van invoer elementen.

Over de legenda heb je gelijk

[Verwijderd]

in de html 5 wd wordt gewoon een p-element als voorbeeld gebruikt om input en label semantisch te koppelen