Önceki dersimizde <form> etiketimizden bahsettikten sonra şimdide <form> etiketlerimizin içine yazacağımız farklı farklı veri tiplerinden bahsedeceğiz. Nedir peki bu veri tipleri?
<input type="text"><input type="password"><input type="submit"><input type="button"><input type="reset"><input type="checkbox"><input type="radio"><input type="hidden"><input type="color"><input type="date"><input type="time"><input type="datetime-local"><input type="email"><input type="file"><input type="image"><input type="week"><input type="month"><input type="number"><input type="range"><input type="search"><input type="tel"><input type="url">Tek satırlık bir metin giriş alanı görüntüler.
<input type="text">
<input type="password">
type="button"
Normalde form içerisinde buton işlemlerini <button> etiketi ile görüyoruz ancak input'a button tipi vererekte kullanabiliriz.
<input type="button" value="Giriş yap">
type="submit"
Tıklandığında formu aksiyonların alınacağı sayfaya gönderen bir buton oluşturmak isterseniz bu tipi kullanabilirsiniz.
<input type="submit" value="Gönder">
Bu veri tipinin bir önemli özelliği var. Eğer form içinde gönder buton tipini submit olarak değil de button olarak kullanırsanız action="" değerinde yazan sayfaya gitmeyecektir. Bu yüzden formlarda genellikle submit tipini kullanın
type="reset"
Form etiketi içerisinde yapılan işlemleri sıfırlamak için bu veri tipi kullanılır.
<input type="reset" value="Sıfırla">
type="checkbox"
Birden fazla seçmeli işlemler için bu tip kullanılır. Örneğin kullanıcıdan hobilerini seçmesini isteyelim.
<label>
<input type="checkbox" name="hobi[]" value="Bisiklet"> Bisiklet
</label>
<label>
<input type="checkbox" name="hobi[]" value="Yürüyüş"> Yürüyüş
</label>
<label>
<input type="checkbox" name="hobi[]" value="Piyano"> Piyano
</label>
type="radio"
Bir değer arasında seçim yaptırmak için bu tip kullanılır. Örneğin kullanıcıdan cinsiyetini seçmesini isteyelim;
<label>
<input type="radio" name="cinsiyet" value="1"> Erkek
</label>
<label>
<input type="radio" name="cinsiyet" value="2"> Kadın
</label>
type="hidden"
Bazen kullanıcıya gözükmeyen ancak formu gönderdiğimizde gitmesini istediğimiz değerler olacak. Bu gibi durumlarda gözükmeyen ancak form içerisinde gönderildiğinde gitmesi için hidden tipini kullanacağız.
<input type="hidden" name="uye_no" value="25">
type="color"
Renk seçimi için çıkan aracı göstermek için bu tip kullanılır.
<input type="color" placeholder="Rengi seçin">
type="date"
Tarihi seçtirmek için bu tip kullanılır.
<input type="date" placeholder="Tarihi seçin">
type="time"
Saati seçtirmek için bu tip kullanılır.
<input type="time" placeholder="Saati seçin">
type="datetime-local"
Hem tarihi hem saati seçtirmek için kullanılır yani date ve time tiplerinin yaptığı işi yapar
<input type="datetime-local">
type="week"
Haftayı seçtirmek için bu tip kullanılır.
<input type="week" placeholder="Haftayı seçin">
type="month"
Ayı seçtirmek için bu tip kullanılır.
<input type="month" placeholder="Ayı seç">
type="email"
E-posta adresi girilmesini istediğiniz input'larda bu tipi kullanabilirsiniz. Bu input'a email harici bir veri girilirse uyarı verecektir.
<input type="email" placeholder="E-posta adresiniz..">
type="file"
Dosya seçtirmek için bu tip kullanılır. HTML bir sayfada herhangi bir resmi seçip ekrana yazdıramazsınız, bunun için PHP gibi yazılım dillerini öğrenirken daha anlamlı hale gelecektir.
<input type="file" name="resim">
type="image"
Resimli buton yapmak için kullanılır.
<input type="image" src="buton_resmi.png">
type="number"
Sayı değerlerini almak için bu tip kullanılır.
<input type="number" value="15">
type="range"
İki değer arasında bir değeri seçtirmek için bu tip kullanılır. Min. ve max. değerleri belirtilerek kullanılır.
<input type="range" min="0" max="10">
type="search"
Veri tipi text olandan tek farkı, bir şeyler yazıldığında silmek için sağ tarafta bir ikon çıkartıyor. Buda arama kutularında kullanılacak bir tip :)
<input type="search" placeholder="Yazılarda ara..">
type="tel"
Telefon numarası alınacak yerler için bu tip kullanılır. Mobilde bakarsanız klavyenin sadece sayılardan oluştuğunu görebilirsiniz.
<input type="tel" placeholder="Telefon numaranız">
type="url"
Web adresini almak için bu tip kullanılır. Telefonda klavyede bazı yardımcı karakterlerin gelmesini sağlar.
<input type="url" placeholder="Web adresiniz">
şuan bu görmüş olduğunuz veri tipleri kafanızı karıştırıyor olabilir ama back-end yani işin yazılım kısmına geçince daha iyi anlayacaksınız.
Bir formu göndermeden önce bir giriş alanını doldurulması gerektiğini belirtirken, required özelliğini kullanırız. Yani kullanıcı required öğesini yazdığımız veri tipini doldurmadan formu gönderemez.
<form>
<label for="kullaniciadi">Kullanıcı Adı:</label>
<input type="text" id="kullaniciadi" name="kullaniciadi" required>
</form>
Sorular (0)