Form

Gralig özelleştirilmiş onay butonları, radyo butonları, anahtar butonları ve basit inputlar içeren form öğeleri sağlar.

Adınız

<div class="gra-form-group">
  <label for="test-input-text">Adınız</label>
  <input id="test-input-text" type="text" placeholder="Adınız" />
</div>

Basit Form Örneği

Gralig Form

Adınız

Email Adresiniz

Devre Dışı

Abone Olun

Evet

Hayır

Kullanım Şartları

Onay

<form>
  <fieldset class="example-form">
    <legend>
      <h5 class="gra-heading">Gralig Form</h5>
    </legend>
    <div class="gra-form-group">
      <label for="test-text">Adınız</label>
      <input id="test-text" type="text" placeholder="Adınız" />
    </div>
    <div class="gra-form-group">
      <label for="test-email">Email Adresiniz</label>
      <input id="test-email" type="email" placeholder="Email Adresiniz" />
    </div>
    <div class="gra-form-group">
      <label>Devre Dışı</label>
      <input type="text" placeholder="Devre Dışı" disabled />
    </div>
    <div class="gra-form-group">
      <label>Abone Olun</label>
      <div role="radiogroup">
        <div class="gra-custom-form-control gra-radio">
          <input class="gra-custom-form-input" id="custom-radio" type="radio" name="radio" />
          <label class="gra-custom-form-label" for="custom-radio">Evet</label>
        </div>
        <div class="gra-custom-form-control gra-radio">
          <input class="gra-custom-form-input" id="custom-radio-2" type="radio" name="radio" />
          <label class="gra-custom-form-label" for="custom-radio-2">Hayır</label>
        </div>
      </div>
    </div>
    <div class="gra-form-group">
      <label>Kullanım Şartları</label>
      <div class="gra-custom-form-control gra-checkbox">
        <input class="gra-custom-form-input" id="custom-checkbox" type="checkbox" name="checkbox" />
        <label class="gra-custom-form-label" for="custom-checkbox">Onay</label>
      </div>
    </div>
    <div class="gra-form-actions">
      <button class="gra-btn">Gönder</button>
      <button class="gra-btn gra-btn-clear">İptal Et</button>
    </div>
  </fieldset>
</form>

Arama Çubuğu

<span class="gra-search-input">
  <input type="search" name="search" placeholder="Ara..." />
</span>

Metin Alanı

<div class="gra-form-group">
    <label for="textarea">Metin Alanı</label>
    <textarea id="textarea" name="textarea" placeholder="Metninizi yazın..."></textarea>
  </div>