AnasayfaBootstrapBootstrap Forms Kullanımı
34

Bootstrap Forms Kullanımı

nhtctn nhtctn
21 Eylül 2020 Bootstrap

<input>,<textarea>,<select> kutuları için .form-control sınıfını kullanarak satırı olduğu gibi kaplayan ve padding uygulanmış daha güzel görünüm elde edebiliyoruz.

<input type="text" class="form-control">

** bir input kontrolü ve label ‘i barındıran bir div etiketine sınıf olarak .form-group dediğimizde elemanları gruplayarak uygun bir margin değeri vermiş oluyoruz.

** kontrolleri büyüklük olarak .form-control-sm or .form-control-lg sınıfları ile ayarlayabiliriz.

 <div class="form-group">
    <label for="usr">Name:</label>
    <input type="text" class="form-control" id="usr">
  </div>

Bir input kontrolünün başına ya da sonuna bir icon ya da bir text eklemek istediğimizde kullanıyoruz.
** Eklemek istediğimiz eleman ile input kontrolünü .form-group içine almalıyız.
** Eğer eklemek istediğimiz nesneyi input kontrolünün başına ekliyorsak .input-group-prepend sonuna ekliyorsak .input-group-append sınıflarını kullanmalıyız.
** input-group’ a vereceğimiz .input-group-sm ve .input-group-lg sınıfları ile büyüklük ayarlaması yapabiliriz.

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
  </div>

  <div class="input-group input-group-lg">
    <input type="text" class="form-control" placeholder="Search">
    <div class="input-group-append">
      <button class="btn btn-success" type="submit">Go</button>
    </div>
  </div>

Form Örnekleri

<form action="">

    <div class="form-group">
        <label for="name">Name</label>
        <input type="text" id="name" class="form-control" placeholder="isminizi giriniz">
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" class="form-control" placeholder="email giriniz">
        <small class="form-text text-muted">
            lütfen mailinizi giriniz.
        </small>
    </div>

    <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" class="form-control" placeholder="isminizi giriniz">
    </div>

    <div class="form-group">
        <label for="city">City</label>
        <select name="city" id="city" class="form-control">
            <option value="0">İstanbul</option>
            <option value="1">Ankara</option>
            <option value="2">İzmir</option>

        </select>
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <textarea name="message" id="message" rows="5" class="form-control"></textarea>
    </div>

    <div class="form-group">
        <legends>Hobies</legends>
        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox">Running
            </label>
        </div>

        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox">Football
            </label>
        </div>

        <div class="form-check">
            <label class="form-check-label">
                <input type="checkbox">Reading
            </label>
        </div>
    </div>

    <div class="custom-control custom-checkbox">
        <input id="ch" type="checkbox" class="custom-control-input">
        <label class="custom-control-label" for="ch">Check</label>
    </div>

    <div class="custom-control custom-radio">
        <input id="rd" type="radio" class="custom-control-input">
        <label class="custom-control-label" for="rd">Check</label>
    </div>


    <div>
        <div class="custom-control custom-radio custom-control-inline">
            <input id="cr1" type="radio" class="custom-control-input" name="example">
            <label class="custom-control-label" for="cr1">Custom Radio 1</label>
        </div>

        <div class="custom-control custom-radio custom-control-inline">
            <input id="cr2" type="radio" class="custom-control-input" name="example">
            <label class="custom-control-label" for="cr2">Custom Radio 2</label>
        </div>
    </div>
</form>
  <form action="">

    <div class="input-group mt-3">

      <input type="text" class="form-control">
      <div class="input-group-append">
          <span class="input-group-text" id="ig">@gmail.com</span>
      </div>
  </div>


  <div class="input-group mt-3">
      <div class="input-group-prepend">
          <span class="input-group-text" id="ig">https://</span>
      </div>
      <input type="text" class="form-control">

  </div>

<div class="clearfix mt-4">
  
  <div class="w-50 float-left">
       <div class="form-group">
      <label for="name">Name</label>
      <input type="text" id="name" class="form-control" placeholder="isminizi giriniz">
  </div>
  </div>
  <div class="w-50 float-left pl-2">
       <div class="form-group">
      <label for="surname">SurName</label>
      <input type="text" id="surname" class="form-control" placeholder="soyisminizi giriniz">
  </div>
  </div>
</div>
</form>

Yorum yazın

BENZER YAZILAR