Login-Registration-Form

Html ve Css ile yapılan basit bir kayıt ve giriş formu:

Login sayfasını inceleyecek olursak, <form> tag’ı ile bir form alanı oluşturduk. Form alanının içinde kullanıcı adını ve şifresini gireceği input’lar ve giriş için buton olmalı.

Input’ların yanına ikonlar ekleyerek renklendirebilirsiniz. Bunun için <span> tag’ı içinde kullandık. İconlar için fontawesome dan yararlandım.

Html tag’larına nitelik ekleyebilirsiniz;

placeholder ile varsayılan olarak görünecek bir dolgu metni ekledik,

required ile zorunlu alan olduğunu  belirttik.

Form alanının altına kullanıcı eğer kayıt değilse kayıt sayfasına ulaşabilmes için <a> tag’ı ile bir link ekledik.

Tasarımı kolaylaştırmak için Bootstrap kullanabilirsiniz.  En üst tabakadaki div’e baktığımızda da bootstrap card classını kullanarak card görüntüsü elde etmiş olduk.

 

Kayıt sayfasına baktığımızda, yine form tag’ı kullanarak form alanı oluşturduk. Kullanıcı adı, mail, şifre ve telefon numarası vs. için input oluşturduk. Bunları çeşitlendirebilirsiniz. Örnek olması açısından bir kaç tipte input ekledim.

 

 

Telefon input’una pattern özelliği ekleyerek telefon numarası için 3-2-3 hane girilecek şekilde belli bir ifade oluşturduk.

 

radio tipinde bir input ekledik. Bu şekilde cinsiyet tercihi seçimi tikleyerek yapılabiliyor.  <label> ile bu input’lara etiket verdik.

<input type="radio" value="None" id="male" name="gender" />

<label for="male" class="radio">Male</label>

 

Doğum tarihi için date tipinde bir input oluşturduk. Bu şekilde tarih seçimi yapılabiliyor.

<input type="date" name="birthday" id="birthday">

 

<select> tag’ı ile açılır seçim listesi oluşturduk, <option> ile seçilecek tercihleri ekledik.

 

<select id="city" name="city">
  <option value="seçiniz">Choose</option>
  <option value="0">Ankara</option>
  <option value="1">İstanbul</option>
  <option value="2">İzmir</option>
  <option value="3">Bursa</option> 
</select>

 

Son olarak css eklediğimiz de ise form sayfalarımız şu şekilde görünebilir:

 

Proje kodlarının tamamına göz atmak isterseniz Github profilime bakabilirsiniz.