İST1111 BİLGİSAYAR UYGULAMALARI HTML-3 Form Oluşturma

... konulu sunumlar: "İST1111 BİLGİSAYAR UYGULAMALARI HTML-3 Form Oluşturma"— Sunum transkripti:

1 İ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ü

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

3 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 …

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

5 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>

6 Ş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>

7 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ı!

8 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

9 <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.

10 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>

11 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>)

12 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>

13 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>

14 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>

15 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>

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

17 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>

18 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.

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

20 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.

21 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.

22 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.