Kullanıcı girdisini toplamak için bir HTML formu kullanılır. Kullanıcı girdisi çoğunlukla işlenmek üzere bir sunucuya gönderilir.
Web’in en kullanışlı niteliği ve belki de, internet üzerindeki öteki servislere göre daha yaygın olmasının nedeni formlardır . Kullanıcı ile etkileşimli dinamik web sayfaları hazırlayabilmek için HTML
Formlar, kullanıcıdan veri (bilgi) almak için düzenlenir. Kullanıcının girdiği bilgiler sunucu makinaya gönderilir. Gönderilen bu bilgiler belirlenen bir dosyaya yazılır. Burada biriken verilerin işlenmesi gerekiyorsa, o işi yapacak bir programın ayrıca yazılması gerekir. HTML yalnızca, kullanıcının forma yazdığı verileri kaydeder; onları bir programlama dilinin yaptığı gibi işleyemez.
Kullanıcının form aracılığı ile sunucuya gönderdiği verileri işleyen programlar uygun bir programlama diliyle yazılabilir. Örneğin php, asp.net gibi…
HTML formların ne şekilde kullanıldıklarına bir bakalım.
<Form> nedir?
<form> etiketi html formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları
etiketleri arasında yer alır.
1 2 3 4 5 6 7 | <form> . form kontrolleri . </form> |
1 2 3 4 5 | <FORM ACTION="url" METHOD="get- post" TARGET="pencere"> ... </FORM> |
1 2 3 | <form action="action_page.php"> |
1 2 3 4 | <form action="action_page.php" method="get"> <form action="action_page.php" method="post"> |
Şimdi <form> etiketleri arasında kullanacağınız form elementlerini yakından tanıyalım.
<INPUT> element
<INPUT> etiketi form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. type elemanının varsayılan değeri text(metin) olmakla birlikte belirtilecek olan (text, password, checkbox, radio,submit, reset gibi) farklı değerleri de alabilir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz.
<INPUT TYPE=tip NAME=isim VALUE=değer MAXLENGTH=uzunluk SIZE=boyut >
Özellik | Açıklama |
TYPE | Girilecek olan elemanın türünü belirtmek için kullanılır |
NAME | Girilecek olan verinin değişken ismini belirlemek için kullanılır. |
VALUE | |
SIZE | Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır.Hiçbir rakam belirtilmediği takdirde varsayılan değeri 20’dir. |
MAXLENGTH | Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. |
Daha fazla özellikler için http://www.w3schools.com/html/html_form_attributes.asp adresine gözatabilirsiniz.
Aşağıdaki örnekte <input> ile metin kutularından oluşan basit bir form örneği görüyorsunuz.
1 2 3 4 5 6 7 8 9 10 | <body> <h1>www.algoritmaornekleri.com</h1> <form action="http://localhost:35746/Default.aspx" method="get"> <p>TC Kimlik No : <input type="text" name="tcno"></p> <p>Ad Soyad : <input type="text" name="adsoyad"></p> <p>Unvan : <input type="text" name="unvan"></p> </form> </body> |
CheckBox
Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar.
1 2 3 4 5 6 | <form action="http://www.algoritmaornekleri.com/Default.aspx" method="get"> <input type="checkbox" name="web" value="Web"> Web Tasarım<br> <input type="checkbox" name="grafik" value="Grafik"> Grafik Animasyon </form> |
Radio
Radio düğmeleri, kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılmaktadır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin ayni olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler Value seçeneğinde belirlenir.
1 2 3 4 5 6 7 | <form action="http://algoritmaornekleri.com/Default.aspx" method="get"> <input type="radio" name="takim" value="gs" checked> Galatasaray<br> <input type="radio" name="takim" value="fb"> Fenerbahçe <br> <input type="radio" name="takim" value="bjk"> Beşiktaş </form> |
Password
Hazırlamakta olduğunuz forma şifreli alanlar eklemek için kullanılır. Type özelliğine, “password” değeri atanarak oluşturulur.
1 2 3 4 5 6 | <form action="http://algoritmaornekleri.com/Default.aspx" method="get"> <p>Mail : <input type="text" name="mail"></p> <p>Şifre : <input type="password" name="sifre"></p> </form> |
TextArea
Text kutularının görevi, hazırlamakta olduğumuz forma tek satırlık veri giriş alanları eklemek iken <Textarea> kullanarak forma, birden fazla satırdan oluşan alanlar ekleyebiliriz. Rows (satır) ve cols (sütun) tanımlamaları yapılarak bu metin alanının kaç satır ve kaç sütundan oluşması gerektiği belirlenebilir.
1 2 3 4 5 | <form action="http://algoritmaornekleri.com/default.aspx" method="get"> <p>Konu</p> <textarea name="konu" rows="5" cols="30"></textarea> </form> |
Select
Hazırlamakta olduğunuz formlara <select> (seç) etiketi kullanarak açılır menüler ekleyebilirsiniz. Listbox (liste kutusu) ve drop-down list (aşağı açılır liste) şeklinde iki farklı tür de seçim kutusu oluşturulabilir. Listede yer alacak elemanların neler olacağı ise <option> etiketi ile belirlenir.
1 2 3 4 5 6 7 8 9 | <form action="http://algoritmaornekleri.com/Default.aspx" method="get"> <select name="sehir"> <option>İstanbul</option> <option>Ankara</option> <option>Sakarya</option> </select> </form> |
Size özelliği listeden yer alan elemanlardan istediğiniz kadarının ekranda görüntülenmesini ayarlamak için kullanılır. Multiple özelliği ise Ctrl tuşu kullanarak birden fazla seçim yapmamıza olanak sağlamaktadır.
1 2 3 | <select name="sehir" size="2" multiple="multiple"> |
Liste öğesine selected özelliği eklenerek seçilmiş olanı belirleyebilirsiniz.
1 2 3 | <option value="fiat" selected>Fiat</option> |
Button
Formunuza tıklandığında bir görevi çağıran bir buton ekleminizi sağlar.
1 2 3 | <button type="button" onclick="alert('Hello World!')">Click Me!</button> |
onclick özelliği ile html dökümanınızda bulunan bir javascript fonksiyonu çağırabilirsiniz.
Submit Button
Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılır.
<input type=”submit”>
“Value” özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.
1 2 3 4 5 6 7 8 | <form action="http://localhost:35746/Default.aspx" method="get"> <p>TC Kimlik No : <input type="text" name="tcno"></p> <p>Ad Soyad : <input type="text" name="adsoyad"></p> <p>Unvan : <input type="text" name="unvan"></p> <input type="submit" value="Gönder"> </form> |
Reset Button
Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar.
<input type=”reset”>
“Value” özelliği, düğme üzerinde istediğiniz metni yazmanıza olanak sağlar.
1 2 3 4 5 6 7 8 9 | <form action="http://localhost:35746/Default.aspx" method="get"> <p>TC Kimlik No : <input type="text" name="tcno"></p> <p>Ad Soyad : <input type="text" name="adsoyad"></p> <p>Unvan : <input type="text" name="unvan"></p> <input type="submit" value="Gönder"> <input type="reset" value="Temizle"> </form> |
[…] HTML Form Oluşturma […]