Bootstrap ile Responsive Web Tasarımı Eğitimi

İrem Ocaklı tarafından hazırlanmıştır...

☛Kısa metinler için input type⭐text⭐

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
➒<div class="mb-6">
➓<label>Adınız:</label>
⭐ ➊➊<input type="text" class="form-control" id="exampleInputEmail1" name="first_name">
➊➋</div>
➊➌<div class="mb-3">
➊➍<label>Soyadınız:</label>
➊➎<input type="text" class="form-control" id="exampleInputEmail1" name="last_name">
➊➏<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➊➐</div>
➊➑</div>
➊➒</form>

✍Not:16.satırdaki kaydet butonu action sayfasına yönlendirir.

Üye Kayıt Programı


☛Uzun metinler için input type ⭐Textarea⭐

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
➒<div class="mb-3 mt-3">
➓<label for="comment">Görüşlerinizi yazınız...</label>
⭐ ➊➊<textarea class="form-control" rows="5" id="comment" name="text"></textarea>
➊➋</div>
➊➌<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➊➍</form>
➊➎</div>
➊➏</div>...

Üye Kayıt Programı

☛Radio Butonlar

✎Kullanıcıyı önceden ayarlanmış seçenekler listesinden yalnızca bir seçimle sınırlamak istiyorsanız, radyo düğmeleri kullanılır.

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
⭐➒<div class="form-check">
⭐➓<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
⭐ ➊➊<label class="form-check-label" for="radio1">Kadın</label>
➊➋<div class="form-check">
➊➌<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2" >
➊➍<label class="form-check-label" for="radio1">Erkek</label>
➊➎</div>
➊➏<div class="form-check">
➊➐<input type="radio" class="form-check-input" id="radio3" name="optradio" value="option3" >
➊➑<label class="form-check-label" for="radio1">Diğer</label>
➊➒</div>
➋➊<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➋➋</form>
➋➌</div>
➋➍</div>...

Üye Kayıt Programı

☛Checkboxlar

✎Kullanıcının önceden ayarlanmış seçenekler listesinden herhangi bir sayıda seçenek seçmesini istiyorsanız onay kutuları kullanılır.

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
⭐➒<input type="checkbox" class="form-check-input" id="check1" name="option1" value="something" checked>
⭐➓<label class="form-check-label" for="check1">HTML</label>
➊➊</div>
➊➋<div class="form-check">
➊➌<input type="checkbox" class="form-check-input" id="check2" name="option2" value="something">
➊➍<label class="form-check-label" for="check2">CSS</label>
➊➎</div>
➊➏<div class="form-check">
➊➐<input type="checkbox" class="form-check-input">
➊➑<label class="form-check-label">BOOTSTRAP</label>
➊➒</div>
➋➊<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➋➋</form>
➋➌</div>
➋➍</div>...

Üye Kayıt Programı

Hangilerini biliyorsunuz?


☛Email

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
➒<div class="mb-3 mt-3">
➓<label for="email">Email:</label>
⭐➊➊<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
➊➋</div>
➊➌<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➊➍</form>
➊➎</div>
➊➏</div>...

Üye Kayıt Programı

☛Şifre

➊<div class="container">
➋div class="row">
➌<div class="col-6">
➍div class="card">
➎<div class="card-body">
➏<h2>Üye Kayıt Programı</h2>
➐<hr style=" width: 300px">
➑form method="post" action="insert.php">
➒<div class="mb-3">
➓<label for="pwd">Şifreniz:</label>
⭐➊➊<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
➊➋</div>
➊➌<div class="form-check mb-3">
➊➍<label class="form-check-label">
➊➎<input class="form-check-input" type="checkbox" name="remember">Beni hatırla</label>
➊➏</div>
➊➐<button type="submit" name="save" class="btn btn-success btn-sm">Kaydet</button>
➊➑</form>
➊➒</div>
</div>...

Üye Kayıt Programı

⇦