Bootstrap V5 Form Elemanı ve Bileşenler

Form

Form “<form>...</form>” etiketi içerisinde konumlandırılan input, button, img, table vb. gibi elementlerden meydana gelen web sayfası ile kullanıcı arasındaki etkileşimi sağlayar.

Form Tipleri

Elementler görünüm açısından 2 (iki) farklı form yapısı içerisinde kullanılabilir. Bunlar; Horizontal (Yatay) form ve Inline (Satır içi) formdur.

Horizontal (Yatay) Form

Form elemanlarının alt alta konumlandırılarak gösterilmesiyle ortaya çıkan form şeklidir.

Inline (Satır içi) Form

Form elemanlarının yan yana konumlandırılarak gösterilmesiyle ortaya çıkan form şeklidir.

Form Kontrolleri

Web sayfası üzerinde kullanıcıdan bilgi girişi almak için kullanılırlar.

Select (Açılır Liste)

“Select” web sayfasında açılır listeler oluşturmak için kullanılır. “<select>” etiket tanımı ile kullanılır.

Check (Onay Kutusu) ve Radio (Radyo)

“Check (Onay Kutusu) ve Radio (Radyo)”, kullanıcıdan seçim yoluyla bilgi toplamak için kullanılan kontrollerdir. Kullanıcının bir veya birden fazla seçimin yapılması gereken durumlarda "checkbox", sadece bir adet seçim yapılması gereken durumlarda ise "radio" kontrolü kullanılır.

Input Group

Aynı amaca hizmet eden birden fazla HTML elementin grup hâline getirilerek estetik bir yapıya kavuşturulmasıdır.

Form Validation (Doğrulama) İşlemleri

Kullanıcıdan alınan bilgilerin işlenmeden önce kontrol edilmesini sağlayan bir yapıdır. Sayfa üzerindeki bir alan için veri girişinin zorunlu hâle getirilmesi, girilen verinin istenen türde, formatta, uzunlukta veya aralıkta olup olmadığının kontrol edilmesi gerektiği durumlarda kullanılır.

Components (Bileşenler)

Bootstrap tarafından geliştirilmiş çok sayıda bileşen bulunmaktadır. Bileşenler bir web sayfasının geliştirilmesi için gerekli ve kullanıcının ihtiyacına göre özelleştirilebilir yapılardır.

Accordion

Dikey olarak açılıp kapanabilen paneller olarak tanımlanabilir. Varsayılan çalışma şekli; bir panelin içeriği görüntülenirken diğer paneller daraltılmak suretiyle kapatılır.

Alert

Web sayfası üzerinde kullanıcıya geri dönüş mesajları vermek için kullanılan esnek mesaj yapısıdır. Hemen her türde mesaj türü (bilgi, uyarı, hata vb.) için özelleştirilebilir.

Badge

Sayfada yer alan bir bileşenin içerdiği ifadeye dikkat çekmek, verileri etiketlemek ya da adet bildiriminde bulunmak için kullanılabilir. Anlamsal renk ifadeleriyle biçilendirilebilir.

Breadcrumb

Geçerli web sayfasının konumunu CSS yardımıyla hiyerarşik bir şekilde gösteren bir bileşendir.

Button

Bir web sayfasında yer alan form üzerinde tıklanabilir bir düğme oluşturmak için kullanılır. Bootstrap anlamsal renk ifadeleri ile biçimlendirilebilirler.

Card

“Card”, birden çok değişken ve seçenek içeren, esnek ve aynı zamanda genişletilebilir bir bileşendir.

List Group

Standart HTML yapısı içerisinde de yer alan “<ol>ve<ul>” listelerinin Bootstrap ile davranış, görünüş ve fonksiyonel olarak geliştirilmiş hâlidir.

Modal

“Modal” JavaScript yardımıyla çalışan bir bileşendir. Kullanıcıya uyarı, bilgi, hata vb. bilgi mesajları vermek ya da bilgi girişi yapmak için kullanılabilir.

Tab

İçeriklerin yatay ya da dikey sekmeler halinde gruplandırılarak gösterilmesini sağlar.

Navbar

Web sayfası üzerindeki menü ya da gezinme çubuğu olarak kullanılabilen bir bileşendir. İçerisinde birçok türden element barındırabilir ve özelleştirilebilir.

Toast

“Toast” bileşeni “JavaScript” ile birlikte kullanılır. Bir web sayfası üzerinde işlem gerçekleştiren kullanıcıya işlem sonrası geri dönüş mesajı verilmesini sağlayan bir bileşendir.