HTML

BÖLÜM - IV1. FORM İŞLEMLERİ

Form Oluşturma:

Formlar ziyaretçilerden bilgi almak için kullanılır. Form oluşturmak için <form> tagı kullanılır. Formda girilen verilerin hangi sayfaya gönderileceğini belirtmek için action özelliği, Formdaki verilerin hedef sayfaya gönderilme yöntemini belirlemek için method özelliği kullanılır.

<form name=”email” action=”mail.php” method=”get” >

Gönderme yöntemi belirtilmez ise varsayılan olarak post yöntemi belirlenir. Post yönteminde adres çubuğunda işlemler gözükmez ve gizliğe uygundur. Eğer formdaki veriler belirli bir sayfaya değil de bir mail adresine yönlendirilecekse aşağıdaki gibi yazılır.

<form action=”mailto:sabrinejat@gmail.com” enctype=”text/plain” >

Metin (Text) Kutuları Oluşturma:

Metin kutuları form işlemlerinde sıkça kullanılır. Metin kutusu oluşturmak için <input> tagı ile name (isim) size (uzunluğu) maxlength (maksimum uzunluk) özellikleri kullanılır.

<input type=”text” name=”adi” size=”30” maxlength=”50” required></input>

Etisem-2016 Sayfa 1

HTML

Eğer hizalı olsun istiyorsak <table> tagını kullanarak bir tablo içinde yapabiliriz. Bunu yaparken kenarlıklar olmaması için border özelliğini kullanmayacağız.

Etisem-2016 Sayfa 2

HTML

Etisem-2016 Sayfa 3

HTML

Web ve Mail Adresi Almak:

HTML5 ile e mail ile web adreslerini otomatik alabiliriz. Tarayıcıların otomatik tanıması için e mail adresleri için type=”email” web adresleri için ise type=”url” yazabiliriz. Özellikle tablet bilgisayarlar ve cep telefonlarında ortaya çıkar. Özel işaretler ve kısaltmalar otomatik çıkmaktadır.

Etisem-2016 Sayfa 4

HTML

Metin Alanları (Textarea) Kutuları Oluşturma:

Çok satırlı metinlerin alınması maksadıyla kullanılırlar. İleti, Yorum vb. gibi durumlarda uygulanır. Metin alanları oluşturmak için <textarea> tagı ile name (isim) ve rows (satır miktarı) ve cols (kaç sütun karakter genişliği) özellikleri kullanılır.

Etisem-2016 Sayfa 5

HTML

Etisem-2016 Sayfa 6

HTML

Onay ve İptal Butonları Oluşturma:

Gönder seçeneği için <input type=”submit” value=”Gönder”> İptal seçeneği için <input type=”reset” value=”İptal”> komutları kullanılır.

Etisem-2016 Sayfa 7

HTML

Etisem-2016 Sayfa 8

HTML

Uygulama Oluşturma:

CheckBox ve Radio Butonları Oluşturma:

Eğer kullanıcıdan Evet/Hayır gibi iki seçenekten birisinin tercih edilmesi isteniyorsa radio buton birden fazla seçenek kullanılması isteniyorsa çoklu seçenek kutuları checkbox kullanılır. Kullanımı:

<input type="checkbox" name="iyi" value="evet"> Sitenizi begendim </input>

<input type="radio" name="sitebegenisi” İyi </input> şeklindedir.

Checkbox ta İşaretlenen kutular gönderilen sayfaya evet değeri vereceği için hangi kutuların işaretli olduğunu anlayabiliriz.

Etisem-2016 Sayfa 9

HTML

Etisem-2016 Sayfa 10

HTML

Etisem-2016 Sayfa 11

HTML

Seçenek Listeleri (ComboBox) Oluşturma:

Açılan bir seçenek listesinden bir seçim yapmak için kullanılan listelerdir. Örneğin ziyaretçinin doğduğu il soruluyorsa burada 81 tane radio buton koymanın bir anlamı yoktur. Burada seçenek listesi kullanılır.

Kullanımı:

<select name=”il”>

<option> Ankara </option>

</select> şeklindedir.

Etisem-2016 Sayfa 12

HTML

size özelliği listeden kaç seçenek gösterilmesi gerektiğini verir. Burada size “1” olduğundan listede ilk başta tek seçenek vardır. Örneğin Size “2” olduğunda aşağıdaki durum ortaya çıkar.

Eğer listede ilk gözüken seçeneğin ilk yazılandan başkası olması isteniyorsao seçeneğin <option> tagına selected eklenir.

Etisem-2016 Sayfa 13

HTML

Yukarıda selected “İzmir” de olduğundan ilk seçenek “İzmir” olarak gözükür.

Listede tek seçenek gözüküyorsa drop-downlist birden çok seçenek gözüküyorsa listbox adını alır. Aşağıda 4 seçeneğin birden açık olduğunu görebiliriz. Dolayısı ile listemiz listbox olmuştur.

Etisem-2016 Sayfa 14

HTML

Etisem-2016 Sayfa 15

HTML

Kategorik liste oluşturulmak isteniyorsa <select> tagının altına <optgroup> tagı ile kategorik başlık eklenebilir. Örnek olarak iller bölgelere ayırılıp ona göre listelenebilir.

Etisem-2016 Sayfa 16

HTML

Etisem-2016 Sayfa 17