Ders_36 HTML Input Elemanının Özellikleri 2 (Attribute)

HTML5 ile Gelen Input Özellikleri (Attribute)

Aşağıda verilen özellikler HTML5 ile birlikte gelen <input> elemanı özellikleridir:

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

Şu iki özellik de <form> elemanı için gelmiştir:

autocomplete
novalidate

autocomplate Özelliği

autocomplete özelliği, bir bir input elmanına, daha önce girilen değerleri hatırlatır. Form alanı, daha önce girilen bilgileri otomatik olarak tamamlar. Bu özellik on veya off değerlerini alır.

Örneğe dikkat edelim:

<form action="formungittigi.php" autocomplete="on">
Ad:<input type="text" name="ad"><br>
Soyad: <input type="text" name="sad"><br>
E-mail: <input type="email" name="mail" autocomplete="off"><br>
<input type="submit">
</form>

Bu form, sayfamızda şöyle gürünecektir:

Formu doldurup, gönder tuşuna basıp, sayfayı tazelerseniz, girdiğiniz bilgilerin form tarafından hatırlandığını (E-mail hariç) göreceksiniz.

autocomplete özelliği <input> elemanının şu tiplerinde kullanılabilir: text, search, url, tel, email, password, datepickers, range, ve color.

Bazı tarayıcılarda, bu özelliği kullanmak için otomatik tamamlama fonksiyonunu aktive etmeniz gerekebilir.

novalidate Özelliği

novalidate özelliği, bir forma girilen bilgilerin geçerli bilgiler olup olmadığını denetlemeden gönderilmesini sağlar. Bu özellik <form> tagının içinde kullanılır.

Örneğe dikkat edelim:

<form action="formungittigi.php" novalidate>
E-mail: <input type="email" name="kullanicimail"><br>
<input type="submit">
</form>

Bu form, sayfamızda şöyle gürünecektir:

Bir e-mail inputu <input type="email">, normalde @ işareti içermeyen değerleri kabul etmez. Fakat novalidate dediğimiz için, bu kontrolu artık yapmayacaktır.

<form> tagına, novalidate özelliği eklemek, IE9 ve daha öncesindeki versiyonlarında ve safaride desteklenmez.

autofocus Özelliği

autofocus özelliği, bir boolean özelliğidir.

autofocus özelliği atadığımız <input> elemanı, sayfa açıldığında, yanıp sönen fare imlecini üzerine çeker. Yani bu <input> kutucuğu, fare imleci kendisine fokuslanmış ve yazmaya hazır halde açılır. Yani sayfa açılınca, klavyede bir tuşa basarsanız bu imlece yazmış olursunuz.

Örneğe dikkat edelim:

<form action="formungittigi.php">
Ad:<input type="text" name="ad" autofocus><br>
Soyad: <input type="text" name="sad"><br>
E-mail: <input type="email" name="mail"><br>
<input type="submit">
</form>

Bu form, sayfamızda şöyle gürünecektir:

autofocus özelliği, IE9 ve daha öncesindeki versiyonlarında desteklenmez.

form Özelliği

form özelliği, bir <form> elemanının dışında bir yerde kodladığımız bir <input> elemanını, <form> elemanına dahil eder.

Örneğe dikkat edelim:

<form action="formungittigi.php" id="form1">
Ad:<input type="text" name="ad"><br>
<input type="submit">
</form>
<p>Soyad alanını, form elemanının dışında tanıttık, fakat yine de bu formun bir elemanı gibi davranacaktır.</p>
Soyad: <input type="text" name="sad" form="form1">

Bu form, sayfamızda şöyle gürünecektir:

Soyad alanını, form elemanının dışında tanıttık, fakat yine de bu formun bir elemanı gibi davranacaktır.

Soyad:

formaciton Özelliği

formaction özelliği, farklı kullanıcılarımız için, farklı bir url adresine farklı bir gönder tuşu oluşturmamızı sağlar.

formaction özelliği, submit ve image tipi <unput> elemanlarında kullanılır.

Örneğe dikkat edelim:

<form action="formungittigi.php">
Ad:<input type="text" name="ad"><br>
Soyad: <input type="text" name="sad"><br>
<input type="submit" value="Giriş" >
<input type="submit" formaction="admin.php" value="Adminler için Giriş">
</form>

Bu form, sayfamızda şöyle gürünecektir:

formenctype Özelliği

formenctype özelliği, bir formun gönder tuşuna basıldığında, formda bulunan verilerin hangi dil koduyla (encoding) gönderileceğini belirler. (bu özellik, method="POST" özelliği bulunan formlarda kullanılır.)

formenctype özelliği, submit ve image tipi <unput> elemanlarında kullanılır.

Örneğe dikkat edelim:

Ad:<input type="text" name="ad"><br>

Soyad: <input type="text" name="sad"><br>

</form>

Bu form, sayfamızda şöyle gürünecektir:

formmethod Özelliği

formmethod özelliği, farklı bir HTTP metodu ile bir gönder tuşu oluşturmamız sağlar.

formmethod özelliği, submit ve image tipi <unput> elemanlarında kullanılır.

Örneğe dikkat edelim:

Ad:<input type="text" name="ad"><br>

Soyad: <input type="text" name="sad"><br>

</form>

Bu form, sayfamızda şöyle gürünecektir:

formnovalidate Özelliği

formnovalidate özelliği, bir <input> elemanına girilen verinin, geçerliliğine bakılmaksızın gönderilmesini sağlar.

formnovalidate özelliğinin, <form> elemanına atanan novalidate özelliğine göre önceliği vardır.

formnovalidate özelliği, submit tipi <unput> elemanında kullanılır.

Örneğe dikkat edelim:

<form action="formungittigi.php" novalidate>
E-mail: <input type="email" name="kullanicimail"><br>
<input type="submit">
<input type="submit" formnovalidate value="Geçerliliğe bakmadan Gönder">
</form>

Bu form, sayfamızda şöyle gürünecektir:

formnovalidate özelliği, IE9 ve daha öncesindeki versiyonlarında ve safaride desteklenmez.

formtarget Özelliği

formtarget özelliği, aldığı değer göre, gönder tuşuna basıldığında kullanıcının yönlendirildiği sayfanın nerede açılacağını belirler.

formtarget özelliğinin, <form> elemanında atanan target özelliğine göre önceliği vardır.

formtarget özelliği, submit ve image tipi <unput> elemanlarında kullanılır.

Örneğe dikkat edelim:

Ad:<input type="text" name="ad"><br>

Soyad: <input type="text" name="sad"><br>

</form>

Bu form, sayfamızda şöyle gürünecektir:

formtarget özelliği, IE9 ve daha öncesindeki versiyonlarında desteklenmez.

height (yükseklik) ve width (en) Özellikleri

Gönder tuşu her zaman bir metin ifadesi içermek zorunda değildir.

İstersek, bir resmi (image) de gönder tuşu yerine kullanabiliriz.

height ve width özellikleri, gönder tuşu yerine kullanacağımız resmin <input type="image">, büyüklüğünü ayarlamamızı sağlar.

Örneğe dikkat edelim:

Ad:<input type="text" name="ad"><br>

Soyad: <input type="text" name="sad"><br>

</form>

Bu form, sayfamızda şöyle gürünecektir:

list Özelliği

list özelliği, <input> elemanına ön tanımlı bir liste <datalist> hazırlar. Kullanıcı arzu ederse, bu hazır listeden seçim yapar.

Örneğe dikkat edelim:

</form>

Bu form, sayfamızda şöyle gürünecektir:

list özelliği, IE9 ve daha öncesindeki versiyonlarında ve safaride desteklenmez.

min ve max Özellikleri

min ve max özellikleri, <input> elemanı için, en düşük ve en yüksek değerleri belirlemek için kullanılır.

Bu iki özellik şu tip input elemanlarında kullanılabilir: number, range, date, datetime, datetime-local, month, time ve week.

Örneğe dikkat edelim:

1980-01-01 tarihinden öncesine ait bir tarih girin
<input type="date" name="dgunu" max="1979-12-31">
2000-01-01 tarihinden sonrasına ait bir tarih girin
<input type="date" name="dgunu" min="2000-01-02">
Sayı girin (1 ve 5 arasında):
<input type="number" name="sayi" min="1" max="5">
<input type="submit">

</form>

Bu form, sayfamızda şöyle gürünecektir:

min ve max özellikleri, IE9 ve daha öncesindeki versiyonlarında ve firefoxta desteklenmez.

multiple Özelliği

multiple özelliği, bir <input> özelliğine birden fazla değer girebilmemizi sağlar.

Bu özellik, email ve file tipi inputlarda kullanılabilir.

Örneğe dikkat edelim:

Lütfen bir resim seçin: <input type="file" name="resim" multiple><input type="submit">

</form>

Bu form, sayfamızda şöyle gürünecektir:

Yukarıdaki dosya seçicisine tıklandığında, birden fazla resmi seçip, aynı anda göndermek mümkün olacaktır.

multiple özelliği, IE9 ve daha öncesindeki versiyonlarında desteklenmez.

pattern Özelliği

pattern özelliği, bir kalıp/şablon oluşturmamızı; kullanıcımızın da <input> kutucuğunu bu kalıba göre doldurmasını sağlar.

pattern özelliği, şu tipteki <input> elemanlarında kullanılır: text, search, url, tel, email, ve password.

Oluşturcağımız şablon (düzenli ifade), javascript kuralları ile oluşturulur. Bu yüzden şu anda pattern özelliğine vediğimiz değerin karışık gelmesi normaldir.

Örneğe dikkat edelim:

Ülke Kodu: <input type="text" name="ulke_kodu" pattern="[A-Za-z]{3}" title="Üç harfli bir ülke kodu giriniz!"><br>
<input type="submit">

</form>

Bu form, sayfamızda şöyle gürünecektir:

Yukarıdaki <input> elemanında bulunan pattern="[A-Za-z]{3}" özelliği, büyük ya da küçü harflerden oluşan, 3 karakterlik bir kalıp oluşuturur. Eğer kullanıcı bu kalıbın dışında bir veri girip gönder tuşuna basarsa; title="Üç harfli bir ülke kodu giriniz!" özelliği, kullanıcıyı uyaracak bir baloncuk oluşturacaktır.

pattern özelliği, IE9 ve daha öncesindeki versiyonlarında ve safaride desteklenmez.

required Özelliği

required özelliği, doldurulmadan geçilemeyecek <input> elemanları oluşturmamızı sağlar.

required özelliği, şu tipteki <input> elemanlarında kullanılır: text, search, url, tel, email, password, date pickers, number, checkbox, radio, ve file.

Örneğe dikkat edelim:

Kullanıcı adı: <input type="text" name="kadi" required> <input type="submit">

</form>

Bu form, sayfamızda şöyle gürünecektir:

reqired özelliği, IE9 ve daha öncesindeki versiyonlarında ve safaride desteklenmez.

step Özelliği

step özelliği, <input> elemanına girilecek sayının, kaçın katları olacağını belirler.

Örneğin step="3" dediğimizde, <input> kutucuğuna -3, 0, 3, 6, 9 gibi sayılar girebiliriz.

step özelliği, şu tipteki <input> elemanlarında kullanılır: number, range, date, datetime, datetime-local, month, time ve week.

Örneğe dikkat edelim:

Bir sayı giriniz: <input type="number" name="sayi" step="3"> <input type="submit">

</form>

Bu form, sayfamızda şöyle gürünecektir:

step özelliği, IE9 ve daha öncesindeki versiyonlarında ve firefoxda desteklenmez.

sonraki ders için tıklayınız

DERSİMİZ KOD - HTML