HTML ve HTML5 Ä°nput Tipleri

HTML <input> öğesi, kullanıcıdan verileri almak için web formlarında etkileÅŸimli kontroller oluÅŸturmak için kullanılır; Girdi alanı , verilen öğeye uygulanan type özniteliÄŸinin deÄŸerine baÄŸlı olarak farklı bir biçim alır.

cihaza ve kullanıcı aracısına bağlı olarak, çok çeşitli giriş türleri ve kontrol widget'ları mevcuttur. Çok sayıda olası girdi türü ve öznitelik kombinasyonu nedeniyle, bu, piyasadaki en güçlü ve karmaşık HTML öğelerinden biridir.

Bu bölümde, HTML <input> öğesi için farklı türler açıklanmaktadır.

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="time">
• <input type="url">
• <input type="week">

HTML input text

<input type="text"> tek satırlık bir metin giriÅŸ alanını tanımlar:

<form>
  Adı:<br>
  <input type="text" name="adi"><br>
  Soyadı:<br>
  <input type="text" name="soyadi">
</form>

Varsayalı olarak veri giriş alanı uzunluğu 20 karakterdir.

HTML input password

<input type="password"> ÅŸifre alanı tanımlar:

<form>
  Adı:<br>
  <input type="text" name="adi"><br>
  Åžifre:<br>
  <input type="password" name="soyadi">
</form>

Şifre giriş alanına yazılan her karakter yıldız veya daire olarak gizlenecektir.

HTML input submit

<input type="submit"> form alanında form verilerini göndermek için bir buton tanımlar.

Form alanında, Verilerin nereye gönderileceÄŸi formun action özniteliÄŸinde belirtilir:

<form action="mesaj.php">
  Adı:<br>
  <input type="text" name="adi"><br>
  Soyadı:<br>
  <input type="text" name="soyadi">
  <input type="submit" value="Gönder">
</form>

Gönder düğmesinin value özelliÄŸini atlarsanız, buton varsayılan bir metin alır.

HTML input reset

<input type="reset"> tüm form deÄŸerlerini varsayılan deÄŸerlerine sıfırlayacak bir sıfırlama butonu tanımlar.

<form action="mesaj.php">
  Adı:<br>
  <input type="text" name="adi"><br>
  Soyadı:<br>
  <input type="text" name="soyadi">
  <input type="submit" value="Gönder">
  <input type="reset">
</form>

"Sıfırla" butonuna tıklarsanız, form verileri varsayılan değerlere sıfırlanacaktır.

HTML Ä°nput Radio

<input type="radio"> bir radyo düğmesini tanımlar.

Radyo düğmeleri, kullanıcının sınırlı sayıda seçenekten YALNIZCA BİRİNİ seçmesine izin verir.

<form>
  <input type="radio" name="meyve" value="elma" checked="checked"> Elma<br>
  <input type="radio" name="meyve" value="kiraz">Kiraz <br>
  <input type="radio" name="meyve" value="portakal"> Portakal
</form>

HTML Ä°nput Checkbox

<input type="checkbox"> Bir onay kutusu tanımlar.

Onay kutuları, kullanıcının sınırlı sayıda seçenek arasından SIFIR veya DAHA FAZLA seçeneği seçmesine izin verir.

HTML Ä°nput Button

<input type="button"> Bir buton tanımlar.

<input type="button" onclick="alert('Javascript Dünyası')" value="Tıkla">

HTML Ä°nput Hidden

<input type="hidden"> Gizli bir giriÅŸ alanı (bir kullanıcı tarafından görülmez) alan tanımlar.

Gizli bir alan, web geliştiricilerinin, bir form gönderildiğinde kullanıcılar tarafından görülemeyen veya değiştirilemeyen verileri eklemesine izin verir.

Gizli bir alan, web geliştiricilerinin, bir form gönderildiğinde kullanıcılar tarafından görülemeyen veya değiştirilemeyen verileri eklemesine izin verir.

<form>
  Adı:<br>
  <input type="text" name="adi"><br>
  <input type="hidden" id="custId" name="custId" value="3487">
  <input type="submit" value="Gönder">  
</form>

HTML5 Yeni İnput Türleri

Bu eğiticide, HTML5'te tanıtılan yeni giriş türleri hakkında bilgi edineceksiniz.

HTML5'te Yeni Giriş Türleri

HTML5 <input>, e-posta, tarih, saat, renk, aralık vb. Gibi birkaç yeni tür sunar. Kullanıcı deneyimini iyileÅŸtirmek ve formları daha etkileÅŸimli hale getirmek için yeni özellikler eklendi. Ancak, bir tarayıcı bu yeni giriÅŸ türlerini tanıyamazsa, bunları normal bir metin kutusu gibi deÄŸerlendirecektir.

Bu bölümde, aşağıdaki yeni giriş türlerinin her birine kısa bir göz atacağız:

• <input type="color">
• <input type="email">
• <input type="range">
• <input type="time">
• <input type="date">
• <input type="month">
• <input type="search">
• <input type="url">
• <input type="datetime-local">
• <input type="number">
• <input type="tel">
• <input type="week">

HTML Ä°nput Color

color input tipi bir renk seçici bir renk seçmesini saÄŸlar ve onaltılı biçimde renk deÄŸerini (#rrggbb) verir. Bir deÄŸer belirtmezseniz, varsayılan deÄŸer #000000 siyahtır.

<form>
    Renk Seç:
    <input type="color" value="#00ff00" id="mycolor">
</form>

ÇIKTI:

HTML Ä°nput Date

date input türü, kullanıcının açılan takvimden bir tarih seçmenize olanak verir. Tarih deÄŸeri yılı, ayı ve günü içerir, ancak saati içermez.

<form>
    Gün Seç:<br>
    <input type="date" value="2019-04-15" id="mydate">
</form>

ÇIKTI:

HTML Input Datetime-local

datetime-local input tipi kullanıcı yıl, ay ve gün yanı sıra saat ve dakika süre dahil olmak üzere yerel tarih ve saati hem seçmenize olanak saÄŸlar.

<form>
    Tarih ve zaman seç:<br>
    <input type="datetime-local" id="mydatetime">
</form>

ÇIKTI:

HTML Input Email

email input tipi e-posta adresini girmesini saÄŸlar. Standart bir metin giriÅŸ türüne çok benzer, ancak required öznitelikle birlikte kullanılırsa , tarayıcı, düzgün biçimlendirilmiÅŸ bir e-posta adresinin girilmesi gerektiÄŸinden emin olmak için kalıpları arayabilir.

<form>
    Email:
    <input type="email" id="myemail" required>
</form>

HTML Input Month

<input type="month"> Kullanıcı bir ay ve yıl seçmenize olanak saÄŸlar.

Tarayıcı desteğine bağlı olarak, giriş alanında bir tarih seçici görünebilir.

<form>
    Ayı Seç:
    <input type="month" id="mymonth">
</form>

HTML Input Number

<input type="number"> Sayısal bir giriÅŸ alanı saÄŸlar. Ayrıca hangi numaraların kabul edileceÄŸine iliÅŸkin kısıtlamalar da belirleyebilirsiniz.

Aşağıdaki örnek, 1 ile 10 arasında sayısal bir değer girmenize izin verecektir.

<form>
    Sayı girin:
    <input type="number" min="1" max="10" step="0.5" id="mynumber">
</form>

ÇIKTI:

HTML Input Range

range input tipi, belirli bir aralık içinde bir sayısal deÄŸer girmek için de kullanılabilir. number GiriÅŸe çok benzer ÅŸekilde çalışır , ancak bir sayı girmek için daha basit bir kontrol sunar(Bir kaydırma kontrol gibi).

<form>
    Sayı girin:
    <input type="range" min="1" max="10" step="0.5" id="mynumber">    
</form>

ÇIKTI:

HTML Input Search

search input tipi arama giriÅŸ alanlarını oluÅŸturmak için kullanılabilir.

Bir arama alanı genellikle normal bir metin alanı gibi davranır, ancak Chrome ve Safari gibi bazı tarayıcılarda, arama kutusuna yazmaya başladığınız anda, alanın sağ tarafında, arama alanını hızlı bir şekilde temizlemenizi sağlayan küçük bir çarpı işareti görünür. Nasıl çalıştığını görmek için örneğe bakalım:

<form>
    websitede Ara:
    <input type="search" id="mysearch">
</form>	

ÇIKTI:

HTML Input Tel

tel input tipi bir telefon numarası girmek için kullanılabilir.

Tarayıcılar yerel olarak tel giriÅŸ doÄŸrulamasını desteklemez. Ancak, placeholder kullanıcıların bir telefon numarası için doÄŸru biçimi girmelerine yardımcı olmak için özniteliÄŸi kullanabilir veya özniteliÄŸi kullanarak kullanıcı giriÅŸini doÄŸrulamak için normal bir ifade belirtebilirsiniz pattern gibi, Bir örneÄŸe bakalım:

<form>
    Telefon Numarası:
    <input type="tel" id="myphone" placeholder="xx-xxxx-xxxx" required>
</form>

ÇIKTI:

HTML Input Time

time input tipi bir süre (saat ve dakika) girmek için de kullanılabilir.

Tarayıcı, yerel sistemin saat ayarına bağlı olarak zamanları girmek için 12 veya 24 saatlik biçimi kullanabilir.

<form>
    Zaman Seç:
    <input type="time" id="mytime">
</form>

ÇIKTI:

HTML Input Url

url input tipi URL veya web adreslerini girmek için de kullanılabilir.

Bu multiple özelliÄŸi birden fazla URL girmek için kullanabilirsiniz. Ayrıca, required öznitelik belirtilirse, tarayıcı, giriÅŸ kutusuna yalnızca URL'ler için standart biçimle eÅŸleÅŸen metnin girilmesini saÄŸlamak için otomatik olarak doÄŸrulama gerçekleÅŸtirecektir. Bunun nasıl çalıştığını görelim:

<form>
    Web Sitesi URL Adres:
    <input type="url" id="myurl" required>
</form>

HTML Input Week

week input türü, kullanıcının açılan takvimden haftada yıl seçmenize olanak saÄŸlar.

Tarayıcı desteğine bağlı olarak, giriş alanında bir tarih seçici görünebilir.

<form>
    Hafta Seç:
    <input type="week" id="myweek">
</form>