SlideShare a Scribd company logo
Kullanıcı girişlerinin
işlenmesi
Celal Murat KANDEMİR
ESOGÜ – Eğitim Fakültesi - BÖTE
twitter.com/cmkandemir
Contents
1. HTML Formlar – KullanıcıGirişlerinin
İşlenmesi
2. GET ve POST farklılıklar
3. Sihirli cURL
4. Escaping user data
5. Dosyalar
HTML Formlar
HTML Formlar
 Kullanıcıların sunucuya veri gönderebilmeleri
tek yolu vardır –HTML Formlar
 Grirdirilmesi/gönderilmesi planlanan verinin
türünü belirleyen alanlar kümesidir.
 Sunucu formda doldurulan veriyi alır ve yeni bir
sayfa üretir.
 Gönderilen verinin alınabimesi için CGI betiklere
ihtiyaç vardır
 Form verileri normal uygulamalardaki
argümanlar ile benzerlik gösterir.
Nasıl Çalışır
Kullanıcı veri girer ve gönderir. Form
Veriyi ileteceği bir "action" URL
özniteliğine sahiptir.
<?
echo "Welcome".$_POST ['username']."!";
?>
PHP betik veriyi
$_GETve $_POST
Diziler halinde alır ve çalıştırır.
…
<body>
Hoş geldinÇekirge!
…
Kullanıcının göndermiş olduğu
Verinin bir sonucu olarak
HTML üretir.
GET ve POST
$_POST ve $_GET
 PHP verileri $_GET ve $_POST dizileri içinde
alır.
 URL parametreleri $_GET dizisine gider
 method="post" yöntemi ile fromdan
gönderilen veriler $_POST dizisindedir.
 İstek yöntemi post yöntemidir.
 Hangi istek yönteminin kullanıldığı $_SERVER
dizisinden kontrol edilebilir
 Her iki dizi de global’dir ve diğer diziler gibi
kullanılabilir
$_POST
 $_POST bir ilişkisel dizidir
 Form giriş özniteliğindeki isimler(name özniteliği )
dizideanahtar/ilişkihaline dönüşür ve girilen verilere bu
ilişkilerile eriliebilir
 Kullanıcı name= "name" özniteliğine sahip giriş
alanına "John"; name= "pass" özniteliğine sahip giriş
alanına "mypass" girerse
 test.php $_POST dizisini kullanır:
 $_POST['name']  "John"değerine sahip olur
 $_POST['pass"]  "mypass" değerine sahip olur
<form method="post" action="test.php">
<input type="text" name="name" />
<input type="password" name="pass" />
</form>
$_GET
 $_GET dizisi de ilişkisel bir dizidir
 Aşağıdaki URL adres çubuğunda açılırsa:
 test2.php betiği $_GET dizisinden
verileri alacaktır
 $_GET['page'] 1 değerine sahip olur
 $_GET['user']  "john" değerine sahip olur
http://phpcourse.com/test2.php?page=1&user=john
$_POST ve $_GET Karşılaştırma
 Get isteklerinde parametreler URL üzerinden iletilir
 Kullanıcıların bağlantı ya da işaret imi olarak sayfaya
erişimineolanak sağlar
 URL 255 karakter ile sınırlıdır
 Post isteklerinde parametreler istek gövdesi
üzerinden gönderilir
 Kullanıcılar form üzerindeki gönderilecek verileri
doldurmadansayfayı açamazlar
 Dosya gönderimine izin verir
 Sınırsız boyutta (php.ini dosyasındakiayarın izin
İstekTürüTespiti
 $_SERVER['REQUEST_METHOD']dizi
elemanı istek türünü saklar
 'GET', 'POST', 'HEAD', 'PUT‘ değerlerinden
birine sahiptir
 Kullanıcıların veri gönderdiklerinin veya
URL’den henüz açıldığının tespit edilmesi
amacıyla kullanılabilir
 Büyük/küçükharf duyarlıdır!
HTML 5 Formlar
Web Sayfasından Kullanıcı Verilerinin
Girilmesi
HTML Formlar
 Formlar site ziyaretçilerinden veri toplamanın
en başta gelen yöntemidir.
 Form bloklarını yaratmak için:
 Örnek:
13
<form></form>
<form name="myForm" method="post"
action="path/to/some-script.php">
...
</form>
"action" niteliği form verilerinin hangi
sayfaya gönderileceğini söyler
“method" niteliği form verilerinin
nasıl gönderilmesigerektiğini söyler
– GET veya POST isteği üzerinden
Form Alanları
 Tek satır metin giriş alanı:
 Çok satır metin bölgesi alanı:
 Saklı (Hidden) alanlar kullanıcıya görünmeyen
verileri saklar:
 Genellikle JavaScript kodlar tarafından kullanılır 14
<input type="text" name= "ilkAdi" value= "Bu
bir metin alanıdır" />
<textarea name= "yorumlar">Bu bir çok satırlı
metin alanıdır</textarea>
<input type="hidden" name="hesap" value="Bu bir
gizli metin alanıdır." />
Fieldsets
 Fieldsets ilişkili form alanı gruplarını kapsamak
için kullanılırlar:
 <legend> fieldset başlığıdır.
15
<form method="post" action="form.aspx">
<fieldset>
<legend>Müşteri Detayı</legend>
<input type="text" id="isim" />
<input type="text" id="telefon" />
</fieldset>
<fieldset>
<legend>Sipariş Detay</legend>
<input type="text" id="adet" />
<textarea cols="40" rows="10"
id="uyarilar"></textarea>
</fieldset>
</form>
Form Giriş Kontrolleri
 Checkboxes:
 Radio buttons:
 Radyo düğmeleri gruplanabilir, grup içinden
sadece birinin seçilmesine izin verilir:
16
<input type="checkbox" name= "meyve"
value="elma" />
<input type="radio" name="sifat" value="Bay."
/>
<input type="radio" name="sehir" value="izmir" />
<input type="radio" name= "sehir" value="ankara" />
Diğer Form Kontrolleri
 Açılır Liste (Dropdown menus):
 Gönder (Submit) düğmesi:
17
<select name="cinsiyet">
<option value="1"
selected="selected">Erkek</option>
<option value="2">Kadın</option>
<option value="3">Diğer</option>
</select>
<input type="submit" name="submitBtn"
value="Şimdi Uygula" />
Diğer Form Kontrolleri (2)
 Reset düğmesi – formu başlangış durumuna geri
getirir.
 Image düğmesi– gönderme düğmesi gibidir fakat
resim gösterilir ve tık koordinatı gönderilir
 Genel amaçlı düğme – Javascript içinde kullanılır,
versayılaneylem yoktur.
18
<input type="reset" name="resetBtn"
value="Reset the form" />
<input type="image" src="submit.gif"
name="submitBtn" alt="Gönder" />
<input type="button" value="bana tıkla" />
Diğer Form Kontrolleri (3)
 Parola Girişi – Girilen metni * işareti ile
maskeler/gizler
 Çoklu seçim alanı – tek satır yerine çok satırda
madde listesi görüntüler
19
<input type="password" name="pass" />
<select name="urunler" multiple="multiple">
<option value="1"
selected="selected">klavye</option>
<option value="2">fare</option>
<option value="3">monitör</option>
</select>
Diğer Form Kontrolleri (4)
 Dosya girişi– Dosyaları yüklemek için kullanılan
bir alandır
 Dosya yükleme yapılacağı zaman dosyayı
gönderme biçimini tanımlamak için enctype
niteliği kullanılır. Genelde multipart/form-data
değerini alır.:
20
<input type="file" name="foto" />
<form enctype="multipart/form-data">
...
<input type="file" name="foto" />
...
</form>
Etiketler
 Form etiketleri (label) , form alan ID’leri
kullanılarak açıklayıcı metin konmasını sağlar.
 Bir etikete tıklamak ilişkili alana odaklanılmasını
sağlar (checkboxes terslenir (toggled), radio
düğmeleri seçili olur)
 Etiketler bir kullanılabilirlik ve erişilebilirlik özelliği
olup her ikisi de erişilebilirlik doğrulamasından
geçmek için gereklidir.
21
<label for="fn">İlk İsim</label>
<input type="text" id="fn" />
HTML Form – Örnek
22
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="sinif" />
<fieldset><legend>Akademik Bilgi</legend>
<label for="derece">Derece</label>
<select name="degree" id="derece">
<option value="LS">Lisans</option>
<option value="YL">Yüksek Lisans</option>
<option value="DR" selected="selected">Doktora
Programı</option>
</select>
<br />
<label for="ogrenciNo">Öğrenci No</label>
<input type="password" name="ogrenciNo" />
</fieldset>
<fieldset><legend>Kişisel Bilgiler</legend>
<label for="ilkAd">İlk İsim</label>
<input type="text" name="ilkAd" id="ilkAd" />
<br />
<label for="sadi">Soyadı</label>
<input type="text" name="sadi" id="sadi" />
form.html
HTML Form – Örnek(2)
23
<br />
Cinsiyet:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Erkek</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Kadın</label>
<br />
<label for="email">Eposta</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">KULLANIM ŞARTLARI...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Form Gönder" />
<input type="reset" value="Form Temizle" />
</p>
</form>
form.html (devam)
form.html (devam)
HTML Form – Örnek (3)
24
Range ve Spinbox
 Kullanıcıları sadece sayısal değer girmeleri
yönünde kısıtlar
 Ek özellikler min, max ve step ve value
 Input tipine bağlı olarak Spinbox veya Slider,
form bileşeni olacağı belirlenir
 Farklı tarayıcılarda farklılıklar gösterebilir.
 Sliders ve Spinboxes Firefox üzerinde
çalışmazlar
 Standart textbox olarak görüntülenr. 25
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />
HTML 5’ten Gelen Özellikler
 Autocomplete
 Tarayıcı öceden girilmiş değerleri saklar
 Aynı sayfaya yapılan sonraki ziyaretlerde
saklanmış değerler geri getirilir.
 Autofocus
 Alan sayfa yüklenirkenfocus alabilir. (seçili
olabilir)
 Required
 Alan eğer required (gerekli) ise
doldurmalı/seçilmelidir. 26
Doğrulamalı Giriş Alanları
 Eposta – eposta için basit bir doğrulama sağlar
 Doğrulama için bir örüntü (patern) verilebilir
 Mobil cihazlarda eposta klavye getirir
 URL – url için doğrulama
 Mobil cihazlarda url klavye getirir
 Telefon
 Sayısal klavye getirir
27
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
<input type="url" required="true" />
<input type="tel" required="true" />
TabIndex
 tabindex HTML niteliği ,TAB tuşuna arka
arkaya basıldığında form alanları ve
bağlantılarınınhangi sırada gezileceğini
kontrol etmek amacıyla kullanılır.
 tabindex="0" (sıfır) - "natural" (doğal) sıra
 Eğer X >Y, tabindex="X" sahip bileşen
tabindex="Y " sahip bileşenden önce tekrarlanır
 Negatif tabindex’e sahip bileşenler atlanır,
bununla beraber, bu standartta tanımlı değildir
28
<input type="text" tabindex="10" />

More Related Content

PPT
İnternet Programcılığı Dersi İçin PHP giriş
PDF
Internet programcılığı 4
PDF
Temel HTML Etiketleri - Tablo, Form
PDF
+Asp.Net3.5 Icindeki
PPS
Ajax
PPTX
Html5 Yenilikleri & SEO
PDF
Web Uygulamalarında Kaynak Kod Analizi - 1
PPT
Jquery Giriş
İnternet Programcılığı Dersi İçin PHP giriş
Internet programcılığı 4
Temel HTML Etiketleri - Tablo, Form
+Asp.Net3.5 Icindeki
Ajax
Html5 Yenilikleri & SEO
Web Uygulamalarında Kaynak Kod Analizi - 1
Jquery Giriş

Similar to PHP - Kullanıcı Girişlerinin İşlenmesi (20)

PPTX
PDF
Web Programlama II sunum 9.pdf
PPTX
Web Tasarımı
PDF
Php odev-sitesi
PPT
PDF
Internet programcılığı 2
PPT
ASP.net dersleri-1
PDF
Web Uygulama Pentest Eğitimi
PDF
Php cevaplari
PPT
Php mysql sunum
PDF
Internet programcılığı 1
PDF
Php 2014
PDF
Php sitesi
PPTX
BTRİSK Web Uygulama Güvenliği Denetimi Eğitim Sunumu
PPTX
BTRİSK Web Uygulama Güvenliği Denetimi Eğitimi
PDF
PHP Temelleri
PDF
Php 2012
PDF
Php 2013
DOCX
jQuery Ornekleri
DOCX
jQuery
Web Programlama II sunum 9.pdf
Web Tasarımı
Php odev-sitesi
Internet programcılığı 2
ASP.net dersleri-1
Web Uygulama Pentest Eğitimi
Php cevaplari
Php mysql sunum
Internet programcılığı 1
Php 2014
Php sitesi
BTRİSK Web Uygulama Güvenliği Denetimi Eğitim Sunumu
BTRİSK Web Uygulama Güvenliği Denetimi Eğitimi
PHP Temelleri
Php 2012
Php 2013
jQuery Ornekleri
jQuery
Ad

More from cmkandemir (20)

PDF
Temel HTML Etiketleri ve Kullanım Örnekleri
PDF
Yapay Zeka Nedir?
PDF
Zekayı Anlamak
PDF
Chapter 2-8085 Microprocessor Architecture and Microcomputer Systems
PDF
Chapter 1-Microprocessors, Microcomputers, and Assembly Language
PDF
Chapter 7 - Programming Techniques with Additional Instructions
PDF
Chapter 6 - Introduction to 8085 Instructions
PDF
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 2
PDF
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 1
PDF
Matching Game In Java
PDF
impress.js Framework
PDF
openCV and Java - Face Detection
PDF
PHP ve MySQL Bağlantısı - Temel İşlemler
PDF
CSS Uygulamaları 1
PDF
CSS - Sunum Bileşenleri
PDF
Kod Akış Kontrolü - Döngüler, Fonksiyonlar
PDF
Web Sitesi Geliştirme Adımları
PDF
CSS - Genel Bakış
PDF
Threads and Game Programming In Java
PDF
JDK and Eclipse Installation and Configuration
Temel HTML Etiketleri ve Kullanım Örnekleri
Yapay Zeka Nedir?
Zekayı Anlamak
Chapter 2-8085 Microprocessor Architecture and Microcomputer Systems
Chapter 1-Microprocessors, Microcomputers, and Assembly Language
Chapter 7 - Programming Techniques with Additional Instructions
Chapter 6 - Introduction to 8085 Instructions
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 2
Canvas Öğrenme Yönetim Sistemi Kullanım Kılavuzu Bölüm 1
Matching Game In Java
impress.js Framework
openCV and Java - Face Detection
PHP ve MySQL Bağlantısı - Temel İşlemler
CSS Uygulamaları 1
CSS - Sunum Bileşenleri
Kod Akış Kontrolü - Döngüler, Fonksiyonlar
Web Sitesi Geliştirme Adımları
CSS - Genel Bakış
Threads and Game Programming In Java
JDK and Eclipse Installation and Configuration
Ad

Recently uploaded (6)

PDF
SONU TÜKETMEK KISA FİLM SENARYO AYRIMLAM
PDF
9-1-1.pdf kimya bilimi simya dan kimyaya
PDF
9-1-2.pdf kimya disiplinleri ve çalışma alanları
PDF
9-1-1.pdf kimya bilimi simya dan kimyaya
PPT
Diksiyon ve Etkili Konuşma-üniversite.ppt
PDF
Mimari ve İç Mimari Projelerde Mekanik Çözümler - Sn. Seher TÜNÇEL & Sn. Baha...
SONU TÜKETMEK KISA FİLM SENARYO AYRIMLAM
9-1-1.pdf kimya bilimi simya dan kimyaya
9-1-2.pdf kimya disiplinleri ve çalışma alanları
9-1-1.pdf kimya bilimi simya dan kimyaya
Diksiyon ve Etkili Konuşma-üniversite.ppt
Mimari ve İç Mimari Projelerde Mekanik Çözümler - Sn. Seher TÜNÇEL & Sn. Baha...

PHP - Kullanıcı Girişlerinin İşlenmesi

  • 1. Kullanıcı girişlerinin işlenmesi Celal Murat KANDEMİR ESOGÜ – Eğitim Fakültesi - BÖTE twitter.com/cmkandemir
  • 2. Contents 1. HTML Formlar – KullanıcıGirişlerinin İşlenmesi 2. GET ve POST farklılıklar 3. Sihirli cURL 4. Escaping user data 5. Dosyalar
  • 4. HTML Formlar  Kullanıcıların sunucuya veri gönderebilmeleri tek yolu vardır –HTML Formlar  Grirdirilmesi/gönderilmesi planlanan verinin türünü belirleyen alanlar kümesidir.  Sunucu formda doldurulan veriyi alır ve yeni bir sayfa üretir.  Gönderilen verinin alınabimesi için CGI betiklere ihtiyaç vardır  Form verileri normal uygulamalardaki argümanlar ile benzerlik gösterir.
  • 5. Nasıl Çalışır Kullanıcı veri girer ve gönderir. Form Veriyi ileteceği bir "action" URL özniteliğine sahiptir. <? echo "Welcome".$_POST ['username']."!"; ?> PHP betik veriyi $_GETve $_POST Diziler halinde alır ve çalıştırır. … <body> Hoş geldinÇekirge! … Kullanıcının göndermiş olduğu Verinin bir sonucu olarak HTML üretir.
  • 7. $_POST ve $_GET  PHP verileri $_GET ve $_POST dizileri içinde alır.  URL parametreleri $_GET dizisine gider  method="post" yöntemi ile fromdan gönderilen veriler $_POST dizisindedir.  İstek yöntemi post yöntemidir.  Hangi istek yönteminin kullanıldığı $_SERVER dizisinden kontrol edilebilir  Her iki dizi de global’dir ve diğer diziler gibi kullanılabilir
  • 8. $_POST  $_POST bir ilişkisel dizidir  Form giriş özniteliğindeki isimler(name özniteliği ) dizideanahtar/ilişkihaline dönüşür ve girilen verilere bu ilişkilerile eriliebilir  Kullanıcı name= "name" özniteliğine sahip giriş alanına "John"; name= "pass" özniteliğine sahip giriş alanına "mypass" girerse  test.php $_POST dizisini kullanır:  $_POST['name']  "John"değerine sahip olur  $_POST['pass"]  "mypass" değerine sahip olur <form method="post" action="test.php"> <input type="text" name="name" /> <input type="password" name="pass" /> </form>
  • 9. $_GET  $_GET dizisi de ilişkisel bir dizidir  Aşağıdaki URL adres çubuğunda açılırsa:  test2.php betiği $_GET dizisinden verileri alacaktır  $_GET['page'] 1 değerine sahip olur  $_GET['user']  "john" değerine sahip olur http://phpcourse.com/test2.php?page=1&user=john
  • 10. $_POST ve $_GET Karşılaştırma  Get isteklerinde parametreler URL üzerinden iletilir  Kullanıcıların bağlantı ya da işaret imi olarak sayfaya erişimineolanak sağlar  URL 255 karakter ile sınırlıdır  Post isteklerinde parametreler istek gövdesi üzerinden gönderilir  Kullanıcılar form üzerindeki gönderilecek verileri doldurmadansayfayı açamazlar  Dosya gönderimine izin verir  Sınırsız boyutta (php.ini dosyasındakiayarın izin
  • 11. İstekTürüTespiti  $_SERVER['REQUEST_METHOD']dizi elemanı istek türünü saklar  'GET', 'POST', 'HEAD', 'PUT‘ değerlerinden birine sahiptir  Kullanıcıların veri gönderdiklerinin veya URL’den henüz açıldığının tespit edilmesi amacıyla kullanılabilir  Büyük/küçükharf duyarlıdır!
  • 12. HTML 5 Formlar Web Sayfasından Kullanıcı Verilerinin Girilmesi
  • 13. HTML Formlar  Formlar site ziyaretçilerinden veri toplamanın en başta gelen yöntemidir.  Form bloklarını yaratmak için:  Örnek: 13 <form></form> <form name="myForm" method="post" action="path/to/some-script.php"> ... </form> "action" niteliği form verilerinin hangi sayfaya gönderileceğini söyler “method" niteliği form verilerinin nasıl gönderilmesigerektiğini söyler – GET veya POST isteği üzerinden
  • 14. Form Alanları  Tek satır metin giriş alanı:  Çok satır metin bölgesi alanı:  Saklı (Hidden) alanlar kullanıcıya görünmeyen verileri saklar:  Genellikle JavaScript kodlar tarafından kullanılır 14 <input type="text" name= "ilkAdi" value= "Bu bir metin alanıdır" /> <textarea name= "yorumlar">Bu bir çok satırlı metin alanıdır</textarea> <input type="hidden" name="hesap" value="Bu bir gizli metin alanıdır." />
  • 15. Fieldsets  Fieldsets ilişkili form alanı gruplarını kapsamak için kullanılırlar:  <legend> fieldset başlığıdır. 15 <form method="post" action="form.aspx"> <fieldset> <legend>Müşteri Detayı</legend> <input type="text" id="isim" /> <input type="text" id="telefon" /> </fieldset> <fieldset> <legend>Sipariş Detay</legend> <input type="text" id="adet" /> <textarea cols="40" rows="10" id="uyarilar"></textarea> </fieldset> </form>
  • 16. Form Giriş Kontrolleri  Checkboxes:  Radio buttons:  Radyo düğmeleri gruplanabilir, grup içinden sadece birinin seçilmesine izin verilir: 16 <input type="checkbox" name= "meyve" value="elma" /> <input type="radio" name="sifat" value="Bay." /> <input type="radio" name="sehir" value="izmir" /> <input type="radio" name= "sehir" value="ankara" />
  • 17. Diğer Form Kontrolleri  Açılır Liste (Dropdown menus):  Gönder (Submit) düğmesi: 17 <select name="cinsiyet"> <option value="1" selected="selected">Erkek</option> <option value="2">Kadın</option> <option value="3">Diğer</option> </select> <input type="submit" name="submitBtn" value="Şimdi Uygula" />
  • 18. Diğer Form Kontrolleri (2)  Reset düğmesi – formu başlangış durumuna geri getirir.  Image düğmesi– gönderme düğmesi gibidir fakat resim gösterilir ve tık koordinatı gönderilir  Genel amaçlı düğme – Javascript içinde kullanılır, versayılaneylem yoktur. 18 <input type="reset" name="resetBtn" value="Reset the form" /> <input type="image" src="submit.gif" name="submitBtn" alt="Gönder" /> <input type="button" value="bana tıkla" />
  • 19. Diğer Form Kontrolleri (3)  Parola Girişi – Girilen metni * işareti ile maskeler/gizler  Çoklu seçim alanı – tek satır yerine çok satırda madde listesi görüntüler 19 <input type="password" name="pass" /> <select name="urunler" multiple="multiple"> <option value="1" selected="selected">klavye</option> <option value="2">fare</option> <option value="3">monitör</option> </select>
  • 20. Diğer Form Kontrolleri (4)  Dosya girişi– Dosyaları yüklemek için kullanılan bir alandır  Dosya yükleme yapılacağı zaman dosyayı gönderme biçimini tanımlamak için enctype niteliği kullanılır. Genelde multipart/form-data değerini alır.: 20 <input type="file" name="foto" /> <form enctype="multipart/form-data"> ... <input type="file" name="foto" /> ... </form>
  • 21. Etiketler  Form etiketleri (label) , form alan ID’leri kullanılarak açıklayıcı metin konmasını sağlar.  Bir etikete tıklamak ilişkili alana odaklanılmasını sağlar (checkboxes terslenir (toggled), radio düğmeleri seçili olur)  Etiketler bir kullanılabilirlik ve erişilebilirlik özelliği olup her ikisi de erişilebilirlik doğrulamasından geçmek için gereklidir. 21 <label for="fn">İlk İsim</label> <input type="text" id="fn" />
  • 22. HTML Form – Örnek 22 <form method="post" action="apply-now.php"> <input name="subject" type="hidden" value="sinif" /> <fieldset><legend>Akademik Bilgi</legend> <label for="derece">Derece</label> <select name="degree" id="derece"> <option value="LS">Lisans</option> <option value="YL">Yüksek Lisans</option> <option value="DR" selected="selected">Doktora Programı</option> </select> <br /> <label for="ogrenciNo">Öğrenci No</label> <input type="password" name="ogrenciNo" /> </fieldset> <fieldset><legend>Kişisel Bilgiler</legend> <label for="ilkAd">İlk İsim</label> <input type="text" name="ilkAd" id="ilkAd" /> <br /> <label for="sadi">Soyadı</label> <input type="text" name="sadi" id="sadi" /> form.html
  • 23. HTML Form – Örnek(2) 23 <br /> Cinsiyet: <input name="gender" type="radio" id="gm" value="m" /> <label for="gm">Erkek</label> <input name="gender" type="radio" id="gf" value="f" /> <label for="gf">Kadın</label> <br /> <label for="email">Eposta</label> <input type="text" name="email" id="email" /> </fieldset> <p> <textarea name="terms" cols="30" rows="4" readonly="readonly">KULLANIM ŞARTLARI...</textarea> </p> <p> <input type="submit" name="submit" value="Form Gönder" /> <input type="reset" value="Form Temizle" /> </p> </form> form.html (devam)
  • 24. form.html (devam) HTML Form – Örnek (3) 24
  • 25. Range ve Spinbox  Kullanıcıları sadece sayısal değer girmeleri yönünde kısıtlar  Ek özellikler min, max ve step ve value  Input tipine bağlı olarak Spinbox veya Slider, form bileşeni olacağı belirlenir  Farklı tarayıcılarda farklılıklar gösterebilir.  Sliders ve Spinboxes Firefox üzerinde çalışmazlar  Standart textbox olarak görüntülenr. 25 <input type="range" min="0" max="100" /> <input type="number" min="0" max="100" />
  • 26. HTML 5’ten Gelen Özellikler  Autocomplete  Tarayıcı öceden girilmiş değerleri saklar  Aynı sayfaya yapılan sonraki ziyaretlerde saklanmış değerler geri getirilir.  Autofocus  Alan sayfa yüklenirkenfocus alabilir. (seçili olabilir)  Required  Alan eğer required (gerekli) ise doldurmalı/seçilmelidir. 26
  • 27. Doğrulamalı Giriş Alanları  Eposta – eposta için basit bir doğrulama sağlar  Doğrulama için bir örüntü (patern) verilebilir  Mobil cihazlarda eposta klavye getirir  URL – url için doğrulama  Mobil cihazlarda url klavye getirir  Telefon  Sayısal klavye getirir 27 <input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/> <input type="url" required="true" /> <input type="tel" required="true" />
  • 28. TabIndex  tabindex HTML niteliği ,TAB tuşuna arka arkaya basıldığında form alanları ve bağlantılarınınhangi sırada gezileceğini kontrol etmek amacıyla kullanılır.  tabindex="0" (sıfır) - "natural" (doğal) sıra  Eğer X >Y, tabindex="X" sahip bileşen tabindex="Y " sahip bileşenden önce tekrarlanır  Negatif tabindex’e sahip bileşenler atlanır, bununla beraber, bu standartta tanımlı değildir 28 <input type="text" tabindex="10" />