HTML'de hangi tür input öğeleri vardır?

Aşağıdaki input türleri mevcuttur:

• text: Tek satırlık metin alanı.
• password: Şifre girişi alanı, karakterler gizlidir.
• submit: Formu göndermek için düğme.
• reset: Formu sıfırlamak için düğme.
• radio: Radyo düğmesi (birden fazla arasından seçim).
• checkbox: Onay kutusu (bir veya birkaç arasından seçim).
• button: Normal düğme.
• file: Dosya seçimi alanı.
• hidden: Gizli alan, kullanıcı tarafından görünmez, ancak form ile gönderilir.
• image: Formu göndermek için resim düğmesi.

HTML5 spesifikasyonu yeni türler ekledi:

• email: E-posta adresi girişi için alan.
• url: URL girişi için alan.
• number: Sayı girişi için alan.
• range: Belirli bir aralıkta sayısal değer seçmek için kaydırıcı.
• date: Tarih seçimi için alan.
• month: Ay ve yıl seçimi için alan.
• week: Hafta ve yıl seçimi için alan.
• time: Saat seçimi için alan.
• datetime-local: Saat dilimi olmadan tarih ve saat seçimi.
• search: Arama alanı.
• color: Renk seçimi alanı.
• tel: Telefon numarası girişi için alan.

Kullanım örneği:

<!-- Tek satırlık metin alanı -->
<input type="text" placeholder="İsim">

<!-- Şifre alanı -->
<input type="password" placeholder="Şifre">

<!-- Formu göndermek için düğme -->
<input type="submit" value="Gönder">

<!-- Formu sıfırlamak için düğme -->
<input type="reset" value="Sıfırla">

<!-- Radyo düğmeleri -->
<input type="radio" name="gender" value="male"> Erkek
<input type="radio" name="gender" value="female"> Kadın

<!-- Onay kutuları -->
<input type="checkbox" name="interests" value="music"> Müzik
<input type="checkbox" name="interests" value="sports"> Spor

<!-- Normal düğme -->
<input type="button" value="Bana tıkla">

<!-- Dosya seçimi alanı -->
<input type="file">

<!-- Gizli alan -->
<input type="hidden" name="userId" value="123">

<!-- Resim düğmesi -->
<input type="image" src="submit.png" alt="Gönder">

<!-- E-posta alanı -->
<input type="email" placeholder="E-posta">

<!-- URL alanı -->
<input type="url" placeholder="Web sitesi">

<!-- Sayı alanı -->
<input type="number" min="1" max="10">

<!-- Kaydırıcı -->
<input type="range" min="0" max="100">

<!-- Tarih seçimi -->
<input type="date">

<!-- Ay seçimi -->
<input type="month">

<!-- Hafta seçimi -->
<input type="week">

<!-- Saat seçimi -->
<input type="time">

<!-- Tarih ve saat (yerel) -->
<input type="datetime-local">

<!-- Arama alanı -->
<input type="search" placeholder="Ara">

<!-- Renk seçimi -->
<input type="color">

<!-- Telefon numarası -->
<input type="tel" placeholder="+7 (xxx) xxx-xx-xx">