: Home / HTML / CSS / artykuły / Label w formularzu - nieszanowany standard
Label w formularzu - nieszanowany standard
Ocena użytkowników: / 1
SłabyŚwietny 
Wpisany przez Patryk yarpo Jar   
poniedziałek, 06 września 2010 18:21

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ą w opis takzę jednoznacznie wyrażamy swoją opinię.

<label /> na ratunek

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

<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.

Tags:

Zobacz podobne artykuły

< Poprzednia   Następna >
 

Dodaj komentarz


Kod antysapmowy
Odśwież