HTML FORM UYGULAMASI - GİRİŞ FORMU

MErhaba ..

Yukarıdaki formu , kutu görünümü alması için HTML ile tek sütun tablo şeklinde  hazırlayıp sayfaya ortalayabilriiz. . Form elemanları arasındaki dikey boşluklar için de <br> kullanalım..

Tablo Özellikleri

• 1 x 1  /tek satır tek sütun)
• Tablo Genişliği :300px
• Tablo Kenarlık : 5px
• Tablo Kenarlık Rengi : darkblue 
• Tablo Hücre içi boşluk : 20px 
• Tablo Arka Plan Rengi : AntiqueWhite

Form Elemanları

• H2 başlık (giriş yap)
• label (inputlar için)
• input type=text (kullanıcı adı)
• input type=password (şifre)
• input type=checkbox (beni hatırla)
• Şifremi Unuttum linki (<a>)
• button type=submit

Form Özellikleri

• İki giriş alanıda gerekli (required)
• İki giriş alanı için açıklama var (placeholder)
• Giriş alanları 30 karakter genişliğinde
• Kullanıcı adı maksimum 10 karakter
• Şifre maksimum 8 karakter
• button type=submit

HTML KODLARI

<!DOCTYPE html>
<html>
<head>
  <title> GİRİŞ FORMU </title>
  <meta charset="utf-8">
</head> 


<body  bgcolor="white">

<br><br><br>
  <form action="" method="post"> 
    <table width="300px" bordercolor="darkblue" border="5" align="center" cellpadding="20" bgcolor="SandyBrown">
      <tr>
        <td>
         
         <h2 align="center"> GİRİŞ YAP</h2><br><br>
         
         <label for="k_adi"><b>Kullanıcı Adı </b></label>  <br>
         <input type="text" placeholder="Kullanıcı Adınız.." name="k_adi" id="k_adi" maxlength="10" size="30" required/>  <br><br>
         
         <label for="sifre"><b>Şifre</b> </label>   <br>
         <input type="password" placeholder="Şifreniz.." name="sifre" id="sifre"  maxlength="8" size="30" required/><br><br>

         <a href="">Şifremi Unuttum!</a>   <br> <br> <br> 
         

         <input type="checkbox"  name="remember" id="remember"  /> 
         <label for="remember">Beni Hatırla </label> <br><br>
         
         <button type="submit">GİRİŞ</button> 

       </td>
     </tr>
   </table>
 </form> 



</body>
</html>