Formularze#
Pole opcji#
<form action="..."> <input type="radio" name="nazwa" value="wartość"> </form>
gdzie jako "nazwa" należy wpisać nazwę danego pola (np. skróconą treść pytania), która nie powinna być zbyt długa. Zostanie ona później wysłana wraz z formularzem. Natomiast jako "wartość" podaj treść danej odpowiedzi. Zostanie ona również dołączona do formularza.
Kontrolka opcji wprowadza tzw. przycisk radiowy. Czytelnik będzie wybierał tylko jedną z możliwych wartości. Kliknięcie na jakiejś wartości powoduje jej zaznaczenie, ale zarazem usuwa zaznaczenie z innej. Raz zaznaczone pole tego typu, można "odznaczyć" tylko poprzez zaznaczenie innego z podanych możliwości. Typ ten stosujemy wtedy, gdy nie można podać kilku wartości, gdyż jest to nielogiczne. Trudno być na przykład jednocześnie kobietą i mężczyzną (oczywiście bez spekulacji medyczno-psychologicznych).
Wszystkie pola tego typu, które dotyczą tego samego pytania, muszą koniecznie posiadać taką samą nazwę! Dodatkowo atrybut value jest tutaj absolutnie konieczny - musi on być inny dla każdej możliwości odpowiedzi!
Możliwe jest tutaj podanie dodatkowych atrybutów:
checked- pozwala zdefiniować, które pole będzie zaznaczone domyślnie. Oczywiście nie można zaznaczyć domyślnie dwóch pól tego typu, jako odpowiedzi na to samo pytanie, co wynika z ich sposobu działania.disabled- blokada pola opcji. Zablokowane pole w ogóle nie jest przesyłane z danymi formularza.
Pola tego typu bardzo często stosuje się wraz z etykietami (label). Dzięki temu zaznaczenie opcji może odbywać sie nie tylko poprzez kliknięcie w małe kółeczko, ale także po kliknięciu na opis danego pola. Najlepiej zobaczyć kilka poniższych przykładów.
Pole opcji bez specyficznych atrybutów:
<form action="">
<p>
<input type="radio" name="plec" value="kobieta" />
Kobieta
</p>
<p>
<input type="radio" name="plec" value="mezczyzna" />
Mężczyzna
</p>
</form>Efekt:
Domyślne zaznaczenie jednej z opcji (checked):
<form action="">
<p>
<input type="radio" checked="checked" name="plec" value="kobieta" />
Kobieta
</p>
<p>
<input type="radio" name="plec" value="mezczyzna" />
Mężczyzna
</p>
</form>Efekt:
Zastosowanie dodatkowo etykiet (można klikać w opis tekstowy):
<form action="">
<p>
<label>
<input type="radio" name="plec" value="kobieta" />
Kobieta
</label>
</p>
<p>
<input type="radio" name="plec" id="man" value="mezczyzna" />
<label for="man">Mężczyzna</label>
</p>
</form>Efekt:
Wyłączenie pola (disabled):
<form action="">
<p>
<input type="radio" name="plec" value="kobieta" />
Kobieta
</p>
<p>
<input type="radio" disabled="disabled" name="plec" value="mezczyzna" />
Mężczyzna
</p>
</form>Efekt: