Html ile Web İşlemleri 26 - Form Elemanları (Input ve Button)

3.7. Form Elemanları

Formlar, web sitesi ziyaretçilerinden bilgi almayı sağlar. İnternet ortamını dergi, gazete, televizyon
vb. ortamlardan ayıran en önemli özelliklerden biri formlardır. Formlar aracılığı ile geribildirim,
yorum, öneri, şikâyet veya sipariş işlemleri çok kısa sürede yapılır.

3.7.1. Formun Tanımı

Form, kullanıcının veri girişi yapmasını ve sunucuya göndermesini sağlayan yapılardır. Form
kullanılarak dinamik HTML belgeleri oluşturulur. Formlar aracılığıyla siteyi ziyaret eden kullanıcılar
siteye üye olabilir, e-posta gönderebilir, herhangi bir ürün satın alabilir.

3.7.2. Form Oluşturmak

Form oluşturmak için üç temel form elemanı kullanılır: <form>, <label> ve <input> etiketi.

<form> etiketi, form oluşturmak için kullanılır. </form> kapama etiketi ile kullanılır. <form>
bloku, diğer tüm form kontrollerini oluşturan etiketleri içine alarak kullanıcının veri girişi yapmasını
sağlayan bir yapı tanımlar (Görsel 3.42).

Input, “girdi” anlamına gelir ve kullanıcıdan alınan verileri sunucuya göndermek için kullanılır.

Label, “etiket” anlamına gelir ve form elemanlarının başlıkları, bu eleman içine yazılır. <label>

etiketi </label> kapama etiketi ile kullanılır.

<form name="giris" action="giris.html" method="get" >
<label>Ad:</label> <input type="text"/> <br/><br/>
<label>Soyad: </label> <input type="text"/> <br/><br/>
<input type="submit" value="Gönder"/>
</form>

Görsel Eklenecek

Tablo 3.13’te <form> etiketi ile kullanılan özellikler ve görevleri verilmiştir.

Tablo 3.13: <form> Etiketi ile Kullanılan Özellikler ve Görevleri

Tablo Eklenecek

3.7.3. Form Elemanları

Form elemanları <form> … </form> etiketleri arasında yazılır. <form> etiketleri dışında yazılan
form elemanı, görsel olarak oluşur fakat etkin değildir. Form özelliği kullanılarak <form> bloku dışında
oluşturulan veri giriş elemanı o forma dâhil edilir.

3.7.3.1. <input> Etiketi

<input> etiketi, genel amaçlı kullanılan form elemanıdır. <input> etiketi içinde kullanılan type
özelliğinin alacağı değere göre form elemanını oluşturur. <input> etiketinin kapama etiketi bulunmaz.

Type Özelliğinin Alabileceği Standart Veri Tipleri

Text, tek satırlık yazı yazılabilecek alan ekler.

Ad:<input type="text" name="isim"/><br/>
Soyad:<input type="text" name="soyisim"/>

Password, parola yazmak için kullanılır. Metin kutusuna yazılan karakterler daire karakteri veya
yıldız (*) karakteri ile gösterilir.

Kullanıcı:<input type="text" name="kullanici"/><br/>
Şifre: <input type="password" name="sifre"/>

Checkbox, onay kutusu oluşturmak için kullanılır. Çoklu seçim yapmaya izin verir.

<input type="checkbox" name="kutu1" checked="on"/>HTML<br/>
<input type="checkbox" name="kutu2"/>CSS<br/>
<input type="checkbox" name="kutu3"/>Java Script

Radio, radyo düğmeleri oluşturmak için kullanılır. Onay kutularından farklı olarak çoklu seçim
yapılamaz. Name özelliğinin değeri, diğer seçenekler için aynı olmalıdır.

<input type="radio" name="secim"/>Evet<br/>
<input type="radio" name="secim"/>Hayır

File, dosya seçim elemanı eklemek için kullanılır. Dosya yükleme işleminde “get metodu” kullanılmaz
ve sadece HTML kodları ile dosya yükleme işlemi gerçekleşmez. Dosya yükleme elemanı
sadece dosyanın seçilmesini sağlar.

<input type="file" name="dosya"/>

Submit, formdaki verileri kabul eder ve yollar. Reset, formdaki verileri temizler.

<form action="uye.html" method="post">
<label>Ad Soyad:</label><input type="text" name="ad" autofocus="autofocus"><
br/><br/>
<label>e-Posta:</label><input type= ><br/><br/>
<label>Şifre:</label><input type="text" name="eposta"><br/><br/>
<input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek <br/><br/>
<input type="radio" name="cinsiyet" value="kadin”> Kadın<br/><br/>
<input type="submit" value="Gönder"> <input type="reset" value="Temizle">
</form>

Sıra Sizde

Yukarıdaki <form> blokuna benzer formlar oluşturup arkadaşlarınızın oluşturdukları
ile karşılaştırınız.

Uygulama

HTML5 ile form oluşturmak için kullanılan diğer veri tiplerini yönergeler doğrultusunda
gerçekleştiriniz.

1. Adım: Temel HTML kod yapısını metin editörü kullanarak oluşturunuz.
2. Adım: <body> etiketi içine <form> bloku oluşturunuz.
3. Adım: <form> bloku içine aşağıdaki <input> değerlerini ekleyiniz.

<p>Renk seçin: <input type="color" name="renk"></p>
<p>Doğum tarihi: <input type="date" name="dogumtarihi"></p>
<p>Doğum günü:<input type="datetime" name="dogumgunu"></p>
<p>Ay ve Yıl: <<input type="month" name="ay"></p>
<p>Hafta ve Yıl: <input type="week" name="hafta"></p>
<p>Randevu saati: <input type="time" name="randevusaat"></p>
<p>Randevu tarihi ve saati: <input type="datetime-local" name="randevutarih"></p>
<p>E-posta: <input type="email" name="eposta"></p>
<p>Web sayfanız: <input type="url" name="weburl"></p>
<p>Sayı (1-9): <input type="sumber" name="sec" min="1" max="9"></p>
<p>Parola: <input type="password" name="sifre"></p>
<p>Aralık (1-9): <input type="range" name="secim" min="1" max="9"></p>
<p>Arama: <input type="search" name="arama"></p>
<p>GSM: <input type="tel" name="gsmno"></p>

4. Adım: Oluşturduğunuz HTML belgesini kaydedip tarayıcıda görüntüleyiniz.
5. Adım: Tarayıcıda oluşan form bileşenlerini kontrol ediniz.

Not

Form nesnelerinde kullanılan name özelliği, tarayıcıda forma girilen veriler üzerinde
interaktif işlemler yapmak için değişken olarak kullanılacaktır.

Sıra Sizde

HTML form bileşenlerini kullanarak randevu formu oluşturunuz. Oluşturduğunuz
formu arkadaşlarınızın oluşturdukları ile karşılaştırınız.

3.7.3.2. <button> Etiketi

<button> etiketi, buton oluşturmak için kullanılan anlamsal etikettir. <input> etiketi ile buton
oluşturma yazım şekliyle aynıdır. <input> etiketinden farkı, <button> etiketinin </button> kapama
etiketi ile kullanılmasıdır. Bu durum içerik alanında başka etiketlerin yer almasına olanak tanır.
<form action="uye.html" method="post">
<label>Ad Soyad:</label><input type="text" name="ad"><br/><br/>
<label>e-Posta:</label><input type="text" name="eposta"><br/><br/>
<label>Şifre:</label><input type="text" name="eposta"><br/><br/>
<input type="radio" name="cinsiyet" value="erkek" checked="on"> Erkek<br/><br/>
<input type="radio" name="cinsiyet" value="kadin"> Kadın<br/><br/>
<input type="hidden" name="ipAdresi" value="212.175.132.130”/>
<button type="submit" value="Gönder">
<img src="gonder.jpg" width="16" height="16">
</button>
<button type="reset" value="Temizle">
<img src="temizle.jpg" width="16" height="16">
</button>
</form>

Sıra Sizde

<button> etiketini kullanarak 3.7.3.2’ deki HTML form blokuna benzer üyelik formu
oluşturup tarayıcıda görüntüleyiniz.