HTML'de HTML formunun önemli bir unsurudur. Giriş öğesinin 'type' özelliği, bilgi alanını tanımlayan çeşitli türlerde olabilir. Mesela bir metin kutusu verir.

Aşağıda HTML'nin tüm element türlerinin bir listesi bulunmaktadır.

HTML5, öğeye yeni türler ekledi. HTML5'in öğe türlerinin listesi aşağıdadır

Aşağıda örneklerle birlikte eleman türlerine ilişkin açıklamalar yer almaktadır.

1. :

'text' türündeki öğe, tek satırlık bir giriş metni alanını tanımlamak için kullanılır.

Örnek:

 Enter first name <br> <br> Enter last name <br> <br> <p> <strong>Note:</strong> The default maximum cahracter lenght is 20.</p> 

Çıktı:

'Metin' türünü girin:

'metin' alanı tek satırlı bir giriş metin alanını tanımlar.

Not: Varsayılan maksimum karakter uzunluğu 20'dir.

2. :

'Şifre' türü öğesi, kullanıcının şifreyi bir web sayfasına güvenli bir şekilde girmesine olanak tanır. Şifre dosyasına girilen metin başka bir kullanıcı tarafından okunamayacak şekilde '*' veya '.' biçimine dönüştürülmüştür.

HTML liste kutusu

Örnek:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Çıktı:

'Şifre' türünü girin:

'şifre' alanı, şifrenin güvenli bir şekilde girilmesi için tek satırlı giriş şifresi alanını tanımlar.

3. :

'Gönder' türündeki öğe, 'tıklama' olayı meydana geldiğinde formun sunucuya gönderilmesi için bir gönder düğmesini tanımlar.

Örnek:

 Enter User name <br> <br> Enter Password <br> <br> <br> 

Çıktı:

'Gönder' türünü girin:

Gönder düğmesine tıkladıktan sonra, bu form sunucuya gönderilecek ve sayfa şuraya yönlendirilecektir: aksiyon value.'Action' özelliğini daha sonraki bölümlerde öğreneceğiz.

4. :

'Reset' türü de bir düğme olarak tanımlanır ancak kullanıcı bir tıklama olayı gerçekleştirdiğinde, varsayılan olarak girilen tüm değerleri sıfırlar.

Örnek:

 User id: Password: <br> <br> 

Çıktı:

'Sıfırlama' tipini girin:

Kullanıcı kimliği ve şifrenin giriş değerlerini değiştirmeyi deneyin, ardından sıfırlamaya tıkladığınızda giriş alanları varsayılan değerlerle sıfırlanır.

5. :

'Radyo' türü, bir dizi ilgili seçenek arasından bir seçeneğin seçilmesine olanak tanıyan radyo düğmelerini tanımlar. Aynı anda yalnızca bir radyo düğmesi seçeneği seçilebilir.

Örnek:

Lütfen favori renginizi seçin

Çıktı:

'Radyo' türünü girin

Lütfen favori renginizi seçin

6. :

'Onay kutusu' türü, verilen seçeneklerden seçim yapmak için işaretlenebilen veya işaretlenemeyen kare kutular olarak görüntülenir.

Not: 'Radyo' düğmeleri onay kutularına benzer, ancak her iki tür arasında önemli bir fark vardır: radyo düğmeleri kullanıcının aynı anda yalnızca bir seçeneği seçmesine izin verirken, onay kutusu kullanıcının aynı anda sıfır ila birden fazla seçenek seçmesine olanak tanır .

Örnek:

 Enter your Name: <p>Kindly Select your favourite sports</p> Cricket <br> Tennis <br> Football <br> Baseball <br> Badminton <br> <br> 

Çıktı:

'Onay kutusu' türünü girin

Kayıt formu

Lütfen favori sporunuzu seçin

7. :

'Düğme' türü, tıklama olayı gibi herhangi bir olayı işlevsel olarak kontrol etmek üzere programlanabilen basit bir basma düğmesini tanımlar.

Java dize biçimi uzun

Not: Esas olarak JavaScript ile çalışır.

Örnek:

Çıktı:

'Düğme' türünü girin.

Sonucu görmek için düğmeye tıklayın:

Not: Yukarıdaki örnekte, JS eğitimimizde öğreneceğiniz JS 'uyarısını' kullandık. Açılan pencereyi göstermek için kullanılır.

8. :

'Dosya' türündeki öğe, kullanıcı cihazının depolama alanından bir veya daha fazla dosya seçmek için kullanılır. Dosyayı seçtikten sonra ve gönderimden sonra bu dosya JS kodu ve dosya API'si yardımıyla sunucuya yüklenebilir.

Örnek:

 Select file to upload: 

Çıktı:

'Dosya' türünü girin.

Biz belirtmedikçe herhangi bir dosya türünü seçebiliriz! Seçilen dosya 'dosya seç' seçeneğinin yanında görünecektir

9. :

'Resim' türü, resim biçimindeki bir gönder düğmesini temsil etmek için kullanılır.

Örnek:

 <h2>Input &apos;image&apos; type.</h2> <p>We can create an image as submit button</p> User id: <br> <br> <br> 

HTML5 yeni eklenen türler öğesi

1. :

'Renk' türü, renk içeren bir giriş alanını tanımlamak için kullanılır. Kullanıcının, tarayıcıdaki görsel renk arayüzüyle rengi belirlemesine olanak tanır.

Not: 'Renk' türü yalnızca onaltılık formattaki renk değerini destekler ve varsayılan değer #000000'dir (siyah).

Örnek:

 Pick your Favorite color: <br> <br> Upclick <br> <br> Downclick 

Çıktı:

'Renk' türlerini girin:

Not: 'Renk' türünün varsayılan değeri #000000'dir (siyah). Yalnızca onaltılık formattaki renk değerini destekler.

2. :

'Tarih' türündeki öğe, kullanıcının tarihi belirli bir formatta girmesine olanak tanıyan bir giriş alanı oluşturur. Kullanıcı tarihi metin alanına veya tarih seçici arayüzüne göre girebilir.

Örnek:

 Select Start and End Date: <br> <br> Start date: <br> <br> End date: <br> <br> 

Çıktı:

'Tarih' türünü girin

3. :

'datetime-local' türü öğesi, kullanıcının saat dilimi bilgisi olmadan saat ve dakika cinsinden tarihin yanı sıra yerel saati de seçmesine olanak tanıyan girdi dosyası oluşturur.

Örnek:

 Select the meeting schedule: <br> <br> Select date &amp; time: <br> <br> 

Çıktı:

1. derece mantık

'Tarihsaat-yerel' türünü girin

4. :

'E-posta' türü, kullanıcının e-posta adresini kalıp doğrulamayla girmesine olanak tanıyan bir giriş dosyası oluşturur. Çoklu öznitelikler, kullanıcının birden fazla e-posta adresi girmesine olanak tanır.

Örnek:

 <b>Enter your Email-address</b> <p> <strong>Note:</strong> User can also enter multiple email addresses separating by comma or whitespace as following: </p> <b>Enter multiple Email-addresses</b> 

Çıktı:

'E-posta' türünü girin

Not: Kullanıcı ayrıca aşağıdaki gibi virgül veya boşlukla ayırarak birden fazla e-posta adresi girebilir:

5. :

'Ay' türü, kullanıcının ay ve yılı 'AA, YYYY' biçiminde kolayca girmesine olanak tanıyan bir giriş alanı oluşturur; burada MM ay değerini, YYYY ise yıl değerini tanımlar. Yeni

Örnek:

 Enter your Birth Month-year: 

Çıktı:

'Ay' türünü girin:

6. :

Öğe türü numarası, kullanıcının sayısal değeri girmesine olanak tanıyan giriş dosyası oluşturur. Min ve max özelliğini kullanarak minimum ve maksimum değer girmeyi de kısıtlayabilirsiniz.

Örnek:

 Enter your age: 

Çıktı:

maven kurulumu

'Numara' türünü girin

Not: 50-80 aralığında sayı girilmesine izin verecektir. Aralık dışında bir sayı girmek isterseniz hata verecektir.

7. :

'URL' türündeki öğe, kullanıcının URL'yi girmesine olanak tanıyan bir giriş dosyası oluşturur.

Örnek:

 Enter your website URL: <br> 

Çıktı:

'URL' türünü girin

8. :

Hafta türü, kullanıcının açılır takvimden saat dilimi olmadan bir hafta ve yıl seçmesine olanak tanıyan bir giriş alanı oluşturur.

Örnek:

 <b>Select your best week of year:</b> <br> <br> 

Çıktı:

'Hafta' türünü girin

9. :

'Arama' türü, kullanıcının bir arama dizesi girmesine olanak tanıyan bir giriş dosyası oluşturur. Bunlar işlevsel olarak metin giriş türüne göre simetriktir ancak farklı bir stile sahip olabilirler.

Örnek:

 Search here: 

Çıktı:

'Arama' türünü girin

10. :

?tel? tipinin öğesi telefon numarasını girmek için bir giriş dosyası oluşturur. 'Tel' türünün e-posta gibi varsayılan doğrulaması yoktur, çünkü telefon numarası düzeni dünya çapında değişiklik gösterebilir.

Örnek:

 <b>Enter your Telephone Number(in format of xxx-xxx-xxxx):</b> <br> <br> 

Çıktı:

'tel' türünü girin

Not: Burada, kullanıcının verilen formatta numarayı girmesine izin verecek 'desen' ve 'gerekli' olmak üzere iki özellik kullanıyoruz ve giriş alanına numaranın girilmesi gerekiyor.