Html5 Yeni İnput Tipleri

Html5 Yeni İnput Tipleri

color-->
date-->
datetime-->
email-->
number-->
month-->
search-->
range-->
tel-->
time-->
url-->
week-->

---

Readonly İnput Özelliği

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Şehir: <input type="text" name="country" value="Sadece Okunabilir" readonly><br>
  <input type="submit" value="Gönder">
</form>

Sonuç:

Email:
Şehir:

---

Disabled İnput Özelliği
<form action="/action_page.php">
  Ad: <input type="text" name="fname"><br>
  Soyad: <input type="text" name="lname" disabled><br>
  <input type="submit" value="Gönder">
</form>

---

Size İnput Özelliği
 <input type="text" name="fname" size="40">

---

 Maxslenght İnput Özelliği
<form >
  Username: <input type="text" name="usrname" maxlength="3"><br>
  <input type="submit" value="Submit">
</form>
Sonuç:

Username:

---

Autofocus  İnput Özelliği
inputa otomatik odaklanır.

<form >
  Ad: <input type="text" name="fname" ><br>
  Soyad: <input type="text" name="lname" autofocus><br>
  <input type="submit">
</form>

Ad:
Soyad:

---

autocomplete İnput Özelliği
on ve off değeri var. Tıklanıldığında önceki girilen değerleri getirir. Hatırlatma gibi...
<form 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>

Sonuç:

First name:
Last name:
E-mail:

---

formtarget İnput Özelliği

_blank
_self
_parent
_top
framename

---

file İnput Özelliği
<h1>Doysa özelliği</h1>

<h3>Tek dosya seçimi </h3>
<form >
  Select a file: <input type="file" name="myFile"><br><br>
  <input type="submit">
</form>

<h3>Çoklu Seçim</h3>
<form action="/action_page.php">
  Select files: <input type="file" name="myFile" multiple><br><br>
  <input type="submit">
</form>
Sonuç:

Tek dosya seçimi

Select a file:

Çoklu Seçim

Select files:

---

pattern İnput Özelliği
<form>
  Ülke Kodu: <input type="text" name="country_code" pattern="[A-Za-z]{2}" title="2 hatfli ülke kodu girin">
  <input type="submit">
</form>
Sonuç:

Ülke Kodu:

---

placeholder İnput Özelliği
<form >
  <input type="text" name="fname" placeholder="Ad"><br>
  <input type="text" name="lname" placeholder="Soyad"><br>
  <input type="submit" value="Submit">
</form>
Sonuç: