Form oluştururken iki ana etiket kullanacağız: <form> ve <input>. Formumuzu <form> etiketiyle oluşturun. input, girdi anlamına gelir ve kullanıcıdan aldığımız verileri sunucuya göndermek için kullanılır. Etiket, bizim dilimizde bir etiket anlamına gelir ve bu öğeye formdaki başlıklar yazabiliriz.
Yazı eklemek için kullandığımız input kodu | type=”text”
Bu etiketimiz de formda olan herhangi bir yazının girişi için kullanıyoruz. Örneğin;
- <input type=”text” value=”Yaşınıız giriniz”>
- <input type=”text” value=”Adınızı Girin”>
Ekran Çıktısı
Şifremizi girdiğimizde **** çıkması için kullandığımız input Kodu | type=”password”
Bu etiketimiz de bu girmiş olduğumuz alan da ne yazarsak görünmez ve ****** olur. Bunu genelde şifreler için kullanılırız. Örneğin;
- <input type=”password” value=”Lütfen Şifrenizi Giriniz”>
- <input type=”password” value=”Eski şifrenizi giriniz”>
Ekran Çıktısı
Bir dosya, resim gibi ogeleri almak için kullandığımız input kodu | type=”file”
Bu etiketimiz de formumuzdan kişisel resim, kendisi hakkında bir cv veya pdf dosyası gibi dosyalar alabiliriz.
Örneğin;
- <input type=”file” value=”Lütfen resim seçin”>
- <input type=”file” value=”Lütfen cv seçiniz”>
- <input type=”file” value=”Lütfen pdf dosyası yükleyiniz”>
Ekran Çıktısı
Uzun Açıklama gereken inputlarda kullandığımız kod | textarea
Bu etiketimiz de kullanıcıdan istediğimiz adres, açıklama, yorum satırı gibi ögelerde kullanılır.Örneğin;
- <textarea rows=”10″ cols=”10″ placeholder=”Adresinizi yazınız”></textarea>
- <textarea rows=”10″ cols=”10″ placeholder=”Kendinizi tanıtınız”></textarea>
- <textarea rows=”10″ cols=”10″ placeholder=”Yorumunuzu yazabilirsiniz”></textarea>
Ekran Çıktısı
Onaylama butonu için kullandığımız input kodu | type=”submit”
Bu etiketimiz de formumuz dolduğunda onaylamak için kullanılır. Tabii ki siz yine farklı yerlerde kullabilirsiniz.
Örneğin;
- <input type=”submit” value=”Verilerinizi Kaydedin”>
- <input type=”submit” value=”Favorilere Ekleyin”>
- <input type=”submit” value=”Formu Gönderin”>
Ekran Çıktısı
Tarih seçmek için kullandığımız input kodu | type=”date”
Bu etiketimiz tarih belirlemek için kullanılır. Genelde, doğum tarihi, iş tarihi, askerlik tarihi olarak kullanırız.
Örneğin;
- <input type=”date” value=”Doğum tarihinizi seçiniz”>
- <input type=”date” value=”Başvuru tarihiniz”>
Ekran Çıktısı
Herhangi bir seçeneği seçmek için kullandığımız input kodu | type=”radio”
Bu etiketimiz genelde iki seçenek arasında kullanılır. Orneğin cinsiyetiniz kız mı ? erkek mi? gibi.
Örneğin;
- <input type=”radio” value=”Kız”>
- <input type=”radio” value=”Erkek”>
Ekran Çıktısı
Kız
Erkek
Birden fazla seçenek seçmek için kullandığımız input k
odu | type=”checkbox”
Bu etiketimiz de birden fazla özellik seçebiliriz. Formlarda hobileriniz veya fobileriniz gibi seçenekler sunulur ve birden fazla seçebilirsiniz. Örneğin;
- <input type=”checkbox” value=”Futbol”>
- <input type=”checkbox” value=”Basketbol”>
- <input type=”checkbox” value=”Tenis”>
Ekran Çıktısı
Futbol
Basketbol
Açılır menü ile seçenek sunmak için kullandığımız Kod | Select – Option
Select-Option etiketimiz açılır menü ile seçenek sunar. Select başlık olur option ise özellikleri gösterir.
Örneğin;
<select>Nerelisiniz
<option>İstanbul </option>
<option> Kastamonu </option>
</select>
Ekran Çıktısı
