En son web geliştirme öğreticiler

HTML Girdi Türleri

❮ Önceki Sonraki Bölüm ❯

Giriş Tipleri

Bu bölümde giriş türleri açıklanmaktadır <input> elemanı.

Girdi Türü: Metin

<input type="text"> Metin girişi için bir tek çizgi giriş alanı tanımlar:

Örnek

<form>
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

İsim:

Soyadı:

Girdi Türü: şifre

<input type="password"> bir şifre alanı tanımlar:

Örnek

<form>
  User name:<br>
  <input type="text" name="username"><br>
  User password:<br>
  <input type="password" name="psw">
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

Kullanıcı adı:

Kullanıcı şifresi:

Bir parola alanına karakterler maskelenmiş (shown as asterisks or circles) .

Girdi Türü: göndermek

<input type="submit"> form işleyici için form girişi gönderdiğiniz için bir düğme tanımlar.

form işleyicisi tipik giriş verilerini işlemek için bir komut dosyası ile bir sunucu sayfası.

form işleyicisi formun action özelliğinde belirtilir:

Örnek

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit" value="Submit">
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

İsim:

Soyadı:



Gönderdiğiniz düğmesinin value özelliğini atlarsanız, düğme varsayılan bir metin alacak:

Örnek

<form action="action_page.php">
  First name:<br>
  <input type="text" name="firstname" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse"><br><br>
  <input type="submit">
</form>
Kendin dene "

Girdi Türü: radio

<input type="radio"> Bir tanımlayan radio düğmesini.

Radio düğmeleri Kullanıcının seçimler sınırlı sayıda SADECE BİR seçelim:

Örnek

<form>
  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

Erkek
Kadın
Diğer

Girdi Türü: checkbox

<input type="checkbox"> bir tanımlayan checkbox .

Checkboxes , bir kullanıcı seçenekleri sınırlı sayıda SIFIR veya DAHA seçenekleri seçmek edelim.

Örnek

<form>
  <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
  <input type="checkbox" name="vehicle2" value="Car"> I have a car
</form>
Kendin dene "

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:

bir bisikletim var
bir arabam var

Girdi Türü: button

<input type="button"> bir tanımlayan button :

Örnek

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

Bu HTML kodunu yukarıda bir tarayıcıda nasıl görüntüleneceğini geçerli:


HTML5 Input Türleri

HTML5 birkaç yeni eklenen input türlerini:

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

Input değil eski web tarayıcıları tarafından desteklenen tipleri, gibi davranacaktır input tipi metin.

Input Türü: number

<input type="number"> bir sayısal bir değer olmalıdır giriş alanları için kullanılmaktadır.

Numaraların üzerine kısıtlamalar ayarlayabilirsiniz.

tarayıcı desteğine bağlı olarak, kısıtlamalar giriş alanı için geçerli olabilir.

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>
Kendin dene "

Input Kısıtlamalar

Burada bazı genel bir listesi input kısıtlamalar (some are new in HTML5) :

nitelik Açıklama
disabled Bir giriş alanı devre dışı bırakılmalıdır belirtir
max Bir giriş alanı için maksimum değeri belirtir
>maxlength Bir giriş alanı için karakterin sayısını belirtir
min Bir giriş alanı için minimum değeri belirtir
pattern karşı giriş değerini kontrol etmek için normal bir ifade belirtir
readonly Belirtir bir giriş alanı salt okunur olduğunu (cannot be changed)
required Bir giriş alanı gerekiyor belirtir (must be filled out)
size Genişliğini belirler (in characters) bir giriş alanının
step Bir giriş alanı için yasal numara aralıklarını belirler
value Bir giriş alanı için varsayılan değeri belirtir

Sen hakkında daha fazla öğreneceksiniz input sonraki bölümde kısıtlamalar.

OperaSafariChromeFirefoxInternet Explorer

Örnek

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

Input Türü: date

<input type="date"> bir tarih olmalıdır giriş alanları için kullanılmaktadır.

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Birthday:
  <input type="date" name="bday">
</form>
Kendin dene "

Sen kısıtlamalar ekleyebilir input :

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>
Kendin dene "

Input Türü: Renk

<input type="color"> bir renk içermelidir giriş alanları için kullanılmaktadır.

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>
Kendin dene "

Input Türü: menzil

<input type="range"> aralığında bir değer olmalıdır giriş alanları için kullanılır.

tarayıcı desteğine bağlı olarak, giriş alanı bir kaydırma kontrol olarak görüntülenebilir.

OperaSafariChromeFirefoxInternet Explorer

Örnek

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

Sen kullanabilirsiniz following dak, max, step, değer: kısıtlamalarını belirtmek için özelliklerini.

Input Türü: month

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

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>
Kendin dene "

Input Türü: week

<input type="week"> kullanıcı haftada yıl seçmenize olanak sağlar.

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Select a week:
  <input type="week" name="week_year">
</form>
Kendin dene "

Input Türü: time

<input type="time"> Kullanıcı bir zaman seçmenize olanak sağlar (no time zone) .

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Select a time:
  <input type="time" name="usr_time">
</form>
Kendin dene "

Input Türü: datetime

<input type="datetime"> kullanıcı bir tarih ve saat seçmenize olanak sağlar (with time zone) .

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>
Kendin dene "
Not giriş tipi tarih saat HTML standart kaldırılır. yerine datetime-yerel kullanın.

Girdi Türü: datetime-yerel

<input type="datetime-local"> kullanıcı bir tarih ve saat seçmenize olanak sağlar (no time zone) .

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

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>
Kendin dene "

Girdi Türü: E-posta

<input type="email"> e-posta adresi içermelidir giriş alanları için kullanılmaktadır.

gönderirken tarayıcı desteğine bağlı olarak, e-posta adresi otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar E-posta türünü tanır ve ekliyor ".com" e-posta girişini maç için klavyeye.

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  E-mail:
  <input type="email" name="email">
</form>
Kendin dene "

Girdi Türü: arama

<input type="search"> arama alanları için kullanılır (a search field behaves like a regular text field) .

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Search Google:
  <input type="search" name="googlesearch">
</form>
Kendin dene "

Girdi Türü: tel

<input type="tel"> Bir telefon numarası içermelidir giriş alanları için kullanılmaktadır.

tel tipi şu anda sadece Safari 8 desteklenir.

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Telephone:
  <input type="tel" name="usrtel">
</form>
Kendin dene "

Girdi Türü: url

<input type="url"> URL adresini içermelidir giriş alanları için kullanılmaktadır.

gönderirken tarayıcı desteğine bağlı olarak, url alanı otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar url türünü tanır ve ekliyor ".com" url giriş maç için klavyeye.

OperaSafariChromeFirefoxInternet Explorer

Örnek

<form>
  Add your homepage:
  <input type="url" name="homepage">
</form>
Kendin dene "

Egzersizleri ile Yourself test edin!

Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »


❮ Önceki Sonraki Bölüm ❯