HTML Form İnput Türleri!
HTML Form İnput Türleri!

HTML Form İnput. Bu bölüm, <input> öğesi için farklı giriş türlerini açıklar.

HTML Giriş Türleri

HTML’de kullanabileceğiniz farklı giriş türleri:

<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="text">
<input type="time">
<input type="url">
<input type="week">

Giriş Türü Metni

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

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

Çıktısı;

See the Pen html input text by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Şifresi

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

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

Çıktısı;

See the Pen html input şifre by ArmyYazılım (@armyyazilim) on CodePen.

Bir şifre alanındaki karakterler maskelenir (yıldız veya daire olarak gösterilir).

Giriş Türü Gönder

<input type="submit">Form verilerini bir form işleyicisine göndermek için bir düğme tanımlar .

Form işleyicisi, genellikle giriş verilerini işlemek için bir komut dosyası içeren bir sunucu sayfasıdır.

Form işleyicisi, formun action niteliğinde belirtilir :

<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>

Çıktısı;

See the Pen html form gönder butonu by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Sıfırlama

<input type="reset"> Tüm form değerlerini varsayılan değerlerine sıfırlayacak bir sıfırlama düğmesi tanımlar :

<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">
  <input type="reset">
</form>

Çıktısı;

See the Pen html giriş sıfırlama by ArmyYazılım (@armyyazilim) on CodePen.

Giriş değerlerini değiştirip ardından “Reset” düğmesini tıklarsanız, form verileri varsayılan değerlere sıfırlanır.

Giriş Tipi Radyo

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

Radyo düğmeleri, kullanıcının sınırlı sayıda seçenek arasından SADECE BİR’ini seçmesini sağlar:

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

Çıktısı;

See the Pen input radio by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Onay Kutusu

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

Onay kutuları, kullanıcının sınırlı sayıda seçeneğin SIFIR veya DAHA FAZLA seçeneklerini seçmesine izin verir.

<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>

Çıktısı;

See the Pen checkbox by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Düğmesi

<input type="button">bir düğmeyi tanımlar :

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

Çıktısı;

See the Pen html input button by ArmyYazılım (@armyyazilim) on CodePen.

HTML5 Giriş Türleri

HTML5 birkaç yeni giriş türü ekledi:

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

Yeni giriş türleri eski tarayıcılarda kullanılamaz ve default olarak <input type="text"> girişi olarak değiştirilir.

Giriş Tipi Rengi

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

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

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

Çıktısı;

See the Pen html input renk seçimi by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Tarih

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

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

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

Tarihlere kısıtlamalar eklemek için minve maxniteliklerini de kullanabilirsiniz :

<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>

Çıktısı;

See the Pen input tarih by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Datetime-local

<input type="datetime-local">Saat dilimi olmayan bir tarih ve saat giriş alanı belirtir.

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

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

Çıktısı;

See the Pen input datetime-local by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü E-postası

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

Tarayıcı desteğine bağlı olarak, e-posta adresi gönderildiğinde otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar e-posta türünü tanır ve e-posta girişiyle eşleşmesi için klavyeye “.com” ekler.

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

Çıktısı;

See the Pen input e posta by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Dosyası

<input type="file"> Bir dosya seçme alanını ve dosya yüklemeleri için bir “Göz” düğmesini tanımlar.

<form>
  Select a file: <input type="file" name="myFile">
</form>

Çıktısı;

See the Pen giriş tipi dosyası by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Ay

<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>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

Çıktısı;

See the Pen input month by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Numarası

<input type="number"> sayısal bir giriş alanı tanımlar.

Hangi numaraların kabul edileceği ile ilgili kısıtlamalar da belirleyebilirsiniz.

Aşağıdaki örnek, 1 ile 5 arasında bir değer girebileceğiniz sayısal bir giriş alanı görüntüler:

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

Çıktısı;

See the Pen html input giriş numarası by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Kısıtlamaları

İşte bazı genel giriş kısıtlamalarının bir listesi:

Nitelik Açıklama
checked Sayfa yüklendiğinde bir giriş alanının seçilmesi gerektiğini belirtir (type = “checkbox” veya type = “radio” için)
disabled Bir giriş alanının devre dışı bırakılması gerektiğini belirtir
max Bir giriş alanı için maksimum değeri belirtir
maxlength Bir giriş alanı için maksimum karakter sayısını belirtir.
min Bir giriş alanı için minimum değeri belirtir
pattern Giriş değerini kontrol etmek için normal bir ifade belirtir.
readonly Bir giriş alanının salt okunur olduğunu belirtir (değiştirilemez)
required Bir giriş alanının gerekli olduğunu belirtir (doldurulması gerekir)
size Bir giriş alanının genişliğini (karakter olarak) belirtir
step Bir giriş alanı için yasal sayı aralıklarını belirtir
value Bir giriş alanı için varsayılan değeri belirtir.

Bir sonraki bölümde giriş kısıtlamaları hakkında daha fazla bilgi edineceksiniz.

Aşağıdaki örnekte 10’unun katları şeklinde 0 ile 100 arasında bir sayı belirtebilirsiniz. Varsayılan değer 30’dur:

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

Çıktısı;

See the Pen input points by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Aralığı

<input type="range">Bunun tam değer (bir kaydırma kontrol gibi) önemli olmayan bir numarasını girmek için bir denetim tanımlar.

Standart yelpazesi ile kısıtlamalar ayarlayabilirsiniz, ancak minmaxve stepözelliklerini düzenleyebilirsiniz:

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

Çıktısı;

See the Pen input giriş tipi aralığı by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Arama

<input type="search">Arama alanları (normal metin alanı gibi bir arama alanı davranacağını) için kullanılmaktadır.

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

Çıktısı;

See the Pen giriş tipi arama by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Tipi Tel

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

<form>
  Telephone:
  <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>

Çıktısı;

See the Pen input tel by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Zamanı

<input type="time">Kullanıcı bir süre (saat dilimi bir) seçmenize olanak sağlar.

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

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

Çıktısı;

See the Pen input giriş türü zamanı by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü URL’si

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

Tarayıcı desteğine bağlı olarak, url alanı gönderildiğinde otomatik olarak doğrulanabilir.

Bazı akıllı telefonlar URL türünü tanır ve URL girişiyle eşleştirmek için klavyeye “.com” ekler.

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

Çıktısı;

See the Pen input url girişi by ArmyYazılım (@armyyazilim) on CodePen.

Giriş Türü Haftası

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

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

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

Çıktısı;

See the Pen giriş türü haftası by ArmyYazılım (@armyyazilim) on CodePen.

HTML Giriş Türü Özelliği

TagDescription
<input type=””>Görüntülenecek giriş türünü belirtir.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …

HTML

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir