En son web geliştirme öğreticiler
 

W3.CSS Giriş


Girdi Formu










En Etiketleri

Girdi Formu

Örnek

<form class="w3-container">

<label>First Name</label>
<input class="w3-input" type="text">

<label>Last Namel</label>
<input class="w3-input" type="text">

</form>
Kendin dene "

Alt Etiketler

Girdi Formu

Örnek

<form class="w3-container">

<input class="w3-input" type="text">
<label>First Name</label>

<input class="w3-input" type="text">
<label>Last Name</label>

</form>
Kendin dene "

Girdi Kartları

Başlık


Örnek

<div class="w3-card-4">

<div class="w3-container w3-green">
  <h2>Header</h2>
</div>

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>

</div>
Kendin dene "

Yeşil Etiketleri

Class = "w3-label" ile etiketler varsayılan olarak yeşil şunlardır:


Örnek

<form class="w3-container">

<label class="w3-label">First Name</label>
<input class="w3-input" type="text">

<label class="w3-label">Last Name</label>
<input class="w3-input" type="text">

</form>
Kendin dene "

Etiketleri doğrulama

Doğrulama etiketler kırmızı, giriş, geçerli olduğunda yeşile döner.

doğrulayarak etiketleri yapmak için, lütfen w3 etiketli sınıfına bir w3-validate sınıfını ekleyin.


Örnek

<form class="w3-container">

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">First Name</label>

<input class="w3-input" type="text" required>
<label class="w3-label w3-validate">Last Name</label>

<input class="w3-input" type="email" required>
<label class="w3-label w3-validate">Email</label>

</form>
Kendin dene "

Renkli Etiketleri

Etiketlerinizi renklendirmek için w3 metin renkli sınıfların herhangi birini kullanın:

Kayıt olmak

Örnek

<form class="w3-container">

<label class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
 
<label class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">

<button class="w3-btn w3-blue">Register</button>
 
</form>
Kendin dene "

bordered Girdi

Bordürlü girdileri oluşturmak için w3 ötesi sınıfını ekleyin:


Örnek

<input class="w3-input w3-border" type="text">
Kendin dene "

Yuvarlak Sınırlar

Yuvarlatılmış sınırları oluşturmak için w3-yuvarlak sınıfların herhangi birini kullanın:


Örnek

<input class="w3-input w3-border w3-round" type="text">

<input class="w3-input w3-border w3-round-large" type="text">
Kendin dene "

Çerçevesiz Girdi

w3 giriş sınıfı varsayılan olarak bir alt sınır vardır. Kenarlıksız girişi istiyorsanız, w3 ötesi-0 sınıfını ekleyin:


Örnek

<form class="w3-container w3-light-grey">
  <label>First Name</label>
  <input class="w3-input w3-border-0" type="text">

  <label>Last Name</label>
  <input class="w3-input w3-border-0" type="text">
</form>
Kendin dene "

Renkler

favori stilleri ve renkleri kullanmak için çekinmeyin:

Girdi Formu

Kayıt olmak

Örnek

<div class="w3-container w3-teal">
  <h2>Input Form</h2>
</div>

<form class="w3-container">
  <label class="w3-label w3-text-teal"><b>First Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <label class="w3-label w3-text-teal"><b>Last Name</b></label>
  <input class="w3-input w3-border w3-light-grey" type="text">

  <button class="w3-btn w3-blue-grey">Register</button>
</form>
Kendin dene "

Hoverable girişler

W3-hover- renk sınıfları Fare ile üzerine girişi alanına bir arka plan rengi ekler:

Örnek

<input class="w3-input w3-hover-green" type="text">
<input class="w3-input w3-border w3-hover-red" type="text">
<input class="w3-input w3-border w3-hover-blue" type="text">
Kendin dene "

Hareketli Girdiler

Bu odak alır w3-hareketlendirmek giriş sınıfı% 100 bir giriş alanının genişliği dönüştürür:

Örnek

<input class="w3-input w3-animate-input" type="text" style="width:30%">
Kendin dene "

Onay kutuları

Örnek

<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>

<input class="w3-check" type="checkbox">
<label class="w3-validate">Sugar</label>

<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label>
Kendin dene "

Radyo Düğmeleri

Örnek

<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>

<input class="w3-radio" type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>

<input class="w3-radio" type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label>
Kendin dene "

Seçenekler

Örnek

<select class="w3-select" name="option">
  <option value="" disabled selected>Choose your option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
Kendin dene "

Bordered Menü

Örnek

<select class="w3-select w3-border" name="option">
Kendin dene "

bir Grid Formu Elemanları

Bu örnekte, giriş aynı hat üzerinde görünür hale getirmek için W3.CSS' Duyarlı Izgara Sistemi kullanımı (on smaller screens, they will stack horizontally with 100% width) . Daha sonra bu konuda daha fazla öğreneceksiniz.

Örnek

<div class="w3-row-padding">
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="One">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-third">
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
Kendin dene "

etiketlerle İki sütun düzeni:

Örnek

<div class="w3-row-padding">
  <div class="w3-half">
    <label>First Name</label>
    <input class="w3-input w3-border" type="text" placeholder="Two">
  </div>
  <div class="w3-half">
    <label>Last Name</label>
    <input class="w3-input w3-border" type="text" placeholder="Three">
  </div>
</div>
Kendin dene "