HTML5 input Özellikleri

Web sayfalarında veri girişi için kullanılan ve HTML5 ile birlikte yeni gelen input özelliklerinin hangi input tipi ile kullanılacağı ile ilgili bilgiler yer alıyor.

HTML input value

<input /> etiketi value özelliği etiketin varsayılan değerini belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" value="Yusuf" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" value="SEZER" />
  <input type="submit" value="Gönder" />
</form>

HTML input readonly

<input /> etiketi readonly özelliği girişin sadece okunur olduğunu belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" value="Yusuf" readonly="readonly" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" value="SEZER" />
  <input type="submit" value="Gönder" />
</form>

HTML input disabled

<input /> etiketi disabled özelliği girişin devre-dışı olduğunu belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" value="Yusuf" readonly="readonly" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" value="SEZER" disabled="disabled" />
  <input type="submit" value="Gönder" />
</form>

Form gönderildiğinde devre dışı bırakılan veri girişi alanına ait değer gönderilmez.

HTML input size

<input /> etiketi size özelliği giriş alanında gösterilecek karakter sayısını belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" value="Yusuf" size="30" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" value="SEZER" />
  <input type="submit" value="Gönder" />
</form>

HTML input maxlength

<input /> etiketi maxlength özelliği giriş alanına girilebilecek karakter sayısını belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" value="Yusuf" size="30" maxlength="10" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" value="SEZER" />
  <input type="submit" value="Gönder" />
</form>

HTML5 ile gelen yeni input özellikleri

HTML5 ile <input /> etiketine eklenen yeni özelikler

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height ve width
• list
• min ve max
• multiple
• pattern
• placeholder
• required
• step

HTML5 ile <form> etiketine eklenen yeni özelikler

• autocomplete
• novalidate

HTML5 autocomplete

HTML5 ile gelen autocomplete özelliği değeri on ise daha önceden girilmiş olan değerler veri girişinde listelenecek off ise daha önce girilen değerler veri girişinde listelenmeyecektir.

<form autocomplete="on">
  Adı:<br />
  <input type="text" name="adi" autocomplete="on" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" autocomplete="off" />
  <input type="submit" value="Gönder" />
</form>

NOT: Otomatik tamamlama özelliğinin çalışması için tarayıcı otomatik tamamlama işlevinin aktif olması gerekir.

HTML5 form novalidate

Özellik kullanıldığında girilen veri doğrulanmaz.

Aşağıdaki örnekte e-posta adresinin kontrolü yapılmadan form gönderilecektir.

<form novalidate="novalidate">
  E-Posta: <input type="email" name="eposta" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input autofocus

<input /> etiketi autofocus özelliği sayfa yüklendikten sonra veri giriş yapılacak alanı belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" autofocus="autofocus" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input form

<input /> etiketi form özelliği veri giriş alanının sayfa içindeki hangi forma ait olduğunu belirtir.

<form id="form1">
  Adı:<br />
  <input type="text" name="adi" />
  <input type="submit" value="Gönder" />
</form><br />
  Soyadı:<br />
  <input type="text" name="soyadi" form="form1" />

HTML5 input formaction

<input /> etiketi formaction özelliği form verilerinin hangi adrese gönderileceğini belirtir.

Özellik kullanıldığında <form> etiketinin action özelliği devre dışı kalır.

formaction özelliği submit ve image input tiplerinde kullanılır.

<form action="kayit.php">
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" />
  <input type="submit" value="Giriş Yap" formaction="giris.php" />
  <input type="submit" value="Kayıt Ol" />
</form>

HTML5 input formenctype

<input /> etiketi formenctype özelliği form verilerinin hangi şifreleme yöntemi ile gönderileceğini belirtir. (Sadece method=”post” ile çalışır)

Özellik kullanıldığında <form> etiketinin enctype özelliği devre dışı kalır.

formenctype özelliği submit ve image input tiplerinde kullanılır.

<form method="post">
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" />
  <input type="submit" value="Gönder" />
  <input type="submit" value="Giriş Yap" formenctype="multipart/form-data" />
</form>

HTML5 input formmethod

<input /> etiketi formmethod özelliği form verilerinin hangi yöntem ile gönderileceğini belirtir.

Özellik kullanıldığında <form> etiketinin method özelliği devre dışı kalır.

formmethod özelliği submit ve image input tiplerinde kullanılır.

<form method="post">
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" />
  <input type="submit" value="Gönder" />
  <input type="submit" value="Giriş Yap" formmethod="get" />
</form>

HTML5 input formnovalidate

<input /> etiketi formnovalidate özelliği form verilerinin kontrol yapılmadan gönderileceğini belirtir.

Özellik kullanıldığında <form> etiketinin novalidate özelliği devre dışı kalır.

formnovalidate özelliği submit ve image input tiplerinde kullanılır.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" /><br />
  E-posta:<br />
  <input type="email" name="eposta" />
  <input type="submit" value="Gönder" />
  <input type="submit" value="Doğrulamadan Gönder"
  formnovalidate="formnovalidate" />
</form>

HTML5 input formtarget

<input /> etiketi formtarget özelliği form verilerinin hangi pencerede gönderileceğini belirtir.

Özellik kullanıldığında <form> etiketinin target özelliği devre dışı kalır.

formtarget özelliği submit ve image input tiplerinde kullanılır.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" />
  <input type="submit" value="Gönder" />
  <input type="submit" value="Yeni pencerede gönder" formtarget="_blank" />
</form>

HTML input height ve width

height ve width özelliği <input type=”image” /> input tipinin yükseklik ve genişlik değerini piksel olarak belirtir.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" />
  <input type="submit" value="Gönder" />
  <input type="image" src="gonder.png" alt="Gönder" height="30" width="30" />
</form>

HTML5 input list

<input /> etiketi list özelliği veri giriş alanını <datalist> etiketine bağlar.

list özelliği text, search, url, tel, email, datetime, date, month, week, time, datetime-local, number, range ve color input tiplerinde kullanılır.

<form>
    Sevdiğiniz meyve:
    <input list="meyveler" name="meyve" />
    <input type="submit" value="Gönder"/>
    <datalist id="meyveler">
      <option value="Elma">
      <option value="Armut">
      <option value="Portakal">
      <option value="Karpuz">
    </datalist>
</form>

HTML5 input min ve max

<input /> etiketi min ve max özelliği veri giriş alanın alabileceği en az ve an fazla değeri belirtir.

min ve max özelliği datetime, date, month, week, time, datetime-local, number ve range input tiplerinde kullanılır.

<form>
  Yaşınız (18 ve 65 arasında):
  <input type="number" name="yas" min="18" max="65" /><br /><br />
   Doğum Tarihi:
  <input type="date" name="dogumtarihi" min="1950-01-01" max="2000-01-01" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input multiple

<input /> etiketi multiple özelliği file ve email input tiplerinde birden fazla değer girişine izin verildiğini belirtir.

multiple özelliği file ve email input tiplerinde kullanılır.

email input tipindeki veri giriş alanına virgül ekleyerek birden fazla e-posta adresi yazabilirsiniz.

<form>
  E-posta Adresleriniz:
  <input type="email" name="epostalar" multiple="multiple" /><br /><br />
   Resimleriniz:
  <input type="file" name="resimler" multiple="multiple" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input pattern

<input /> etiketi pattern özelliği girişin düzenli ifadeye göre olacağını belirtir.

pattern özelliği text, search, url, tel, email ve password input tiplerinde kullanılır.

Örnekte T.C Kimlik No veri giriş alanına 11 haneli ve sadece sayı girişini kabul eden düzenli ifade yazılmıştır.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" /><br />
  T.C Kimlik No:<br />
  <input type="text" name="kimlikno" pattern="[0-9]{11}" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input placeholder

<input /> etiketi placeholder özelliği girilecek veri hakkında kısa bir açıklama yapmayı sağlar.

Veri giriş alanına açıklama soluk olarak yazılır ve veri girişi yapılmaya başlayınca açıklama silinir.

placeholder özelliği text, search, url, tel, email, password ve number input tiplerinde kullanılır.

<form>
  Adı:<br />
  <input type="text" name="adi" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" /><br />
  T.C Kimlik No:<br />
  <input type="text" name="kimlikno" pattern="[0-9]{11}" 
  placeholder="11 haneli T.C No Giriniz" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input required

<input /> etiketi required özelliği veri giriş alanının kesin doldurulması gerektiğini belirtir.

required özelliği text, search, url, tel, email, password, datetime, date, month, week, time, datetime-local, number, checkbox, radio ve file input tiplerinde kullanılır.

<form>
  Adı:<br />
  <input type="text" name="adi" required="required" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" required="required" /><br />
  Yaşınız:<br />
  <input type="number" name="yas" />
  <input type="submit" value="Gönder" />
</form>

HTML5 input step

<input /> etiketi step özelliği girilecek veri aralığını belirtir.

Örneğin: step=”3″ ise …, -6, -3, 0, 3, 6, … olabilir.

step özelliği datetime, date, month, week, time, datetime-local, number ve range input tiplerinde kullanılır.

<form>
  Adı:<br />
  <input type="text" name="adi" required="required" /><br />
  Soyadı:<br />
  <input type="text" name="soyadi" required="required" /><br />
  Yaşınız:<br />
  <input type="number" name="yas" />
  <input type="submit" value="Gönder" />
</form>

HTML5 Derslerine buradan ulaşabilirsiniz…

Hayırlı günler dilerim.