Hoş Geldin, Ziyaretçi!

Forum içeriğine ve tüm hizmetlerimize erişim sağlamak için foruma kayıt olmalı ya da giriş yapmalısınız. Foruma üye olmak tamamen ücretsizdir.

HTML Form Oluşturma

  • Konbuyu başlatan Thous
  • Başlangıç tarihi
Thous

Thous

Yönetici
Yönetici
Katılım
28 Şub 2022
Mesajlar
370
Konum
Samsun
Web
tilki.net
Ticaret: 1 / 0 / 0
Bu yazımda HTML Form oluşturma işleminin nasıl yapıldığı hakkında bilgiler vermeye çalışacağım. Formlar; bilgiler girdiğimiz ve gönder, ileri gibi butonlara tıklayarak sunucuya bilgi gönderdiğimiz genellikle kutu görünümlü şablonlardır.

HTML de Form Nasıl Oluşturulur?​

HTML de form oluşturmak için <form> </form> etiketini kullanabilirsiniz. Veri giriş alanı oluşturmak için ise <input> etiketini kullanabilirsiniz. Veri türünü belirlemek için ise input etiketine özellik eklememiz gerekir.

HTML:
 <form>

        <p>Adı : <input type="text"></p>

    </form>

Yukarıda eklediğimiz kod aşağıdaki gibi görünüme sahip olacaktır.

Html de form ekleme

Aşağıda formlarda input için kullanabileceğiniz bazı özellikleri (attribute) eklemeye çalıştım.

Ne zaman kullanılır?Input Çeşitleri
İsim, soy isim gibi metin içerikli ifadelerde kullanılır.text
Eğer formda e-posta isteyecekseniz bu özelliği kullanabilirsiniz.email
Parola girdiğimizde girdiğimiz harfler bildiğiniz gibi otomatik olarak gizleniyor. Parola istemek için bu özelliği kullanabilirsiniz.password
Parolayı hatırla veya beni hatırla gibi özelliklerde kullanılabilen checkbox yani onay kutusu için bu özelliği kullanabilirsiniz.checkbox
Cinsiyet gibi seçimler yaptırmak istiyorsanız radio buton özelliğini kullanabilirsiniz.radio
Gruplandırma yapmak için name özelliğini kullanabilirsiniz. Ad, soyad gibi bilgileri birbirinden ayırmak için input etiketine name özelliği vermek oldukça önemli.name
Doğum günü ve benzeri zaman seçtirmek için bu özelliği kullanabilirsiniz.datetime-local

Şehir seçimi ve benzeri seçim işlemleri için ise <select> etiketini kullanabilirsiniz.

HTML:
<form>
        <p>
Memleketiniz : <select name="memleket">
    <option>Samsun</option>
    <option>Antalya</option>
    <option>İstanbul</option>
    <option>Eskişehir</option>
    <option>Bursa</option>
</p>
</form>

Yukarıda anlatımı yaparken aynı zamanda ilgili kodları da yazdım. Tüm özellikleri kod halinde aşağıya yapıştırıyorum.
HTML:
    <form>

        <p>İsim : <input type="text" name="isim"></p>
        <p>Soyisim : <input type="text" name="soyisim"></p>
        <p>Doğum Tarihi : <input type="datetime-local" ></p>
        <p>Email : <input type="email" name="mail"></p>
        <p>Parola : <input type="password" name="sifre"></p>
        <p>Beni Hatırla : <input type="checkbox" name="beni-hatirla"></p>
        <p>Erkek : <input type="radio" name="cinsiyet">
        Kadın : <input type="radio" name="cinsiyet"></p>

        <p>
Memleketiniz : <select name="memleket">
    <option>Samsun</option>
    <option>Antalya</option>
    <option>İstanbul</option>
    <option>Eskişehir</option>
    <option>Bursa</option>
</p>
</select>

    </form>

Yukarıdaki kodlar eklendiğinde aşağıdaki gibi gözükecektir.

Html form olusturma

Eklenen kodların görünüm açısından güzelleştirilmesi CSS tarafında yapılmaktadır. Umarım işinize yarayan bir yazı olmuştur, iyi forumlar ♥