HTML CSS ile Başvuru Formu Yapımı

Herkese Merhaba! 4 Temmuzdaki yazıda HTML Form Araçları hakkında bilgi edinmiştik. Nasıl ve nerelerde kullanacağımızı öğrenmiştik. Burada HTML CSS kullanarak başvuru formu yapımı konusundan ziyade: tüm öğrendiklerimizi uygulamak için geniş çaplı bir örnek yapmış olacağız. Hemen başlayalım 🙂

Birinci Bölüm
Birinci Bölüm

Burada birkaç önemli dipnot düşmek istiyorum. Öncelikle kodları yazarken tasarımda daha hoş durması açısından &emsp , &nbsp ve <br> etiketlerini çok fazla kullandım. Bunları kullanmadan da yapabilirsiniz. Ben burada "~Kişisel Bilgiler~" için kod bölümünde yazdığım şekilde direkt attım. Fakat buradan sonraki bölümde kafa karışıklığını önlemek adına bu etiketlerden biraz temizleyip öyle atacağım. Zaten kaynak kodları burada paylaşacağım için oradan da detaylı olarak inceleyebilirsiniz. İkinci bir konu da tabii ki birden fazla yöntem olabilir tasarım tamamen sizin hayal gücünüze kalmış. Ben burada kendim basitçe bir form tasarladım. İçeriğini değiştirip güzelleştirmek sizin hayal gücünüze kalmış. Ve son olarak buradaki çoğu kodlar doğru ve güvenilir şekilde yazılmadı. Fakat nasıl yapabileceğinizi anlattım. Buradaki yazının kaynak kodları en doğru ve güvenilir şekilde oluşturup ulaştırabilen üç kişiye küçük bir sürprizimiz olabilir 🙂 Hadi daha fazla uzatmadan kodlarımızı incelemeye başlayalım.


HTML Bölümü

Adım adım ilerleyecek olursak öncelikle sayfanın tam ortasında bizi bir <img> karşılıyor. Burada resmi ortalamak için <center><img src="./img/img1.PNG"></center> kodunu kullandık. Ardından fark edeceğiniz üzere tablo gibi sayfanın kenarlarına göre bir oranlama var bunu CSS kısmında konuşacağız. Sol sütun üzerinden ilerleyecek olursak bizi kişisel bilgiler, cinsiyet, yaş ve adres bilgileri bölümü karşılıyor. Öncelikle Ad ve Soyad bölümünün karşısında HTML Form araçları yazımızdan öğrendiğimiz çoğu yazılım dilinde textbox öğesi olarak karşımıza çıkan bir alan mevcut. Bu bölümün kodları aşağıdaki şekilde.

~Kişisel Bilgiler~
            <p><b>&emsp;&emsp;&emsp;~Kişisel Bilgiler~</b></p>
            <td>&emsp;&emsp;Ad: &nbsp;<input type = "text" name= "adi" ></td><br>
            <td>&emsp;Soyad: <input type = "text" name= "soyadi"></td>
            <br><br>

~Cinsiyet~

Cinsiyet bölümünde bu sefer çoğu yazılım dilinde radio button olarak karşımıza çıkan form aracını kullandık. Burada dikkat etmemiz gereken nokta name kısımlarının aynı değere eşit olması gerekiyor. Eğer olmazsa aynı anda iki radio button da seçilebilir. Fakat aynı olursa aynı anda kaç adet olursa olsun yalnızca 1 adet seçilir. Bize cinsiyet bölümünde de gereken 1 adet seçeneğin seçilmesi.

            <p><b><i>Cinsiyet:</i></b></p>
            <td><input type="radio" name="Cinsiyet">Erkek</td>
            <td><input type="radio" name="Cinsiyet">Kadın</td>

~Yaş~

Yaş input alanı için tipini “number” belirledik. Çünkü burada kullanıcının rakam dışında girmesini istediğimiz bir şey yok. Aslında bakarsanız kullanıcı yaş değeri olarak örneğin 9999 da girebilir. Bu durumda bunun kontrolünü nasıl sağlayabiliriz? Cevabı oldukça basit. Tek yapmamız gereken min ve max değerlerini tanıtmamız gerekiyor. Bu projeyi yaparken ben bunlara dikkat etmedim. Fakat siz kendi geliştirmenizde üzerine bunları deneyebilirsiniz.

Örneğin minimum 18 maksimum 100 yaş için yazılması gereken kod şu şekilde olacaktır:

<td>Yaş:<input type="number" name="yas" max="100" min="18"></td>

Bu bölümde bizim kendi kodlarımız.

            <td>Yaş:<input type = "number" name= "yas" ></td>

~Adres Bilgileri~

Burada bizi il ve ilçe olarak iki bölüm karşılıyor. Aslında bu bölüm bizim için çok güzel bir beyin fırtınası yapmamızı sağlayacak. Burada doğru ve güvenilir kodlama için il ve ilçeyi kullanıcı girişine bırakmamalıyız. Bunun için şöyle bir örnek verecek olursak: Kahramanmaraş ili için kullanıcılar “K.maraş, Maraş, Kahramanmaraş, K.maras, Kahramanmaras, Kahraman Maraş” vs.. birçok şekilde yazabilir. Eğer biz bu formdaki bilgileri bir veritabanına kaydediyor olsaydık hem istediğimiz veriyi bulmakta çok zorlanırdık, hem de depolama kısmında çok büyük veri kaybımız olurdu. Çünkü burada herkes farklı illerden olsa en fazla 81 il çıkması gerekirken verilerin farklı girilmesinden dolayı hafızayı boşuna şişireceğiz.

           <td >İl: <input type = "text" name= "il" ></td><br>
           <td>İlçe: <input type = "text" name= "ilçe"></td><br>
           <td>Posta Kodu: <input type = "number" name= "postaKodu"></td>

~Mezuniyet Durumu~

Şimdi geldik sağ sütuna burada da bizi öncelikle mezuniyet durumu karşılıyor. Cinsiyet bölümündeki gibi burayı da radio buttonlardan oluşturacağız. Buradaki bölüm için çok anlatılacak bir durum yok direkt kodlarından inceleme yapabiliriz.

               <td><input type = "radio" name= "Mezuniyet">Lise</td><br>
               <td><input type = "radio" name= "Mezuniyet">Lise (Devam Ediyor)</td><br>
               <td><input type = "radio" name= "Mezuniyet">Üniversite</td><br>
               <td><input type = "radio" name= "Mezuniyet">Üniversite (Devam Ediyor)</td>

~Bildiğiniz Yazılım Dilleri~

Bu bölümde farklı bir araç kullanacağız. Burada radiobutton kullanmamamızın sebebi kayıt yapacak kişinin birden fazla yazılım dili bilebilme ihtimalidir. Bu yüzden burada checkbox kullanacağız.

             <input type = "checkbox" name= "yazilimDili">HTML<br>
             <input type = "checkbox" name= "yazilimDili">CSS<br>
             <input type = "checkbox" name= "yazilimDili">JavaScript<br>
             <input type = "checkbox" name= "yazilimDili">Python<br>
             <input type = "checkbox" name= "yazilimDili">Java<br>
             <input type = "checkbox" name= "yazilimDili">C++<br>

İkinci Bölüm
İkinci Bölüm
~İletişim Bilgileri~

Bu bölümde bizi e-mail ve telefon alanları karşılıyor. E-mail textbox tipi olarak tahmin edebileceğiniz üzerine e-mail’i kullanacağız. Nasıl kullanacağınızı belirtecek olursak; type="email" şeklinde yazacağız. Bundan sonraki bölümde ise telefon alanı bizi karşılıyor. Burada ise kullanmamız gereken tip type="tel" şeklinde olacak. Fakat burada type="tel" tipini inceleyecek olursak..

<input type="tel" id="phone" name="phone" placeholder="123-45-678" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required><br><br>
  <small>Format: 123-45-678</small><br><br>
Yukarıdaki Kodun Çıktısı
Yukarıdaki Kodun Çıktısı

Yukarıda gördüğünüz kod bizim kendi telefon numaralarımızın formatından biraz farklı bunu bizim kullandığımız gibi yapabilecek vardır bence 🙂 Beklenilen tek format ( (+90)-(512)-(345)-(67)-(89) ) şeklinde. Veya sadece başında (05) kombinasyonu da arayabilirsiniz. Burayı da yaratıcılığınıza bırakıyorum. Aşağıdaki kodlar da neler yanlış görülmesi oldukça kolay. İyi ki bu formu bir veri tabanında kaydetmiyoruz 😀


            <td>E-Mail: <input type = "text" name= "firstname" ></td><br><br>
            <td>Telefon1: <input type = "number" name= "firstname" ></td><br>
            <td>Telefon2: <input type = "tel" name= "firstname" ></td><br><br>

~Kayıt Bilgileri~

Bu bölümümüzde ise Kullanıcı adı ve parola olarak iki textbox bizi karşılıyor. Kullanıcı adı kısmı için kritelerimiz olsa güzel olabilirdi. Örneğin bir büyük harf olsun. Veya ilk karakter ” ! , # , ^ , vs.. “gibi karakterlerden oluşmasın. Ya da en basitinden şu kadar karakteri geçmesin gibi şartlandırmalar konulabilir. Yaratıcılığınıza göre burada da geliştirmelerinizi bekliyorum. Tabii ki buradaki mantık oldukça saçma. Yazarlık başvurunuzda kullanıcı adı ve parolanızı istiyoruz gerçekten garip geliyor. Ama burada amacımız mantıktan ziyade tüm tipleri kullanmak. Şimdi bu bölümün kodlarını da inceleyelim ve artık son bölümümüz olan Asansör Konuşmasına geçelim.


             <td>Kulanıcı Adı: <input type = "text" name= "kullaniciAdi" ></td><br>
             <td>Parola: <input type = "password" name= "parola"></td><br>
             <input type="checkbox">Beni Hatırla! <br>

~ Asansör Konuşması ~

Şimdi geldik son bölümümüze asansör konuşması. Ama geçmeden önce asansör konuşması hakkında daha önce bir bilginiz yoksa araştırmanızı kesinlikle öneririm. Bu bölüm için kullanacağımız yapı textarea olacak. Bunun sebebi ise formu gönderecek kişinin normal bir textbox içinde ne yazdığını görmesi zor olur. Sütun (column) olarak 40, satır (row) olarak 10 karakterlik bir alan verdik. Burada ise yapılabilecek geliştirme formu gönderen kişiye belirli bir karakterin üzerinde yazmasına izin vermememiz gerekebilir. Bunun birden çok sebebi olabilir. Örneğin veritabanımızda bu alan için o kadar büyük yer ayırmamış olabiliriz. Veya buradaki yazının asıl mantığı kısa ve öz konuşmak bu yüzden de kısıtlamak isteyebiliriz. Altta bulunan buton ise HTML bölümünde bu şekilde belirtiyoruz. Fakat asıl süslemesini CSS bölümümüzde yapacağız. Hadi son bölümümüzün kodlarını da inceleyip CSS bölümümüze geçelim.


            <td><textarea name="" id="" cols="40" rows="10">Lorem50</textarea></td><br>
            <div class="gonderButonu"><button>Gönder</button></div

CSS Bölümü

CSS bölümümüzü aşağıdaki şekilde oluşturduk. Aslında burası tamamen sizin hayal gücünüze kalmış bir alan. Formdaki tüm textboxları, yazı tiplerini, renklerini her şeyi değiştirmek sizin elinizde. Ben bu şekilde çok sade oluşturdum. En başta konuştuğumuz gibi hayal gücünüz ve yaratıcılığınız en iyi üçlüyü seçmede oldukça etkili olacak. Tabii bunun yanı sıra kodun doğru ve güvenilir kod olması da çok önemli. O halde kodlarımızı inceleyelim ve burada yazımızın sonuna gelelim.

.solSutun{
    
    float: left;
    padding-left: 350px;
    padding-top: 30px;
}
.sagSutun{
    float: right;
    padding-top: 30px;
    padding-right: 350px;
}
.gonderButonu{
    float: right;
    padding-top: 30px;
}
.gonderButonu button{
    display: inline-block;
    background: #ff523b;
    color:black;
    padding: 8px 30px;
    margin: 30px 0;
    border-radius: 30px;
    transition: background 0.5s;
}

Oldukça geniş çaplı bir örnek yaptık. Umarım her şey yerli yerine oturmuştur. Eğer bahsettiğim doğru ve güvenilir kodların yazımında veya herhangi bir sorunuz olursa bana ulaşabilirsiniz. Özellikle de bu yazının güncellenmiş halini de aynı şekilde ulaştırabilirsiniz.

Bir sonraki yazıda görüşünceye dek herkese sağlıklı günler dilerim❀✿❁.