Stil Sayfaları (CSS) 20 - Form Sınıfı

 4.4.3.14. Form Sınıfı

Bootstrap Framework ile HTML5’te bulunan tüm form elemanları biçimlendirilebilir. Form

elemanlarının biçimlendirme işlemleri “form-group, form-control, form-check” sınıfları ile yapılmaktadır.

<input> Elemanı: Type özelliği; text, password, datetime, datetime-local, date, month, time,

week, number, email, url, search, tel, ve color için biçimlendirme yapılabilir.

<form action="/index.html">

<div class="form-group">

<label >Kullanıcı Adı:</label> <input type="text" class="form-control" >

</div>

<div class="form-group">

<label >Şifre:</label> <input type="password" class="form-control">

</div>

</form>

<textarea> Elemanı

<div class="form-group">

<label">Açıklama:</label> <textarea class="form-control" rows="3"> </textarea>

</div>

<select> Elemanı

<div class="form-group">

<label>Öğrenim Durumu:</label>

<select class="form-control">

<option>İlkokul</option> <option>Ortaokul</option> <option>Lise</option>

</select>

</div>

<checkbox> Elemanı

<div class="form-check-inline">

<label class="form-check-label">

<input type="checkbox" class="form-check-input">Web tasarım yapabiliyorum. </label>

</div>

<div class="form-check-inline">

<label class="form-check-label">

<input type="checkbox" class="form-check-input">Mobil uygulama yapabiliyorum. </

label>

</div>

<radio> Elemanı

<div class="form-check">

<label class="form-check-label">

<input type="radio" class="form-check-input"> name="secim">Mezun </label>

</div>

<div class="form-check">

<label class="form-check-label">

<input type="radio" class="form-check-input"> name="secim">Mezun değil </label>

</div>

Sıra Sizde

Kullanıcıların; isim, soy isim, mail, adres, telefon, öğrenim durumu bilgilerini girebilecekleri

bir iletişim formu tasarlayınız.