HTML Ve HTML5 Input Attributes - WebCebir

HTML ve HTML5 Input Attributes

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 Attributes özniteliğinin değerine bağlı olarak farklı bir biçim alır.

Value Attribute(özniteliği)

İnput value özelliği, bir giriş alanı için bir başlangıç ​​değerini belirtir.

<form> Adı:<br> <input type="text" id="adi" name="adi" value="Ahmet"><br> Meslek:<b> <input type="text" id="meslek" name="meslek" value="İşçi"> </form>

ÇIKTI:

Adı: Meslek:

readonly Attribute (özniteliği)

İnput readonly özelliği, bir giriş alanının salt okunur olduğunu belirtir.

Salt okunur bir giriş alanı değiştirilemez (ancak, bir kullanıcı sekmesine geçebilir, vurgulayabilir ve içindeki metni kopyalayabilir).

Bir salt okunur giriş alanının değeri, formu gönderirken gönderilecektir!

<form> Sadece okunur:<br> <input type="text" id="adi" name="adi" value="Mehmet" readonly><br> Meslek:<br> <input type="text" id="meslek" name="meslek" value="Öğrenci"> </form>

ÇIKTI:

Sadece okunur: Meslek:

Yukarıdaki sadece okunur yeri değiştiremezsiniz.

disabled Attribute

İnput disabled özelliği, bir giriş alanının devre dışı bırakılması gerektiğini belirtir.

Devre dışı bırakılan bir giriş alanı kullanılamaz ve tıklanamaz.

Devre dışı bırakılmış bir giriş alanının değeri, formu gönderirken gönderilmeyecektir!

<form> Adı:<br> <input type="text" id="adi" name="adi" value="Hasan" disabled><br> Meslek:<br> <input type="text" id="meslek" name="meslek" value="Doktor"> </form>

ÇIKTI:

Adı: Meslek:

size Attribute

İnput size özelliği, bir giriş alanının karakter cinsinden görünür genişliğini belirtir.

varsayılan değer size="20"'dir.

Not: size özelliği Şu giriş (input) türleriyle çalışır: Metin, ara, tel, url, e-posta ve şifre.

<form> Adi:<br> <input type="text" id="adi" name="adi" size="50"><br> Pin:<br> <input type="text" id="pin" name="pin" size="4"> </form>

ÇIKTI:

Adi: Pin:

maxlength Attribute

İnput maxlength özelliği, bir giriş alanında izin verilen maksimum karakter sayısını belirtir.

Not: Bir maxlength ayarlandığında, giriş(input) alanı belirtilen sayıda karakterden fazlasını kabul etmeyecektir. Ancak bu özellik herhangi bir geri bildirim sağlamaz. Yani kullanıcıyı uyarmak istiyorsanız JavaScript kodu yazmalısınız. <form> Adı:<br> <input type="text" id="fname" name="fname" size="15"><br> Pin:<br> <input type="text" id="pin" name="pin" maxlength="4" size="10"> </form>

ÇIKTI:

Adı: Pin:

Yukarıda Pin alanı 10 karekter olmasına rağmen 4 karekter kabul eder.

min and max Attributes

Giriş min ve max özellikler, bir giriş alanı için minimum ve maksimum değerleri belirtir.

min Ve max Şu tip giriş türleriyle çalışır: sayı, aralık, tarih, tarih saat yerel, ay, saat ve hafta.

İpucu: Bir dizi yasal değer oluşturmak için maksimum ve minimum nitelikleri birlikte kullanın.

<form> 1980-01-01'den önce bir tarih girin: <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br> 2000-01-01'den sonra bir tarih girin: <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br> Sayı (1 ile 5 arasında):<br> <input type="number" id="sayi" name="sayi" min="1" max="5"> </form>

ÇIKTI:

1980-01-01'den önce bir tarih girin:: 2000-01-01'den sonra bir tarih girin: Sayı (1 ile 5 arasında):

multiple Attribute

İnput multiple özelliği, kullanıcının bir giriş alanına birden fazla değer girmesine izin verildiğini belirtir.

multiple E-posta ve dosya: niteliği, input türleriyle çalışır.

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

<form> Dosya seç:<br> <input type="file" id="files" name="files" multiple> </form>

ÇIKTI:

Dosya seç:

Birden fazla dosya seçmek için, seçim sırasında CTRL veya SHIFT tuşunu basılı tutun.

pattern Attribute

İnput pattern özelliği, form gönderildiğinde giriş alanı değerinin kontrol edildiği normal bir ifadeyi belirtir.

pattern Metin, tarih, arama, url, tel, e-posta ve şifre: input türleriyle çalışır.

ipucu: Kullanıcıya yardımcı olacak kalıbı açıklamak için genel başlık özniteliğini kullanın.

Yalnızca iki harf içerebilen bir giriş alanı (yanlızca sayı girin):

<form action="#"> İl Plaka:<br> <input type="text" id="il_code" name="il_code" pattern="[0-9]{2}" title="İl Plaka girin"> </form>

ÇIKTI:

İl Plaka:

placeholder Attribute

İnput placeholder özelliği, bir giriş alanının beklenen değerini (örnek bir değer veya beklenen formatın kısa bir açıklaması) açıklayan kısa bir ipucu belirtir.

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

placeholder Metin, arama, url, tel, e-posta ve şifre: niteliği, aşağıdaki input türleriyle çalışır.

<form> Tel Numara:<br> <input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}"> </form>

ÇIKTI:

Tel Numara:

required Attribute

İnput required özelliği, formu göndermeden önce bir giriş alanının doldurulması gerektiğini belirtir.

required Metin, arama, url, tel, e-posta, şifre, tarih seçiciler, sayı, onay kutusu, radyo ve dosya niteliği, input türleriyle çalışır.

<form action="#"> Adı:<br> <input type="text" id="adi" name="adi" required> <button>Gönder</button> </form>

ÇIKTI:

Adı: Gönder

Yukarıda ki örnekte Gönder butona basılınca bir isim girmediğiseniz size uyarı verecek.

step Attribute

İnput step özelliği, bir giriş alanı için girilecek sayı aralıklarını belirtir.

Örnek: adım = "3" ise, girilecek sayılar -3, 0, 3, 6 vb. Olabilir.

İpucu: Bu özellik, bir dizi girilecek değerleri oluşturmak için maksimum ve minimum özelliklerle birlikte kullanılabilir.

step şu giriş türleriyle sayı, aralık, tarih, tarih saat yerel, ay, saat ve hafta ile çalışır.

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

<form> Puan</label> <input type="number" id="puan" name="puan" step="3"> </form> Not: Giriş kısıtlamaları kusursuz değildir ve JavaScript, birçok yol sağlar. Girişi güvenli bir şekilde kısıtlamak için, aynı zamanda alıcı (sunucu) tarafından da kontrol edilmelidir!

autofocus Attribute

İnput autofocus özelliği, sayfa yüklendiğinde bir giriş alanının otomatik olarak odaklanması gerektiğini belirtir.

<form> Adı:<br> <input type="text" id="adi" name="adi" autofocus><br> Meslek:<br> <input type="text" id="Meslek" name="meslek"> </form>

ÇIKTI:

Adı: Meslek:

Sayfa yüklendiğinde "Ad" giriş alanının otomatik olarak odaklanmasına izin verir:

height and width Attributes

Girdi(input) height ve width nitelikleri, bir <input type="image"> elemanın yüksekliğini ve genişliğini belirtir.

<form> Adı:<br> <input type="text" id="adi" name="adi"><br><br> Meslek:<br> <input type="text" id="meslek" name="meslek"><br><br> <input type="image" src="submit.gif" alt="Submit" width="48" height="48"> </form>

ÇIKTI:

Adı: Meslek:

list Attribute

İnput list özelliği <datalist>, bir <input> öğesi için önceden tanımlanmış seçenekleri içeren bir öğeyi ifade eder.

Bir <datalist> içinde önceden tanımlanmış değerlere sahip bir <input> öğesi:

<form> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari">

ÇIKTI:

autocomplete Attribute

İnput autocomplete özelliği, bir formun veya bir giriş alanının otomatik tamamlamanın açık veya kapalı olması gerektiğini belirtir.

Otomatik tamamlama, tarayıcının değeri tahmin etmesini sağlar. Bir kullanıcı bir alana yazmaya başladığında, tarayıcı, daha önce yazılan değerlere göre alanı doldurmak için seçenekler görüntülemelidir.

autocomplete İle nitelik eserler <form> ve şu <input> türleri: metin, arama, url, tel, e-posta, şifre, datepickers, aralık ve renk.

Bir giriş alanı için otomatik tamamlama açık ve kapalı olan bir HTML formu:

<form action="/action_page.php" autocomplete="on"> Adı:<br> <input type="text" id="adi" name="adi"><br><br> Meslek:<br> <input type="text" id="Meslek" name="meslek"><br><br> Email:<br> <input type="email" id="email" name="email" autocomplete="off"><br><br> <input type="submit" value="Gönder"> </form> Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlanacaktır. Lütfen Yukarıda ki mesajları okuyun tekrar aynı soruları sormayın.

8017

Gönder