Bootstrap, input group bileşeni ile birden fazla form elemanını (örneğin, metin kutusu ve buton) bir araya getirerek daha kullanıcı dostu formlar oluşturmanıza olanak tanır. Bu bileşen, giriş alanlarının yanında ikonlar, etiketler veya butonlar gibi ek öğeler yerleştirerek kullanıcı etkileşimini geliştirir.
1. Input Group Oluşturma
Input group, <div class="input-group"> sınıfını kullanarak oluşturulur. İşte bir input group örneği:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
2. Örnek Açıklaması
-
<div class="input-group">: Input group bileşenini oluşturur. -
<input>: Giriş alanını temsil eder. -
<div class="input-group-append">: Giriş alanının sonuna yerleştirilecek öğeleri belirtir (örneğin, buton). -
<button>: Giriş alanına eklenen buton.
3. İkon Ekleme
Input group’a ikon eklemek için bir span elementi ile birlikte input-group-prepend sınıfını kullanabilirsiniz. Örnek:
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı">
</div>
4. Çoklu Input Group
Birden fazla giriş alanı ve buton içeren bir input group oluşturmak da mümkündür. Örnek:
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-posta Adresi" aria-label="E-posta">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Şifre" aria-label="Şifre">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
5. Tam Ekran Input Group
Tam genişlikte bir input group oluşturmak için w-100 sınıfını kullanabilirsiniz:
<div class="input-group mb-3 w-100">
<input type="text" class="form-control" placeholder="Tam Genişlikte Giriş" aria-label="Tam Genişlikte Giriş">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
6. Örnek Form
Aşağıda input group 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 Input Group Örneği</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>Input Group Örneği</h2>
<form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="Kullanıcı Adı" aria-label="Kullanıcı Adı">
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="E-posta Adresi" aria-label="E-posta">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Şifre" aria-label="Şifre">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Gönder</button>
</div>
</div>
</form>
</div>
</body>
</html>
7. Özet
Bootstrap ile input group bileşeni kullanarak kullanıcı dostu ve görsel olarak çekici formlar oluşturabilirsiniz. Giriş alanları, ikonlar ve butonlar gibi bileşenleri bir araya getirerek kullanıcı etkileşimini artırabilirsiniz. Daha fazla bilgi ve detaylı bileşenler için Bootstrap Belgeleri sayfasını ziyaret edebilirsiniz.