Felix Riesterer: Darstellung Checkbox im Smartphone nur suboptimal

Beitrag lesen

Lieber Tom,

http://www.easyo.de/login-test.php

was bitte soll denn </input> genau sein?

Desweiteren ist es grundsätzlich eine gute Idee ausgiebigen Gebrauch vom <label>-Element zu machen. Lass mich Dein <form>-Element einmal etwas modifizieren:

<form name="form1" action="login-test.php" method="post">  
    <h2>Anmelden</h2>  
    <ul>  
        <li>  
            <label for="u">Nutzer</label>  
            <input id="u" type="text" name="username" maxlength="8" />  
        </li>  
        <li>  
            <label for="p">Passwort</label>  
            <input id="p" type="password" name="passwort" maxlength="8" />  
        </li>  
        <li>  
            <label for="reg">erstmalig registrieren ...</label>  
            <input id="reg" type="checkbox" name="reg" onclick="kat_an();" />  
        </li>  
        <li id="kat">  
            <span>... für folgende Kategorien:</span>  
            <ul>  
                <li>  
                    <input id="kat1" type="checkbox" name="kat1" />  
                    <label for="kat1">Kat 1</label>  
                </li>  
                <li>  
                    <input id="kat2" type="checkbox" name="kat2" />  
                    <label for="kat2">Kat 2</label>  
                </li>  
                <li>  
                    <input id="kat3" type="checkbox" name="kat3" />  
                    <label for="kat3">Kat 3</label>  
                </li>  
                <li>  
                    <input id="kat4" type="checkbox" name="kat4" />  
                    <label for="kat4">Kat 4</label>  
                </li>  
            </ul>  
        </li>  
        <li>  
            <input id="ok" type="button" value="  OK  " onclick="return ob_leer();" />  
        </li>  
    </ul>  
</form>

Wie Du siehst, habe ich einige Deiner inline-styles entfernt, da mit den reichlich vergebenen ID über CSS bequem im Stylesheet die Darstellung gesteuert werden kann.

Durch die <label>-Elemente ist nun die "Klickfläche" wesentlich größer, sodass Dein Darstellungsproblem mit den Checkboxen vielleicht auch gelöst ist...?

Liebe Grüße,

Felix Riesterer.

--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)