Bootstrap ile formlarda seçim yapmayı sağlayan checkbox, radio button ve switch bileşenleri, kullanıcı etkileşimini kolaylaştırmak için kullanılır. Aşağıda her bir bileşenin nasıl kullanılacağını detaylı bir şekilde açıklayacağım.
1. Checkbox (Onay Kutusu)
Checkbox, kullanıcının bir veya birden fazla seçeneği onaylamasına olanak tanır. Aşağıda bir checkbox örneği verilmiştir:
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="checkOption1">
<label class="form-check-label" for="checkOption1">Seçenek 1</label>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="checkOption2">
<label class="form-check-label" for="checkOption2">Seçenek 2</label>
</div>
2. Radio Button (Seçim Düğmesi)
Radio button, kullanıcının belirli bir grup içinden yalnızca bir seçenek seçmesini sağlar. Aşağıda bir radio button örneği verilmiştir:
<div class="form-group">
<label>Seçim Yapın</label>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radioOption1" value="1" checked>
<label class="form-check-label" for="radioOption1">Seçenek 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radioOption2" value="2">
<label class="form-check-label" for="radioOption2">Seçenek 2</label>
</div>
</div>
3. Switch (Açma/Kapama Anahtarı)
Bootstrap 4.3 ve sonrasında kullanılan switch bileşeni, bir on/off (açma/kapatma) anahtarı şeklinde çalışır. Bu, kullanıcıların bir ayarı hızlıca etkinleştirmesine veya devre dışı bırakmasına olanak tanır. İşte switch örneği:
<div class="form-group">
<label for="switchExample">Anahtar</label>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchExample">
<label class="form-check-label" for="switchExample">Açık/Kapalı</label>
</div>
</div>
4. Örnek Form
Aşağıda checkbox, radio button ve switch bileşenlerini içeren örnek bir form bulunmaktadır:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Form - Checkbox, Radio, Switch</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h2>Form Seçenekleri</h2>
<form>
<!-- Checkbox -->
<h4>Onay Kutuları</h4>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="checkOption1">
<label class="form-check-label" for="checkOption1">Seçenek 1</label>
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="checkOption2">
<label class="form-check-label" for="checkOption2">Seçenek 2</label>
</div>
<!-- Radio Buttons -->
<h4>Seçim Düğmeleri</h4>
<div class="form-group">
<label>Seçim Yapın</label>
<br>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radioOption1" value="1" checked>
<label class="form-check-label" for="radioOption1">Seçenek 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="radioOptions" id="radioOption2" value="2">
<label class="form-check-label" for="radioOption2">Seçenek 2</label>
</div>
</div>
<!-- Switch -->
<h4>Açma/Kapama Anahtarı</h4>
<div class="form-group">
<label for="switchExample">Anahtar</label>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="switchExample">
<label class="form-check-label" for="switchExample">Açık/Kapalı</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
</body>
</html>
5. Özet
Bootstrap ile checkbox, radio button ve switch bileşenleri kullanarak kullanıcı etkileşimini kolaylaştırabilirsiniz. Bu bileşenler, kullanıcıların seçim yapmalarını sağlarken, formlarınızın estetik ve işlevsel olmasını da garanti eder. Daha fazla bilgi ve detaylı bileşenler için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.