HTML’de formları kullanıcılardan veri almak için kullanırız. Aldığımız bu verileri çoğunluklar sunucuda işler ve ona göre kullanıcıya geri dönüş yaptırırız. Bu bir giriş ekranı ve iletişim formu olabilir. Bizde bu yazımızda HTML form elemanları konusunu işleyeceğiz.
Form Elemanları
HTML ‘de form elemanları <form> ve </form> etiketleri arasına yazılır. Şimdi form elemanlarını tanıyalım.
<input> Etiketi
Form elemanı denilince akla ilk <input> etiket gelir. Etiketin bir çok tipi vardır. Hemen bunları görelim.
| Tip | Açıklama |
|---|---|
| <input type=”text”> | Tek satırlık metin alanı tanımlar. |
| <input type=”radio”> | Tek tercih yapılan butonlar. |
| <input type=”checkbox”> | Birden fazla tercih yapılan onay kutuları. |
| <input type=”submit”> | Formu onaylayıp gönderebileceğiniz bir buton tanımlar. |
Yazı Alanları
Metin girişi olarak kullanılır. Kullanıcıya tek satırlık bir yazı alanı tanımlar.
Kullanımı :
<form>
<b>Ad:</b><br>
<input type="text" id="ad" name="ad"><br>
<b>Soyad :</b><br>
<input type="text" id="soyad" name="soyad">
</form>Çıktısı :
Radio Butonlar
Bir çok seçenek içerisinden bir tanesini seçebileceğiniz butonlar tanımlar. Hemen örneğimizi görelim.
<form>
<input type="radio" id="erkek" name="erkek" value="erkek">
Erkek<br>
<input type="radio" id="kadin" name="kadin" value="kadin">
Kadın
</form>Çıktısı :
Onay Kutuları
Onay kutuları, yani checkbox’lar ile sıfır yada daha fazla seçim yapabilirsiniz. Örneğin;
<form action="/action_page.php">
<b>Hobilerin</b> <br>
<input type="checkbox" name="k1" value="ing">Kitap okumak
<br>
<input type="checkbox" name="k2" value="fr">Bisiklete binmek
<br>
<input type="checkbox" name="k3" value="alm">Bilgisayar Oyunları
</form>Çıktısı :
Gönder Butonu
Verileri sunucuya göndermek için bir buton oluşturur.
<form>
<b>Ad:</b><br>
<input type="text" id="ad" name="ad"><br>
<b>Soyad :</b><br>
<input type="text" id="soyad" name="soyad">
<input type="submit" value="Gönder">
</form>Çıktısı :
Select Etiketi
Açılır liste oluşturmak için kullanırız. Hemen örnek kullanımını görelim.
<form>
En sevdiğniz meyve : <br>
<select id="meyve" name="meyve">
<option value="elma" selected>Elma</option>
<option value="çilek">Çilek</option>
<option value="frambuaz">Frambuaz</option>
</select>
<input type="submit">
</form>Not : En başta görünmesini istediğiniz maddeye selected kodunu eklemeniz yeterli. Örnek olarak elma seçeneğinde görebilirsiniz.
Çıktısı:
Textarea Etiketi
Kullanıcıların çok satırlı bir alana yazı yazmasını textarea etiketi ile sağlarız.
<form>
Mesajınız : <br>
<textarea name="yazı" rows="5" cols="20">
</textarea>
</form>Çıktısı :
Bu yazımızad HTML form elemanlarını inceledik. Diğer HTML derslerimizi de okumak isterseniz buradan tümüne ulaşabilirsiniz.