HTML Form Öğeleri!

#HTML

HTML Form öğeleri input, select, textarea, button, datalist, output gibi etiketlerden oluşur ve bu tür etiketlerle kullanıcı bilgileri işlenir.

HTML Form Öğeleri!

Bu bölümde tüm HTML form öğeleri açıklanmaktadır.

<input> Öğesi

En önemli form elemanı <input>elemandır.

<input>Eleman type özniteliğine bağlı olarak çeşitli şekillerde gösterilebilir.

<input name="firstname" type="text">

Eğer typeözellik belirtilmezse, giriş alanı varsayılan tip alır: “text”.

Tüm farklı giriş tipleri bir sonraki bölümde ele alınmıştır.

<select> Elemanı

<select>Eleman bir açılır liste tanımlar:

<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Çıktısı;

See the Pen form select by ArmyYazılım (@armyyazilim) on CodePen.

<option>Elemanlar seçilebilir bir seçenek tanımlar.

Varsayılan olarak, açılır listedeki ilk öğe seçilir.

Önceden seçilmiş bir seçenek tanımlamak için bu seçeneğe “selected” niteliğini ekleyin :

<option value="fiat" selected>Fiat</option>

Görünür Değerler:

Görünür değerlerin sayısını belirtmek için  “size” niteliği kullanın :

<select name="cars" size="3">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Çıktısı;

See the Pen görünür select by ArmyYazılım (@armyyazilim) on CodePen.

Birden Çok Seçime İzin Ver:

multipleKullanıcının birden fazla değer seçmesine izin vermek için özelliği kullanın :

<select name="cars" size="4" multiple>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="fiat">Fiat</option>
  <option value="audi">Audi</option>
</select>

Çıktısı;

See the Pen html form çoklu seçim by ArmyYazılım (@armyyazilim) on CodePen.

<textarea> Elemanı

<textarea>Eleman, bir çok hatlı bir giriş alanı (tanımlayan bir metin alanı ):

<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

Çıktısı;

See the Pen html textarea by ArmyYazılım (@armyyazilim) on CodePen.

rowsÖznitelik bir metin alanında satırın genişliğini belirtir.

colsÖznitelik bir metin alanının sütununun genişliğini belirtir.

Bu, yukarıdaki HTML kodunun bir tarayıcıda nasıl gösterileceğine yukarıdaki çıktıdan bakabilirsiniz.

Metin alanının boyutunu CSS kullanarak da tanımlayabilirsiniz:

<textarea name="message" style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>

Çıktısı;

See the Pen html textarea style css by ArmyYazılım (@armyyazilim) on CodePen.

<button> Elemanı

<button>Eleman renkli tıklanabilir buton tanımlar:

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Çıktısı;

Bu, HTML kodunun bir tarayıcıda nasıl gösterileceğine bakabilirsiniz:

See the Pen buton form html by ArmyYazılım (@armyyazilim) on CodePen.

Not: Her zaman düğme öğesinin türünü belirtin . Farklı tarayıcılar, düğme öğesi için farklı varsayılan türleri kullanabilir.

HTML5 Form Öğeleri

HTML5, aşağıdaki form öğelerini ekledi:

  • <datalist>
  • <output>

Not: Tarayıcılar bilinmeyen öğeleri göstermiyor. Eski tarayıcılarda desteklenmeyen yeni öğeler, web sayfanızı “bozmaz”.

HTML5 <datalist> Elemanı

<datalist>Öğesi bir  <input>elemanı için önceden tanımlanmış seçenekler listesini belirtir.

Kullanıcılar, verileri girerken önceden tanımlanmış seçeneklerin açılır bir listesini görecektir.

İnput elemanının list değeri ile datalist elemanının id (kimlik) değeri aynı olmalıdır.

<form action="/action_page.php">
  <input list="browsers">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
</form>

Çıktısı;

See the Pen html form input datalist by ArmyYazılım (@armyyazilim) on CodePen.

HTML5 <output> Elemanı

<output>(Bir komut tarafından gerçekleştirilen gibi) elemanı bir hesaplama sonucunu temsil etmektedir.

<form action="/action_page.php"
  oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  0
  <input type="range"  id="a" name="a" value="50">
  100 +
  <input type="number" id="b" name="b" value="50">
  =
  <output name="x" for="a b"></output>
  <br><br>
  <input type="submit">
</form>

Çıktısı;

See the Pen html işlem output by ArmyYazılım (@armyyazilim) on CodePen.

HTML Form Öğeleri

EtiketlerAçıklama
<form> Kullanıcı girişi için bir HTML formu tanımlar
<input> Giriş kontrolünü tanımlar
<textarea> Çok satırlı giriş kontrolünü tanımlar (metin alanı)
<label> <input> öğesi için bir etiket tanımlar.
<fieldset> Bir formdaki ilgili elemanları gruplandırır
<legend> Bir <fieldset> öğesi için bir başlık yazısı tanımlar.
<select> Bir açılır liste tanımlar
<optgroup> Açılır listeden bir grup ilgili seçenek tanımlar.
<option> Açılır listede bir seçenek tanımlar.
<button> Tıklanabilir bir düğme tanımlar
<datalist> Giriş kontrolleri için önceden tanımlanmış seçeneklerin listesini belirtir.
<output> Bir hesaplamanın sonucunu tanımlar

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

İçerik Metası
İbrahim Bozkurt ///