Temel Başlıklar. HTML Formlarının amacı Çalışma şekli Form Action ve Method

Transkript

1 HTML Formları

2 Temel Başlıklar HTML Formlarının amacı Çalışma şekli Form Action ve Method

3 HTML/WWW veri paylaşımı üzerine kurulmuştur. Html işaretleme dilidir. Diğer içerikler ile bağlantılar (linkler) oluşturulur. İçerik oluşturma oldukça önemlidir. İçerik, sunucu tarafından sağlanan static Html tagları ile oluşturulmaz. Formlar veri gönderimine olanak tanır. Kullanıcı formlar aracılıyla sunucu tarafına veri gönderebilir. Gönderilen veri HTML işaretleyicileri ile paylaşılabilir.

4

5 Formlar Form içindeki veri giriş alanları işaretlenir. Veriler bu alanlara girilir. Ardından isim-değer çiftleri (name-value pairs) şeklinde sunucuya gönderilirler.

6 Verinin gönderileceği URL bilgisini barındırır. HTTP metodu belirtilir. (GET / POST) Verinin kodlama şeklini belirtir.

7 index.html results.cshtml

8 index.html

9 HTML Form Input Elemanları

10 Text Input

11 HTML 5 de bulunan bazı input alanları

12 Selections (Seçimler)

13 Input Attributes (Inputlara ait Nitelikler) Nitelik Size maxlength Checked Multiple/Selected Rows/cols Displayed/readonly Açıklama - text/password için bırakılacak karakter genişliğidir. - Seçimler için gösterilecek olan genişliği de tanımlar. text/password girişinin alabileceği maksimum karakter miktarını belirtir. Radio button ve checkbox ın işaretlenmiş olarak görüntülenmesini sağlar. Çoklu seçimlere imkan verir. TextArea için yükseklik ve genişlik değerlerini ayarlar. Input elemanlarını saltokunu(readonly) veya etkin olmayacak şekilde (disabled) ayarlar.

14 Düğmeler (Buttons) Formda mevcut olan alanları varsayılan değerine getirir. Formu sunucuya gönderir. <input type= button > <button type= submit > image button

15 Label <input type="text" size="10" maxlength="20" id="firstname" name="firstname"></input> <input type="text" id="nothing" name="nothing" disabled value="foo"></input> <input type="password" id="pwd" <textarea id="bio" name="bio" rows="5" cols="30"></textarea> name="userpassword"></i nput> <select id="occupation" name="occupation" size="3" multiple> </select> <input type="radio" id="male" name="gender" value="male">male</input> <input type="radio" id="female" name="gender" value="female" checked>female</input> <input type="checkbox" id="pref1" name="prefs value="newsletter"> </input>.. <input type="checkbox" id="pref3" name="prefs" value="marketing">.</input> <input type="submit" name="submit" value="submit"></input>

16 Formların Organizasyonu ve Yönlendirme Etiketler (Labels) Text açık bir şekilde bir input öğesi ile ilişkilendirilir veya Etiket ile etkileşime girilerek inputa konumlanılır. Fieldsets

17 <fieldset> <legend>contact Information</legend> Fieldset <label for="firstname" accesskey="y">first name: </label> <input tabindex="1" type="text" size="10" maxlength="20" id="firstname" name="firstname" ></input><br /> Last name: <input tabindex="2" type="text" size="10" maxlength="20" id="lastname" name="lastname" ></input><br /> <input tabindex="3" type=" " id=" address" name=" address"></input><br /> </fieldset>

18 Tab Index Input alanları arasında durak noktalarını belirtmek amacıyla belirtilirler. Input alanları hangi sırasıda dolaşılmak isteniyorsa uygun değer tabindex niteliğine atanır. Disabled durumundaki elemanlar atlanarak bir sonraki input alanına geçilir.

19 <fieldset> <legend>contact Information</legend> <label for="firstname" accesskey="y">first name: </label> <input tabindex="1" type="text" size="10" maxlength="20" ></input><br /> id="firstname" name="firstname" Last name: <input tabindex="2" type="text" size="10" maxlength="20" id="lastname" name="lastname" ></input><br /> <input tabindex="3" type=" " id=" address" name=" address"></input><br /> </fieldset>

20 Erişim Tuşları (Access Keys) Klavyeden basılacak tuş kombinasyonları ile istenilen label lar aktif hale getirilebilir. Erişim Tuşları : OS Modifier Key + Karakter Windows = Alt Mac OSX / Safari =Ctrl + Option Tüm web tarayıcıları tarafından desteklenmeyebilir.

21 <fieldset> <legend>contact Information</legend> <label for="firstname" accesskey="y">first name: </label><input tabindex="1" type="text" size="10" maxlength="20" id="firstname" name="firstname" ></input><br /> Last name: <input tabindex="2" type="text" size="10" maxlength="20" id="lastname" name="lastname" ></input><br /> <input tabindex="3" type=" " id=" address" name=" address"></input><br /> </fieldset> <fieldset> <legend accesskey="l">login information</legend> Username: <input type="text" id="username" name="username" readonly="true" value="bora ugurlu"></input><br /> Disabled text: <input type="text" id="nothing" name="nothing" disabled value="foo"></input><br /> Password: <input type="password" id="pwd" name="userpassword"></input><br /> </fieldset>