Birçok web sitesinde oturum açma formlarına rastlamışsınızdır. Peki, bir web geliştirici adayı olarak, sadece HTML ve CSS kullanarak kendi login form unuzu oluşturmayı hiç düşündünüz mü? Evet, sadece bu iki kodlama diliyle oldukça şık bir form tasarlamak mümkün!

Bu yazıda, HTML ve CSS kullanarak basit ama etkili bir login form nasıl tasarlayabileceğinizi adım adım göstereceğim. HTML ile temel yapıyı oluşturup, CSS ile görsel bir dokunuş katacağız. Ayrıca, Google ve Apple oturum açma butonları ekleyerek tasarımımıza modern bir hava katacağız.

Login Formu Nasıl Oluşturulur?

Login formu oluşturmak için şu basit adımları takip edebilirsiniz:

  1. Proje Klasörü Oluşturun: Öncelikle, projeniz için bir klasör oluşturun (örneğin, login-formu).
  2. HTML Dosyası Ekleyin: Klasör içinde index.html adında bir dosya oluşturun. Bu, formun temel HTML yapısını barındıracak.
  3. CSS Dosyası Ekleyin: Görsel stilizasyon için style.css adında bir dosya oluşturun.
  4. Gerekli Logoları İndirin: Google ve Apple logolarını içeren bir klasörü indirin ve projenize ekleyin.

HTML kısmında <form>, <label>, <button> gibi temel öğeleri kullanarak formun yapısını oluşturacağız. CSS kısmında ise renkler, kenarlıklar ve yazı tipleri gibi özellikleri düzenleyerek formu görsel olarak cazip hale getireceğiz.

Simple Login Form

Html Kodu:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
      integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap" rel="stylesheet">
    <title>Login Form</title>
  </head>
  <body>
    <div class="login-container">
      <h1>Log in with</h1>
      <div class="login-top">
        <a href=""
          ><img
            width="24 "
            height="24"
            src="https://img.icons8.com/color/48/google-logo.png"
            alt="google-logo"
          />Google</a
        >
        <a href=""
          ><img
            width="24"
            height="24"
            src="https://img.icons8.com/ios-glyphs/30/mac-os.png"
            alt="mac-os"
          />
          Apple</a
        >
      </div>
      <span class="or">or</span>
      <div class="form">
        <form action="">
          <div class="">
            <label for="email"> Email</label>
            <input
              type="email"
              name="email"
              id="email"
              placeholder="Enter email address"
            />
          </div>
          <div>
            <div class="password-label">
              <label for="password">Password</label>
              <a href="">Forgot Password</a>
            </div>
            <div class="password-area">
              <input
                type="password"
                name="password"
                id="password"
                placeholder="Enter your password"
              />
              <i class="fa-regular fa-eye-slash"></i>
            </div>
          </div>
          <button>LOG IN</button>
        </form>
        <div class="login-bottom">
          <p>Don't have an account?</p>
          <a href="">Sign up</a>
        </div>
      </div>
    </div>
  </body>
</html>

Css Kodu:

body{
    background-color: #0093E9;
    background-image: linear-gradient(160deg, #5966d6 0%, #616cd3 100%);
    font-family: "Roboto Serif", serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}
.login-container{
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 30px;
    background-color: white;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    width: 310px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
h1{
    text-align: center;
    margin: 0;
    padding-bottom: 10px;
    font-weight: 600;
    font-size: 24px;
}
.login-top{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.login-top a{
    flex: 1;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.20) 0px 0px 0px 1px;
    border-radius: 5px;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    gap: 5px;
    text-decoration: none;
    background-color: rgb(247, 247, 247);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    font-size: 14px;
}
.or{
    text-align: center;
}
.or::before{
    margin-left: 0px;
    margin-right: 20px;
}
.or::after{
    margin-right: 0px;
    margin-left: 20px;
}
.or::before, .or::after{
    content: "";
    display: inline-block;
    height: 1px;
    width: 120px;
    background-color: rgba(0, 0, 0, 0.2);
    
}
input::placeholder{
    font-size:15px;
}
input{
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: rgb(247, 247, 247);
    color: rgba(0, 0, 0, 0.8);
    width: -webkit-fill-available;
    padding: 15px 0px 15px 10px;
    border-radius: 5px;
    border: 0;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.20) 0px 0px 0px 1px;
}
label{
    font-size: 14px;
    font-weight: 500;
}
.password-label{
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.password-label a{
    font-size: 12px;
    color: #616cd3 ;
}
.password-area{
    position: relative;
}
.password-area i{
    position: absolute;
    right: 10px;
    top: 45%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    color: #737d86;
}
button{
    padding: 15px 20px;
    width: 100%;
    border: 0;
    background-color:#616cd3;
    color: white;
    font-weight: 600;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    margin-top: 10px;
    margin-bottom: 10px;

}
.login-bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.login-bottom p{
    font-weight: 600;
    font-size: 14px;
}
.login-bottom a{
    color: #616cd3;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

Bu Proje Neden Faydalı?

Bu proje, hem HTML hem de CSS ile pratik yapmak isteyenler için oldukça uygun. Ayrıca, form tasarımı temel bilgilerini öğrenmek, ileride daha gelişmiş formlar oluşturmanızı kolaylaştıracaktır. Örneğin:

  • Şifre görünebilirlik özelliği
  • Şifre güvenliği seviyesi göstergesi
  • Form doğrulama gibi özellikler eklemek

Bu tür özellikleri öğrenmek için sitemizdeki diğer rehberlere de göz atabilirsiniz!

Son Yazılar