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.



İpucu: Özelliğin varsayılan değeri type="text" dir.

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>


Not: Değer, sayfa içeriğinde kullanıcıya gösterilmezken, herhangi bir tarayıcının geliştirici araçları veya "Kaynağı Görüntüle" işlevi kullanılarak görülebilir (ve düzenlenebilir). Gizli girişleri bir güvenlik biçimi olarak kullanmayın!

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:


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:

Renk Seç:

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:

Gün Seç

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:

Tarih ve zaman seç:

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:

Sayı girin:

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:

Sayı girin:

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:

websitede Ara:

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:

Telefon Numarası:

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:

Zaman Seç:

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>

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır.

4034

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
  • MİTHRİL FRAMEWORK
  • Laravel
POPÜLER MAKALE
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML RESME LİNK VERME
  • HTML DİV ve SPAN NEDİR?
  • HTML FORM OLUŞTURMA
  • HTML RESİM EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • KALİTE KAYBETMEDEN RESİMLERİ BÜYÜTME
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.