İST1111 BİLGİSAYAR UYGULAMALARI HTML-3 Form Oluşturma Doç. Dr. Çağın Kandemir Çavaş DEÜ Fen Fakültesi Bilgisayar Bilimleri Bölümü

Web’de Formların Kullanım Alanları Anketler Online sipariş formları Geri bilgi akışı Kullanıcı bilgi girişi gerekli olan her yerde…

Formlarda Kullanılabilecek Özellikler Metin alanı Seçenek Düğmesi (RadioButtons) Onay Kutusu (CheckBox) Seçim Kutusu (Select Box) Gönder (Submit), Reset Düğmeleri …

<form> <input> </input> </form>

Metin Kutusu (Textbox) <input type="text"> <input type="text" name="isim"> <input type="text" name="isim" size=30> <input type="text" name="isim" maxlength=4> <input type="text" name="isim" value="emre"> <input type="text" name="isim" value="emre" readonly>

Şifre (Password) <input type="password" name="sifre"> <input type="password" name="sifre" size=30> <input type="password" name="sifre" maxlength=5> <input type="password" name="sifre" readonly>

Seçenek Düğmesi (Radio Button) <input type="radio" name="cins" value="Erkek"> Erkek <input type="radio" name="cins" value="Kadın" checked> Kadın <input type="radio" name="cins" value="Kadın" disabled> Kadın Tek bir seçim için aynı name kullanılmalı!

Onay Kutusu (CheckBox) <input type="checkbox" name="kitap" value="Kitap"> Kitap <input type="checkbox" name="kitap" value="Kitap" checked> Kitap <input type="checkbox" name="kitap" value="Kitap" disabled> Kitap

<label>…</label> Yazıya tıklandığında da kutunun seçilmesini sağlar. <input type="checkbox" name="kitap" value="Kitap" id="bir"> <label for="bir"> Kitap </label> for ile hangi input'un label'i olduğu id ile belirtilmeli.

Veri Listesi (Datalist) <input list="unvan"> <datalist id="unvan"> <option value="Prof.Dr.">   <option value="Doç.Dr.">   <option value="Yard.Doç.Dr">   <option value="Öğr.Gör.Dr."> </datalist>

Seçim Kutusu (Select Box) <select name=sehir> <option value="İzmir">İzmir</option> <option value="İstanbul">İstanbul</option> <option value="Ankara">Ankara</option> <option value="Antalya">Antalya</option> <option value="Adana">Adana</option> </select> Çoklu seçim için "multiple" <select name=sehir multiple>)

Seçim Kutusu (Select Box) <select name=sehir> <option value="İzmir">İzmir</option> <option value="İstanbul">İstanbul</option> <option value="Ankara">Ankara</option> <option value="Antalya">Antalya</option> <option value="Adana" selected>Adana</option> </select>

Seçim Kutusu (Select Box) <select name=sehir size=3> <option value="İzmir">İzmir</option> <option value="İstanbul">İstanbul</option> <option value="Ankara">Ankara</option> <option value="Antalya">Antalya</option> <option value="Adana" selected>Adana</option> </select>

Seçim Kutusu (Select Box) <select name=sehir size=3 multiple> <option value="İzmir">İzmir</option> <option value="İstanbul">İstanbul</option> <option value="Ankara">Ankara</option> <option value="Antalya">Antalya</option> <option value="Adana" selected>Adana</option> </select>

Seçim Kutusu (Select Box) <select name=sehir size=3 multiple dir=rtl> <option value="İzmir">İzmir</option> <option value="İstanbul">İstanbul</option> <option value="Ankara">Ankara</option> <option value="Antalya">Antalya</option> <option value="Adana" selected>Adana</option> </select>

Seçenek Kutusu Grubu (Option Group) <select name=ders> <optgroup label="Bilgisayar"> <option value="HTML">HTML</option> <option value="PHP">PHP</option> </optgroup> … </select>

Metin Giriş Alanı (Text Area) <textarea> </textarea> <textarea name="aciklama"> </textarea> <textarea name="aciklama">Metin Giriniz</textarea> <textarea name="aciklama" cols=25> </textarea> <textarea name="aciklama" cols=25 rows=5> </textarea> <textarea name="aciklama" disabled> </textarea> <textarea name="aciklama" readonly> Metin Giriniz </textarea>

Komut Düğmesi (Button) <form action="action_page.php" method="post" <input type="button"> <input type="button" value="Basınız"> <input type="submit" value="Gönder"> <input type="reset" value="Temizle"> <input type="file" name="dosya"> Veriler sunucuya gönderilir. Formdaki veriler temizlenir. Dosya yüklemek için.

<fieldset> </fieldset>, <legend> </legend> Form elemanlarını konularına göre gruplamak için kullanılır. <fieldset> <legend>Kişisel Bilgiler</legend> … </fieldset>

Form Elemanları name=isim - Bilgiler değerlendirilirken yardımcı. Nesnelere de isim verilmeli. Bilgilerin gönderildiği dosyadan veriyi alırken kullanılır. action=dosya adı - Formdan alınan bilgilerin gönderileceği yer method=post - Formun teslim edileceği yöntem. POST  bilgileri görünmeden gönderir. GET  url’den verileri açıkça gönderir.

Form Elemanları type=tür - Nesnenin türü, text  düz metin, password  şifre kutusu, submit  formu gönderme butonu size=boyut - Nesnenin uzunluğu. type= text ya da password için karakter sayısı diğerlerinde ise pixel cinsinden genişlik value=değer - Metin kutusunda ya da butonda yazacak yazı buradan belirlenir.

Form Elemanları autocomplete="on" or "off" Otomatik tamamlama özelliği novalidate - Form verisinin doğrulanmasına gerek yoktur. autofocus - sayfa yüklendiğinde bir input elemanına odaklanılması için kullanılır. placeholder - Değer girilecek alanla ilgili kısa bilgi <input type="text" name="İsim" placeholder="İsim"> required - Doldurulması zorunlu alanlar için kullanılır.