Formularz HTML - element "input" typu "checkbox"
- Data publikacji
- Ostatnio edytowano
Gdy element input posiada atrybut type o wartości checkbox, wtedy wspomniany element input reprezentuje pole wyboru typu checkbox, które może zostać przez nas wybrane bądź też nie.
Przykład:
<input type="checkbox">Rezultat:
Gdy zdecydujemy się wybrać nasze przykładowe pole wyboru typu checkbox, wtedy również zawsze możemy cofnąć naszą decyzję.
Domyślnie pole wyboru typu checkbox nie jest polem wybranym, lecz sytuację tę możemy zmienić za pomocą atrybutu logicznego checked.
Przykład:
<input type="checkbox" checked>Rezultat:
Jeżeli chcemy, aby nasze przykładowe pole wyboru typu checkbox reprezentowało daną, wtedy do wspomnianego pola wyboru typu checkbox reprezentowanego przez element input, który posiada atrybut type o wartości checkbox należy dodać atrybut name wraz z interesującą nas wartością.
Przykład:
<input type="checkbox" name="regulamin" checked>
Gdy chcemy, aby dana reprezentowana przez interesujące nas pole wyboru typu checkbox posiadała określoną wartość w przypadku gdy wspomniane interesujące nas pole wyboru typu checkbox zostanie przez nas wybrane, wtedy do wspomnianego interesującego nas pola wyboru typu checkbox reprezentowanego przez element input, który posiada atrybut type o wartości checkbox należy dodać atrybut value wraz z interesującą nas wartością.
Przykład:
<input type="checkbox" name="regulamin" value="true" checked>
W ten o to sposób utworzone pole wyboru typu checkbox możemy powiązać z interesującym nas formularzem HTML.
Przykład:
<form action="https://webkod.pl/php/submit-result.php">
<p>
<label>
<input type="checkbox" name="regulamin" value="true" checked>
akceptuję regulamin
</label>
</p>
<p>
<button type="submit">zatwierdź</button>
</p>
</form>Rezultat:
Jeżeli chcemy, aby kilka przykładowych elementów input posiadających atrybut type o wartości checkbox tworzyło oraz należało do tej samej grupy pól wyboru typu checkbox, wtedy do każdego wspomnianego elementu input należy dodać atrybut name wraz z tą samą wartością.
Przykład:
<p>
Które kolory lubisz?
</p>
<p>
<label>
<input type="checkbox" name="kolor" value="red"> Czerwony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor" value="green"> Zielony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor" value="blue"> Niebieski
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor" value="black"> Czarny
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor" value="white"> Biały
</label>
</p>
Ponadto, aby zasób internetowy, do którego zostaną przekazane dane formularza HTML, z którym została powiązana nasza przykładowa grupa pól wyboru typu checkbox mógł obsłużyć daną, która reprezentowana była przez wspomnianą grupę pól wyboru typu checkbox, z której mogliśmy wybrać więcej niż jedno pole, do nazwy danej każdego elementu input, który tworzył wspomnianą grupę pól wyboru typu checkbox należy dodać ciąg znaków [].
Przykład:
<p>
Które kolory lubisz?
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="red"> Czerwony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="green"> Zielony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="blue"> Niebieski
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="black"> Czarny
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="white"> Biały
</label>
</p>
W ten o to sposób utworzoną grupę pól wyboru typu checkbox możemy powiązać z interesującym nas formularzem HTML.
Przykład:
<form action="https://webkod.pl/php/submit-result.php">
<p>
Które kolory lubisz?
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="red"> Czerwony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="green"> Zielony
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="blue"> Niebieski
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="black"> Czarny
</label>
</p>
<p>
<label>
<input type="checkbox" name="kolor[]" value="white"> Biały
</label>
</p>
<p>
<button type="submit">zatwierdź</button>
</p>
</form>Rezultat: