50 – Html Form Elemanları
Html formlarında kullanabileceğimiz elemanlar açıklanmıştır.
Html Form <input>
Ençok kullanılan html form elemanıdır.
İçerisine aldığı type attribute sayesinde form içerisine farklı özelliklerde veri girilmesini sağlar.
Örneğin bir tarih alanı, bir metin alanı bir buton gibi.
Çok geniş kapsamlı olduğu için bir sonraki 51. derste yalnızca inputu ele aldık.
Örnek
<form>
<label for="adi">Adınız:</label><br>
<input type="text" id="adi" name="adi"><br>
<label for="soyadi">Soy Adınız:</label><br>
<input type="text" id="soyadi" name="soyadi">
</form>Html Form <label>
label html öğeleri için bir etiket ismi sağlar.
label içerisine for attribute alır ve buraya verilen isim html öğesinin id ismi ile aynı olmalıdır. Bu şekilde birbiri ile ilişkili hale gelir.
Kullanıcı ekran okuyucu özelliğini kullanıyorsa buraya odaklandığında ekran okuyucu etiketi okuyacaktır.
Yukarıdaki örnekte label etiketinin for attribute ile input elemanının id attribute değerleri aynı olduğuna dikkat edin.
Html form <select>
select açılabilir bir liste sağlar.
<option> ile içerisine liste öğeleri yerleştirilir.
varsayılan olarak listedeki ilk öğe seçli gelir. Değiştirmek için selected kullanılır.
Örnek
<label for="ehliyet">Ehliyet Tipini Seçin: </label>
<select id="ehliyet" name="ehliyet">
<option value="A">A Sınıfı</option>
<option value="B">B Sınıfı</option>
<option value="C">C Sınıfı</option>
<option value="D">D Sınıfı</option>
</select>Farklı bir liste elemanının seçili gelmesi için selected kullanın.
selected kullanımı Örnek
<option value="B" selected>B Sınıfı</option>Liste içerisinde görünür öğe sayısı – size attribute
size attribute listeyi açık hale getirir ve belirttiğimiz sayı kadarı gösterilir. Diğerleri scroll ile aşağı inilerek seçilebilir.
Kullanım Şekli: <select id=”araba” name=”araba” size=”3″>
Örnek
<html>
<head>
<title>Html Form Select - Size</title>
</head>
<body>
<label for="araba">Marka Seçin</label>
<select id="araba" name="araba" size="2">
<option value="bmw">BMW</option>
<option value="mer">Mercedes</option>
<option value="audi">Audi</option>
<option value="togg">TOGG</option>
</select>
</body>
</html>Listeden çoklu seçim yapmak – multiple attribute
Listeden birden fala öğe seçmek için multiple attribute kullanılır.
Ctrl tuşuna basık bir şekilde çoklu öğe seçebilirsiniz.
Örnek
<label for="araba">Marka Seçin</label>
<select id="araba" name="araba" size="4" multiple>
<option value="bmw">BMW</option>
<option value="mer">Mercedes</option>
<option value="audi">Audi</option>
<option value="togg">TOGG</option>
</select>Html form <textarea>
Textarea içerisine çok satırlı yazı yazabileceğimiz alanlardır.
Textarea rows attribute sayesinde satır sayısı belirtilebilir.
Textarea cols attribute sayesinde görünür genişliği belirtilebilir.
İçerisinde style attribute kullanarak yine genişlik ve yükseklik ayarı belirtilebilir.
textarea Örnek
<textarea name="yazi" rows="5" cols="40">
Burası texarea alanıdır. 5 satırlık bir alan tanımladık.
</textarea>Style attribute kullanarak aşağıdaki gibi özelleştirme yapabiliriz.
textarea style Örnek
Html form <button>
Buton bizim tıklanabilir bir öğe elde etmemizi sağlar
type attribute değeri için her zaman button diye belirtin.
onclick attribute değerine tıklandığında sergileyeceği davranış belirtilir. Bu bir javascript kodu olabileceği gibi bir fonksiyon olabilir.
buton oluşturma Örnek
<button type="button" onclick="alert('Merhaba Html')"> Tıkla </button>Form Öğelerini Gruplandırma <fieldset>
fieldset form öğelerini bir grup içerisine toplamamızı sağlar.
Form Öğeleri için Başlık Kullanımı <legend>
Form öğelerini gruplandırıp bir başlık belirtmek için legend etiketi kullanılır.
form öğelerini gruplandırma Örnek
<form action="formOkuPost.php" method="post">
<fieldset>
<legend>Personel Bilgileri</legend>
<label for="adi">Adınız: </label> <br/>
<input type="text" id="adi" name="adi"><br/>
<label for="soyad">Soyadınız: </label><br/>
<input type="text" id="soyadİ" name="soyadİ"><br/>
<input type="submit" value="Gönder">
</fieldset>
</form>Aşağıdaki gibi bir çıktıya sahip olacağız:
Html Form Veri Listesi Oluşturma – datalist
Datalist form içerisinde önceden tanımlanmış bir liste, veri kümesi oluşturmamızı sağlar.
input elemanının list attribute değeri ile datalistin id attribute değeri aynı olmalı ve bu şekilde birbirileri ile ilişki içerisinde olurlar.
input elemanının name attribute değeri ise bizim formu gönderdiğimiz sayfanın okuyacağı değerdir.
Örnek
<form action="formOkuAracGet.php" method="get">
<fieldset>
<legend>Araç Listesi</legend>
<input list="arac" name="arac">
<datalist id="arac">
<option value="TOGG">
<option value="BMW">
<option value="MERCEDES">
<option value="AUDİ">
<option value="RENAULT">
<option value="FİAT">
</datalist>
<input type="submit" value="Gönder">
</fieldset>
</form>Bu form sunucu tarafında çalışan formOkuAracGet.php sayfasına gönderilmiştir. Merak edenler için içeriği aşağıda sunulmuştur.
formOkuAracGet.php içeriği:
<?php
$marka = $_GET['arac'];
echo "Form verisi alındı ve işlendi, Buna göre;";
echo "<br />";
echo "Seçtiniğiniz Marka: " ;
echo $marka;
Html Forma slider Ekleme – range
html form içerisinde bir slider çubuğu eklenebilir ve bu değerler okunup işlem yapılabilir.
Html form slider yapımı Örnek
<form oninput="sonuc.value=parseInt(slider.value)">
<p>Slider 0 ile 100 arasında değişmektedir.</p>
<input type="range" id="slider" name="slider" value="50">
<p>Sonuç: </p>
<output name="sonuc" for="slider"></output>
</form>Html Form içerisinde matematik işlemi
Html form içerisinde toplama çıkarma gibi işlemler yapılabilir.
Örnek
<form oninput="sonuc.value=parseInt(slider.value)+parseInt(sayiGir.value)">
<label for="slider" > Bir Sayı Seçin</label> <br/>
0<input type="range" id="slider" name="slider" value="50">100+ <br/>
<label for="sayiGir">Bir Sayı Girin: </label><br/>
<input type="number" id="sayiGir" name="sayiGir" value="0"><br/>
<p>Sonuç:
<output name="sonuc" for="sonuc"></output> </p>
</form>