HTML İnput Nitelikleri!

#HTML

HTML giriş input Nitelikleri input etiketinin kullanım özelliklerini belirtir. İnput nitelikleriyle istediğiniz biçimde veriyi kullanıcılardan alabilirsiniz

HTML İnput Nitelikleri!
HTML İnput Nitelikleri!

Öznitelik değeri

valueÖzelliği, bir giriş alanı için başlangıç değeri belirtir:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John">
</form>

Çıktısı;

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

Salt okunur Öznitelik

readonlyGiriş alanı salt okunur olduğunu (değiştirilemez) özellik belirtir:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" readonly>
</form>

Çıktısı;

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

Engelli Özelliği

disabledNitelik Giriş alanı devre dışı olduğunu belirtir .

Devre dışı bırakılmış bir giriş alanı kullanılamaz ve tıklanamaz durumdadır ve formu gönderirken değeri gönderilmeyecektir:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" disabled>
</form>

Çıktısı;

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

Boyut Özniteliği

sizeNitelik giriş alanı için (karakter) boyutunu belirtir:

<form action="">
  First name:<br>
  <input type="text" name="firstname" value="John" size="40">
</form>

Çıktısı;

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

Maksimum Uzunluk Özniteliği

Bu maxlengthnitelik giriş alanı için izin verilen maksimum uzunluğu belirtir:

<form action="">
  First name:<br>
  <input type="text" name="firstname" maxlength="10">
</form>

Çıktısı;

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

Bir maxlengthnitelik ile, giriş alanı izin verilen karakter sayısından daha fazlasını kabul etmeyecektir.

Bu maxlengthözellik herhangi bir geri bildirim sağlamaz. Kullanıcıyı uyarmak istiyorsanız, JavaScript kodunu yazmanız gerekir.

Not: Giriş kısıtlamaları kusursuz değildir ve JavaScript yasadışı giriş eklemek için birçok yol sunar. Girişi güvenli bir şekilde sınırlandırmak için, alıcı (sunucu) tarafından da kontrol edilmesi gerekir!

HTML5 Nitelikleri

HTML5, aşağıdaki özellikleri ekledi <input>:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

ve aşağıdaki özellikler için <form>:

  • autocomplete
  • novalidate

Otomatik Tamamlama Özelliği

autocomplete özelliği form veya giriş alanlarında otomatik tamamlama sağlar.

Otomatik tamamlama açıkken, tarayıcı kullanıcının daha önce girdiği değerleri temel alarak giriş değerlerini otomatik olarak tamamlar.

İpucu: Form için otomatik olarak “açık”, belirli giriş alanları için “kapalı” veya tam tersi mümkündür.

Bu autocompletenitelik <form>aşağıdakilerle birlikte çalışır <input>: metin, arama, url, tel, e-posta, şifre, datepickers, aralık ve renk.

Otomatik tamamlama özelliğinin açık olduğu (bir giriş alanı için kapalı) bir HTML formu:

<form action="/action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

Çıktısı;

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

İpucu: Bazı tarayıcılarda, bunun çalışması için otomatik tamamlama işlevini etkinleştirmeniz gerekebilir.

Novalidate Özniteliği

Bu novalidatenitelik bir <form>niteliktir.

Var olduğunda novalidate, form verilerinin gönderildiğinde doğrulanmaması gerektiğini belirtir.

Formun gönderim sırasında onaylanmayacağını belirtir:

<form action="/action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

Çıktısı;

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

Otomatik odaklama Özniteliği

autofocusGiriş alanı otomatik sayfa yüklendiğinde odağa alınan niteliği belirtir. Sayfa yüklendiğinde hemen doldurmaya başlayabilirsiniz.

Sayfa yüklendiğinde “firstname” giriş alanı otomatik olarak netlensin:

First name:<input type="text" name="fname" autofocus>

Çıktısı;

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

Form Özniteliği

“Form” özniteliğini genel form etiketiyle karıştırmayın. form etiketinin dışındaki bir “input” a genel form etiketine verdiğimiz “id” kimlik değerini form özniteliği ile verirsek input dışarıda da olsa genel form etiketinin içinde işleme alınır.

HTML formunun dışında bulunan bir giriş alanı (ancak hala formun bir parçası):

<form action="/action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

Çıktısı;

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

Formaction Özniteliği

formactionNitelik form gönderildiğinde girdi denetimi işleyecek bir dosyanın URL’sini belirtir.

Formaction niteliği, <form>elementin action niteliğini geçersiz kılar .

FORMACTION nitelik type="submit"ve type="image" ile kullanılır.

İki farklı işlem düğmeli, farklı işlemlere sahip bir HTML formu:

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="/action_page2.php"
  value="Submit as admin">
</form>

Çıktısı;

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

Formenctype Özniteliği

formenctype(Sadece yöntemiyle = “post” ile formlar için) gönderirken form verileri için nasıl kodlanması gerektiğini belirtir.

Bu formenctypeözellik, <form>öğenin enctype niteliğini geçersiz kılar .

formenctypeNitelik type="submit"ve type="image" ile birlikte kullanılır.

Varsayılan olarak kodlanmış (ilk gönder düğmesi) ve “multipart / form-data” (ikinci gönder düğmesi) olarak kodlanan form verilerini gönder:

<form action="/action_page_binary.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

Çıktısı;

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

Formmethod Özniteliği

formmethodÖzelliği, işlem URL’ye form veri göndermek için HTTP yöntemi tanımlar.

formmethodÖzelliği, <form>elemanı için yöntem özelliğini geçersiz kılar.

Bu formmethodözellik type="submit"ve type="image" ile kullanılabilir .

İkinci gönder düğmesi, formun HTTP yöntemini geçersiz kılar:

<form action="/action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

Çıktısı;

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

Formnovalidate Özniteliği

Bu formnovalidateözellik, <form>öğenin novalidate niteliğini geçersiz kılar .

Bu formnovalidateözellik type="submit" ile kullanılabilir .

İki gönderim düğmeli bir form (onaylı ve onaysız):

<form action="/action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

Çıktısı;

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

Formtarget Özniteliği

formtargetÖznitelik bir ad veya formu gönderdikten sonra alınan yanıtı görüntülemek için yeri belirten bir anahtar sözcük belirtir.

formtargetNitelik hedef niteliğini geçersiz kılar <form>elemanı için.

Bu formtargetözellik type="submit"ve type="image" ile kullanılabilir.

Farklı hedef pencerelere sahip iki gönder düğmeli form:

<form action="/action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

Çıktısı;

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

Yükseklik ve genişlik

heightVe widthözellikleri, bir <input type="image">elemanının yüksekliğini ve genişliğini belirlemek için kullanılır.

Her zaman görüntülerin boyutunu belirtin. Tarayıcı boyutu bilmiyorsa, resimler yüklenirken sayfa bozulabilir.

Bir görüntüyü yükseklik ve genişlik özelliklerine sahip bir gönder düğmesi olarak tanımlayın:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

Çıktısı;

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

Liste Özniteliği

listÖzelliğini kullanan inputlar datalist etiketiyle seçenekler oluşturur ve bizlerden bu seçenekler arasından birini seçmemizi ister.

Bir <datalist> öğesinde önceden tanımlanmış değerleri olan bir <input> öğesi:

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Çıktısı;

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

Min ve max özellikleri

minVe maxnitelikleri bir minimum ve maksimum değerleri belirtir <input>elemanı için.

minVe maxaşağıdaki giriş türleriyle işi bağlıyor: sayı, aralık, tarih, tarih saat yerel, ay, saat ve hafta.

<input> min ve max değerlerine sahip elemanlar:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

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

Çıktısı;

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

Çoklu özellik

multipleNiteliğini kullanan bir input elemanı kullanıcılara birden fazla değer girme olanağı sağlar.

multipleE-posta ve dosya: niteliği, aşağıdaki input türleriyle çalışır.

Birden çok değer kabul eden bir dosya yükleme alanı:

Select images: <input type="file" name="img" multiple>

Çıktısı;

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

Pattern Özniteliği

patternNiteliği, giriş öğesinin değerinin kontrol edileceği düzenli bir ifade belirtir.

Bu patternözellik aşağıdaki giriş türleriyle çalışır: metin, arama, url, tel, e-posta ve şifre.

Yalnızca üç harf içerebilen bir giriş alanı (sayı veya özel karakter yok):

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

Çıktısı;

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

Placeholder Özniteliği

placeholderÖzelliği, bir giriş alanı beklenen değerini (örnek değer ya da bir biçimde kısa bir açıklama) tanımlayan bir ipucu belirtir.

Kullanıcı bir değer girmeden önce ipucu giriş alanında görüntülenir.

Bu placeholderözellik aşağıdaki giriş türleriyle çalışır: metin, arama, url, tel, e-posta ve şifre.

Placeholder metnine sahip bir giriş alanı:

<input type="text" name="fname" placeholder="First name">

Çıktısı;

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

Gerekli öznitelik

requiredözniteliği bir inputun doldurulması gerektiğini boş bırakılamayacağını belirtir.

Bu requiredözellik aşağıdaki giriş türleriyle çalışır: metin, arama, url, tel, e-posta, şifre, tarih seçiciler, numara, onay kutusu, radio ve dosya.

Gerekli bir giriş alanı:

Username: <input type="text" name="username" required>

Çıktısı;

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

Adım Özniteliği

stepÖzniteliği input elemanı için kullanılacak giriş bilgilerinin aralıklarını belirtir.

Örnek: eğer step “3” ise, sayılar -3, 0, 3, 6 vs. olabilir.

İpucu: step niteliği, bir dizi yasal değer oluşturmak için max ve min özellikleriyle birlikte kullanılabilir.

Bu stepözellik aşağıdaki giriş türleriyle çalışır: sayı, aralık, tarih, yerel saat, yerel, ay, saat ve hafta.

Belirtilen yasal numara aralıklarına sahip bir giriş alanı:

<input type="number" name="points" step="3">

Çıktısı;

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

HTML Formu ve Giriş Öğeleri

EtiketAçıklama
<form> Kullanıcı girişi için bir HTML formu tanımlar
<input> Giriş kontrolünü tanımlar

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


Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt //