Blog webdeveloperski Patryk yarpo Jar

Poprawa funkcjonalności formularzy – label

Autor wiadomości Listopad 10, 2010

Czy nie zdarzyło Ci się kilkukrotnie klikać, aby zaznaczyć jakieś pole radio lub checkboksa? Mi tak. Czy nie pomyślałeś wtedy, że powinno można klikać w opis takiego pola formularza by je zaznaczyć, a nie tylko li w samą kontrolkę? Mi też się tak wydaje. I... Uwaga! Można to zrobić. O tym, jak w dalszej części artykułu.

Na początek prosty kod

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
    <form action="#">
        <input type="radio" name="example" value="1" /> Zgadzam się
        <input type="radio" name="example" value="0" /> Nie zgadzam się
    </form>
</body>
</html>

Powyższy kod daje taki efekt:

Co nie tak?

Trzeba celować w małą kontrolkę, mimo że przecież klikając w opis także jednoznacznie wyrażamy swoją opinię.

<label /> na ratunek

Aby zlikwidować problem, o którym mówiłem wcześniej starczy użyć znacznika <label/>

<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
    <form action="#">
        <label>
            <input type="radio" name="example" value="1" /> Zgadzam się
        </label>
        <label>
            <input type="radio" name="example" value="0" /> Nie zgadzam się
        </label>
    </form>
</body>
</html>

Powyższy kod daje taki rezultat:

Atrybut for

Czasem zdarza się - np. kiedy formularz jest zbudowany w oparciu o tabelę - że nie da się objąć elementu w znacznik <label/>. Można jednak wtedy użyć atrybutu for:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
</head>
<body>
    <form action="#">
        <input type="radio" name="example" id="example_1" value="1" />
        <label for="example_1">Zgadzam się</label>
        <label>
            <input type="radio" name="example" value="0" /> Nie zgadzam się
        </label>
    </form>
</body>
</html>

Miłego naprawiania swoich dotychczasowych formularzy;)

Tagged as: , Dodaj komentarz
Komentarze (0) Trackbacks (0)

Brak komentarzy.


Leave a comment

 

Brak trackbacków.