Foundation 6 Formlar

Foundation 6’da text, date, datetime, datetime-local, email, month, number, password, search, tel, time, url, ve week veri giriş tiplerini kullanarak formlar oluşturabiliriz.

text inputları oluşturma

<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-6 cell">
        <label>Adınz
          <input type="text">
        </label>
      </div>
      <div class="medium-6 cell">
        <label>Soyadınız
          <input type="text">
        </label>
      </div>
    </div>
  </div>
</form>
Foundation Text Inputları
<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-4 cell">
          <label>Adınz
          <input type="text">
        </label>
      </div>
      <div class="medium-4 cell">
          <label>Soyadınız
          <input type="text">
        </label>
      </div>
      <div class="medium-4 cell">
          <label>Doğum Yeriniz
          <input type="text">
        </label>
      </div>
    </div>
  </div>
</form>
Foundation Text Inputları

number veri giriş tipi

<label>
  Kaç yaşındasın ? 
  <input type="number" value="100">
</label>

textarea kullanımı

<label>
   Mesajınızı Yazınız
   <textarea></textarea>
</label>

select kullanımı

<label>Açılır Menü
  <select>
    <option value="bmw">BMW</option>
    <option value="mercedes">Mercedes</option>
    <option value="fiat">Fiat</option>
    <option value="ford">Ford</option>
  /select>

Checkbox ve Radio Butonların kullanımı

<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite Color</legend>
    <input type="radio" name="color" value="Red"><label>Red</label>
    <input type="radio" name="color" value="Blue"><label>Blue</label>
    <input type="radio" name="color" value="Yellow"><label>Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Choose Your Favorite Cars</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Mercedes</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">BMW</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Audi</label>
  </fieldset>
</div>
289 Views
42050cookie-checkFoundation 6 Formlar

Leave a Reply

Your email address will not be published. Required fields are marked *