Html input kullanımı(metin kutusu vb.),Select(açılır liste)

Html ile veri girilecek alanlar input etiketi ile oluşturulur.

input etiketinin ne tür bir alan olacağını belirlemek için type özelliğini kullanırız.

type özelliği örnek tanımlama :

<input type="text">

type özelliğinin alabileceği değerler :

• text -metin girişi
• password -girilen metini gizler
• submit -gönder butonu
• reset - reset butonu
• tel -telefon girişi
• radio -seçeneklerden birini seçmek için kullanılabilir anket vs.
• week - hafta girişi
• file  -dosya yüklemek için kullanılır
• email - e posta girişi
• hidden -gizli şekilde form tanımlamaları için kullanılır
• image -görsel ile button oluşturmak 
• month - ay
• number-numara
• range - aralık
• search -arama 
• button - buton
• time - zaman
• url -link işlemleri
• checkbox - sözleşme onaylama vb.

input tagının ne olacağını type ile belirleriz.

Daha iyi görülmesi için aşağıdaki type özellikleri örnekleri ile ilgili görselimizi inceleyebilirsiniz:

tabi ki input etiketi sadece type özelliği almakla sınırlı değil alabileceği bazı  özellikler:

name="kullaniciadi" -name ile belirtilen isim form gönderme gibi işlemlerde kullanılır.

checked -sayfa yüklenirken checkbox ve radio elemanlarını seçili olarak yükler.

maxlenght="10" -karakter uzunluğunu sınırlandırır.

value="gönder" -elamanın içerisinde olacak değer.

placeholder="aramak için..." -alana girilmesi gereken değerin ne olacağını belirtmek için kullanılır.

Input etiketleri ile siteye giriş yap formunun oluşturulması örneği:

<form>

Kullanıcı Adı:<input type="text" placeholder="kullanıcı adınız.." name="kadi"><br>

Şifre:<input type="password" placeholder="şifreniz.." name="sifre"><br>

<input type="submit" value="giriş yap">

</form>

Kullanıcı Adı:
Şifre:

Gönder butonuna tıkladığınızda sitenin adresinde inputların namelerinin değeri nasıl taşıdığını görebilirsiniz.

Açılır liste oluşturmak(select):

Select etiketi ile açılır menü oluşturmak için:
<select>
<option value="elma">elma</option>
<option value="armut">armut</option>
</select>

Açılır menüde;
Value ile değer belirtilir.(kayıt işlemleri vs. için)
Size ile seçenek sayısı tanımlanır. - size=2
Required seçenek seçilmesinin zorunlu olduğunu belirtir.
Multiple birden çok seçenek seçilebileceğini  belirtir.
AutoFocus sayfa yüklendiğinde select alanına odaklanır.
Disabled alanı devre dışı bırakır.