Bootstrap ile seçim yapmak için kullanılabilecek birkaç farklı form bileşeni vardır. Bu bileşenler, kullanıcının belirli seçenekler arasından seçim yapmasını sağlamak için kullanılır. En yaygın seçim bileşenleri arasında dropdown (açılır menü), checkbox (onay kutusu) ve radio button (seçim düğmesi) yer alır. İşte bu bileşenleri nasıl kullanabileceğinizi anlatan bir rehber:
1. Dropdown (Açılır Menü)
Dropdown, kullanıcının birden fazla seçenek arasından birini seçmesini sağlayan bir bileşendir. Aşağıda bir dropdown örneği verilmiştir:
<div class="form-group">
<label for="dropdownSelect">Bir Seçenek Seçin</label>
<select class="form-control" id="dropdownSelect">
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
</select>
</div>
2. Checkbox (Onay Kutusu)
Checkbox, kullanıcının bir veya daha 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>
3. 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>
4. Örnek Bir Form
Aşağıda tüm bu seçim 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 Seçim Formu</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>Seçim Formu</h2>
<form>
<!-- Dropdown -->
<div class="form-group">
<label for="dropdownSelect">Bir Seçenek Seçin</label>
<select class="form-control" id="dropdownSelect">
<option>Seçenek 1</option>
<option>Seçenek 2</option>
<option>Seçenek 3</option>
</select>
</div>
<!-- Checkbox -->
<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 -->
<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>
<button type="submit" class="btn btn-primary">Gönder</button>
</form>
</div>
</body>
</html>
5. Özet
Bootstrap ile seçim bileşenleri oluşturmak oldukça kolaydır. Yukarıdaki örneklerde, dropdown, checkbox ve radio button gibi seçim kontrol bileşenlerinin nasıl kullanılacağını öğrendiniz. Bootstrap’in sağladığı stil ve yapı ile formlarınızı daha estetik ve kullanıcı dostu hale getirebilirsiniz. Daha fazla bilgi ve detaylı bileşenler için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.