HTML girdi türleri

Bu bölüm <input> öğesinin girdi türünü tanımlar.

Girdi türü: text

<input type="text"> tarafından tanımlanırMetin girdisiTek satırlık girdi alanı:

Örnek

<form>
 İsim:<br>
<input type="text" name="firstname">
<br>
 Soyadı:<br>
<input type="text" name="lastname">
</form>

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

İsim:


Soyadı:

Girdi türü: password

<input type="password"> tanımlamakParola alanı：

Örnek

<form>
 Kullanıcı adı:<br>
<input type="text" name="username">
<br>
 Kullanıcı parolası:<br>
<input type="password" name="psw">
</form>

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

Kullanıcı adı:


Kullanıcı parolası:

Not:password alanındaki karakterler maskeli işleme tabi tutulur (yıldız veya dolu daire olarak gösterilir).

Girdi türü: submit

<input type="submit"> tanımlamakgönderForm verileriniForm işleyicidönüm düğmesi.

Form işleyici (form-handler) genellikle girdi verilerini işleyen betik içeren sunucu sayfasıdır.

Formun action özelliğinde form işleyicisini (form-handler) belirtin:

Örnek

<form action="action_page.php">
İsim:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Soyadı:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Gönder">
</form>

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

İsim:


Soyadı:


Gönder düğmesinin value özelliğini atarsanız, düğme varsayılan metni alır:

Örnek

<form action="action_page.php">
İsim:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Soyadı:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit">
</form>

Kendi Kendine Deney

Giriş Türü: radyo düğmesi

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

Radyo düğmeleri, kullanıcıya sınırlı sayıda seçenekten yalnızca birini seçmesine izin verir:

Örnek

<form>
<input type="radio" name="sex" value="male" checked>Erkek
<br>
<input type="radio" name="sex" value="female">Kadın
</form>

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

Erkek

Kadın

Giriş Türü: onay kutusu

<input type="checkbox"> Onay kutusunu tanımlar.

Onay kutuları, kullanıcıya sınırlı sayıda seçenekten sıfır veya daha fazla seçenek seçmesine izin verir.

Örnek

<form>
<input type="checkbox" name="vehicle" value="Bike">Bir bisikletim var
<br>
<input type="checkbox" name="vehicle" value="Car">Bir arabam var 
</form>

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

Bir bisikletim var

Bir arabam var

Giriş Türü: düğme

<input type="button"> tanımlamakdüğme。

Örnek

<input type="button" onclick="alert('Hello World!')" value="Click Me!">

Kendi Kendine Deney

Yukarıdaki HTML kodu tarayıcıda şu şekilde görünecektir:

HTML5 Giriş Türleri

HTML5, birçok yeni giriş türü eklemiştir:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Not:Eski web tarayıcıları tarafından desteklenmeyen giriş türleri, metin türü olarak algılanır.

Giriş türü: number

<input type="number"> Sayı değeri içeren giriş alanları için kullanılır.

Sayıları sınırlayabilirsiniz.

Tarayıcı desteğine bağlı olarak, sınırlamalar giriş alanlarına uygulanabilir.

Örnek

<form>
  Miktar (1 ile 5 arasında):
  <input type="number" name="quantity" min="1" max="5">
</form>

Kendi Kendine Deney

Giriş Sınırlamaları

Aşağıda bazı yaygın girişsınırlamaları listelenmiştir (bazıları HTML5'te yeni eklenmiştir):

Özellik Açıklama
disabled Giriş alanının devre dışı bırakılmasını belirler.
max Giriş alanının en fazla değerini belirler.
maxlength Giriş alanının en fazla karakter sayısını belirler.
min Giriş alanının en küçük değerini belirler.
pattern Giriş değerlerini kontrol eden正则表达式.
readonly Giriş alanının salt okunur olduğunu (değiştirilemez) belirler.
required Giriş alanının zorunlu olduğunu (doldurulması zorunlu) belirler.
size Giriş alanının genişliğini (karakter olarak) belirler.
step Giriş alanlarının geçerli sayı aralığını belirler.
value Giriş alanlarının varsayılan değerini belirler.

Bir sonraki bölümde daha fazla girişsınırlaması hakkında öğreneceksiniz.

Örnek

<form>
  Miktar:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

Kendi Kendine Deney

Giriş türü: date

<input type="date"> Tarih içeren giriş alanları için kullanılır.

Tarayıcı desteklerine göre, tarih seçicisi girdi alanında görünecektir.

Örnek

<form>
  Doğum günü:
  <input type="date" name="bday">
</form>

Kendi Kendine Deney

Girişi sınırlamak için ekleyebilirsiniz:

Örnek

<form>
  1980-01-01 öncesinde bir tarih girin:
  <input type="date" name="bday" max="1979-12-31"><br>
  2000-01-01'den sonra bir tarih girin:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

Kendi Kendine Deney

Girdi türü: color

<input type="color"> Renk içeren girdi alanları için kullanılır.

Tarayıcı desteklerine göre, renk seçicisi girdi alanında görünecektir.

Örnek

<form>
  En sevdiğiniz rengi seçin:
  <input type="color" name="favcolor">
</form>

Kendi Kendine Deney

Girdi türü: range

<input type="range"> Belirli bir aralıkta değer içeren girdi alanları için kullanılır.

Tarayıcı desteklerine göre, girdi alanı kaydırıcı kontrol olarak görünebilir.

Örnek

<form>
  <input type="range" name="points" min="0" max="10">
</form>

Kendi Kendine Deney

Sınırlamak için aşağıdaki özellikleri kullanabilirsiniz: min, max, step, value.

Girdi türü: month

<input type="month"> Kullanıcıların ay ve yılını seçmesini sağlar.

Tarayıcı desteklerine göre, tarih seçicisi girdi alanında görünecektir.

Örnek

<form>
  Doğum günü (ay ve yıl):
  <input type="month" name="bdaymonth">
</form>

Kendi Kendine Deney

Girdi türü: week

<input type="week"> Kullanıcıların hafta ve yılını seçmesini sağlar.

Tarayıcı desteklerine göre, tarih seçicisi girdi alanında görünecektir.

Örnek

<form>
  Bir hafta seçin:
  <input type="week" name="week_year">
</form>

Kendi Kendine Deney

Girdi türü: time

<input type="time"> Kullanıcıların zamanı (uzaktan bölgeler) seçmesini sağlar.

Tarayıcı desteklerine göre, zaman seçicisi girdi alanında görünecektir.

Örnek

<form>
  Bir zaman seçin:
  <input type="time" name="usr_time">
</form>

Kendi Kendine Deney

Girdi türü: datetime

<input type="datetime"> Kullanıcıların tarih ve zamanı (uzaktan bölgeler) seçmesini sağlar.

Tarayıcı desteklerine göre, tarih seçicisi girdi alanında görünecektir.

Örnek

<form>
  Doğum günü (tarih ve zaman):
  <input type="datetime" name="bdaytime">
</form>

Kendi Kendine Deney

Girdi türü: datetime-local

<input type="datetime-local"> Kullanıcıların tarih ve zamanı (uzaktan bölgeler) seçmesini sağlar.

Tarayıcı desteklerine göre, tarih seçicisi girdi alanında görünecektir.

Örnek

<form>
  Doğum günü (tarih ve zaman):
  <input type="datetime-local" name="bdaytime">
</form>

Kendi Kendine Deney

Giriş Türü: email

<input type="email"> E-posta adresini içermesi gereken giriş alanları için kullanılır.

Tarayıcı desteğine göre, gönderilirken e-posta adresi otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar e-posta türünü tanır ve klavyeye ".com" ekleyerek e-posta girişlerini eşleştirir.

Örnek

<form>
  E-posta:
  <input type="email" name="email">
</form>

Kendi Kendine Deney

Giriş Türü: search

<input type="search"> Arama alanları (arama alanlarının görünümü normal metin alanlarına benzer).

Örnek

<form>
  Google Arama:
  <input type="search" name="googlesearch">
</form>

Kendi Kendine Deney

Giriş Türü: tel

<input type="tel"> Telefon numarasını içermesi gereken giriş alanları için kullanılır.

Şu anda sadece Safari 8 tel türünü destekler.

Örnek

<form>
  Telefon:
  <input type="tel" name="usrtel">
</form>

Kendi Kendine Deney

Giriş Türü: url

<input type="url"> URL adresini içermesi gereken giriş alanları için kullanılır.

Tarayıcı desteğine göre, gönderilirken URL alanı otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar URL türünü tanır ve klavyeye ".com" ekleyerek URL girişlerini eşleştirir.

Örnek

<form>
  Ana sayfanızı ekleyin:
  <input type="url" name="homepage">
</form>

Kendi Kendine Deney