Poprawa funkcjonalności formularzy – label

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;)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *