Anasayfa / Yazılım / HTML / CSS / HTML Form, Input, Button, Img, div Elementleri Kullanımı

HTML Form, Input, Button, Img, div Elementleri Kullanımı

HTML kontrolleri içinden Form kontrolü body elementleri içinde yer alabilen içinde bir çok kontrolü ve içeriği bulundurabilen kontroldür. Input elementi de kullanıcıdan veri almamızı sağlayan bir text kutusudur. ASP’de bildiğimiz TextBox yani, yazılımcılar iyi bilirler. 🙂 Bir de button kontrolümüz vardır HTML olarak buton oluşturmamızı sağlar. Bu butona tıklandıktan sonrada bir takım olaylar yani eventler tetiklenebilir. Bunların kullanımı ile alakalı örneği aşağıda paylaşıyorum.





Örnek






      
Bu alan form elementi içinde yer alıyor.

div elementi ile bir HTML belge içinde özel alanlar oluşturabiliriz. div tasarım ile web sayfalarımızın dizaynını gerçekleştirebiliriz.

img elementi ile HTML bir belgeye dış kaynklı bir resim dosyasının adını ve adresini vererek bu resim dosyasının HTML belge içinde görünmesini sağlayabiliriz.

gibi bir kullanımı mevcuttur. Bu kodda yer alan src attribute ile dosyamın adını ve yerini belirtiyorum.

Bir HTML belgesinde yer alan elementler aslında bir hiyerarşik yapıdadır. Bu hiyerarşik yapıyı aşağıdaki resimdeki gibi özetleyebiliriz.

HTML elementlerinde parent-child ilişkisini de kavramak önemlidir. Bir elementin altında yani bir elementin içinde yer alan tüm elementler o elementin child elementi olarak bilinirler. Yani örneğin aşağıdaki kod yapısında en üstteki form elementtir onun içinde yer alanlar child elementtir. Yine form elementinin içinde yer alan div elementinin içindeki h1 elementi de div elementinin child elementidir.

İsmail GÜRSOY

Yani bir element birden fazla child elemente sahip olabilir. Mesela üstteki şekilde body elementi direkt olarak iki adet child elemente sahiptir, bunlar form ve h1. Onların içindekiler de aslında body elementinin child elementleridir. Ama doğrudan bağlı değil içindeki child elementler ile bağlıdırlar. Dolayısı ile aslında bu div elementler body elementinin child elementidir diyemeyiz. Bunları ancak form elementi aracılığı ile gösterebiliriz.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir