HTML: Form Temelleri
- 7 Mart 2022
- Eğitim, HTML Dersleri
Dinamik etkileşim araçlarından oluşan HTML formlarından elde edilen değerlerin işlenmesi, Web tabanlı programlamaların en işlevsel kullanım alanlarından birisini oluşturmaktadır.
Bu kesimde HTML formları hakkında temel seviyede bilgi verilmesi amaçlanmıştır. Bu bilgiler, ilerleyen bölümlerde ele alacağımız veritabanı uygulamaları konusuna da temel oluşturacaktır.
İnternet üzerinde çalışan veritabanı uygulamalarında formlar, kullanıcının doğrudan etkileşim kurduğu en üst katmanda yer alırlar. Dolayısıyla kullanıcı-dostu olarak tasarlanmaları gerekir.
HTML formları, üzerlerinde bulunan metin alanları, radyo düğmeleri, işaretleme kutuları ya da liste kutuları gibi çeşitli etkileşim nesneleri yoluyla kullanıcıdan bilgi alınmasını sağlayan araçlardır.
Bu formlar,
<form><!--Form Elementleri--></form> etiketleri arasında oluşturulur.
Bu durumda metin tabanlı bir verinin girilmesini sağlayan form, aşağıdaki gibi olacaktır:
1 2 3 4 | <form> <p>Adınız: <input type="text" name="ad" ></p> <p>Soyadınız: <input type="text" name= "soyad" ></p> </form> |
Burada <input type="text" name="ad"> bildirimi, alanın bir girdi (input) alanı, türünün ise metin kutusu (text) olduğunu söylemektedir. “name” özelliği ise, nesnenin programatik adını göstermektedir.
Tasarladığımız bu formu, bilgileri gönderme işlemini sağlayacak bir komut düğmesi ile tamamlayalım:
1 2 3 4 5 | <form> <p>Adınız: <input type="text" name="ad" ></p> <p>Soyadınız: <input type="text" name= "soyad" ></p> <p><input type="submit" ></p> </form> |
Burada <input type="submit"> bildirimi, yine alanın bir girdi (input) alanı, ancak türünün gönderme butonu (submit) olduğunu söylemektedir.
Bu koda HTML çıktısı aşağıdaki gibi olacaktır:
Sıkça kullanılan bazı nesnelerin yer aldığı örnek bir HTML formu aşağıda görebilirsiniz. görülmektedir.
Bu forma ait HTML kodları ise aşağıda verilmiştir.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <form id="form1" name="form1" method="post" action=""> <p><textarea name="textarea" id="textarea" cols="45" rows="5"></textarea></p> <p><input type="checkbox" name="checkbox1" id="checkbox">Seçenek-1</p> <p><input type="checkbox" name="checkbox2" id="checkbox2">Seçenek-2</p> <p><input type="checkbox" name="checkbox3" id="checkbox3">Seçenek-3</p> <p><input name="radio" type="radio" id="radio" value="1" checked="checked" />Seçim-1</p> <p><input type="radio" name="radio" id="radio" value="2"/>Seçim-2</p> <p><input type="radio" name="radio" id="radio" value="3"/>Seçim-3</p> <p> <select name="select" id="select"> <option value="seçim-1">seçim-1 <option value="seçim-2">seçim-2 <option value="seçim-3">seçim-3 </select> </p> </form> |
İlk alan bir Textarea’dır. Bunun metin kutusundan farkı, çok satırlı olarak daha uzun metinleri alabilen bir nesne olmasıdır.
HTML formlarında işaretleme yapma amacı ile iki tip nesne kullanılır: Checkbox ve Radiobutton. Checkbox nesnesi çoklu seçimlerin yapılmasına olanak tanır. Tek seçim yapılmasını istediğimiz durumlarda ise Radiobutton nesnesini kullanırız.
Farklı Radiobutton nesnelerinin aynı grup içerisinde değerlendirildiği bu durumu, her nesneye aynı id (kimlik) adının verilmesi sağlamaktadır.
En son nesnemiz ise üç seçenek içeren Combobox türünde bir Select nesnesidir.
- 7 Mart 2022
-
Paint Yazılım
Diğer Yazılarımız
Tüm Yazılarımız
Soru işareti kalmasın
Bu yazı hakkında aklınıza takılanlar, bir fikriniz belkide şikayetiniz vardır. Yada yazımızda hatalar olduğunu düşünüyor olabilirsiniz. Peki neden bize ulaşmayı düşünmeyesiniz ki?
Hizmetlerimiz
Binlerce müşterimizin yararlandığı 100'e yakın hizmetlerimizden sizlerde yararlanabilirsiniz. Onlarca ücretsiz web hizmeti ve profesyonel destekle sizleri daima daha ileriye taşımayı hedefliyoruz.
Tüm Yenilik ve Kampanyalardan Haberdar Ol
Son Yazılar
- Büyük Veri ile Tüketici Davranışlarının Tahmini 13 Aralık 2024
- Bulut Bilişim (Cloud) ile Maliyet Azaltan Şirketler 12 Aralık 2024
- Ağ Güvenliğinde Sektörel Trendler ve Öne Çıkan Teknolojiler 12 Aralık 2024