Mobil Öncelikli Formlar

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası — ders 10 / 35.

Formlar, webin en önemli parçalarından biridir — kullanıcılar sürekli olarak onlara yazar, dokunur ve onlarla etkileşime girer. Mobil öncelikli formlar tasarlarken, küçük ekranlarda kullanılabilirliğe odaklanırız:

Kullanıcıların kolayca yazabilmesi ve dokunabilmesi için girdileri ve düğmeleri daha büyük yapın.
Alanları dikey olarak üst üste yığın ve tam genişlikte girdiler kullanın.
Parmaklar için dolgu ve boşluk ekleyin.

Mobil için örnek:

input, button {
  width: 100%;       /* küçük ekranlar için tam genişlik */
  padding: 0.75rem;  /* dokunması daha kolay */
  font-size: 1rem;   /* okunabilir metin */
}

Ardından, daha büyük ekranlar (tablet veya masaüstü) için düzeni geliştiriyoruz:

Formu sayfada ortalayın.
Bazı alanları üst üste yığmak yerine yan yana yerleştirin.
Daha iyi bir görünüm için genişlikleri ve boşlukları ayarlayın.

Daha büyük ekranlar için örnek:

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* genişliği sınırla ve ortala */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* yan yana girdiler */
  }
}

Görev

Kolay

Size temel bir HTML formu verildi. Göreviniz mobil öncelikli (mobile-first) stiller ayarlamaktır:

Formun içindeki öğeler dikey olarak üst üste dizilmelidir. display: flex ve flex-direction: column kullanın ve güzel görünmesi için biraz gap ekleyin.
Mobil ekranlar için yeterince büyük ve kullanıcıların dokunması kolay olması için input, button ve textarea öğelerine width: 100% uygulayın ve biraz padding ekleyin.

Kopya kağıdı

Mobil öncelikli formlar tasarlarken, küçük ekranlarda kullanılabilirliğe odaklanın:

Kullanıcıların kolayca yazabilmesi ve dokunabilmesi için girdileri ve düğmeleri daha büyük yapın
Alanları dikey olarak üst üste dizin ve tam genişlikli girdiler kullanın
Parmaklar için iç boşluk (padding) ve aralık ekleyin

Mobil öncelikli form stilleri:

input, button {
  width: 100%;       /* küçük ekranlar için tam genişlik */
  padding: 0.75rem;  /* dokunması daha kolay */
  font-size: 1rem;   /* okunabilir metin */
}

Daha büyük ekranlar (tablet veya masaüstü) için düzeni geliştirin:

Formu sayfada ortalayın
Bazı alanları üst üste dizmek yerine yan yana yerleştirin
Daha iyi bir görünüm için genişlikleri ve boşlukları ayarlayın

@media (min-width: 768px) {
  form {
    max-width: 500px;  /* ortala ve genişliği sınırla */
    margin: 0 auto;
  }

  .row {
    display: flex;
    gap: 1rem;         /* yan yana girdiler */
  }
}

Kendin dene

<!DOCTYPE html>
<html>
<head>
  <title>Mobile-First Forms</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 1rem;
      background-color: #f0f4f8;
    }

    form {
      
    }

    input, textarea, button {
      padding: 0.75rem;    
      font-size: 1rem;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      background-color: #4a90e2;
      color: white;
      border: none;
      cursor: pointer;
    }

    /* Larger screens */
    @media (min-width: 768px) {
      form {
        max-width: 600px;
        margin: 0 auto; /* center form */
      }

      .row {
        display: flex;
        gap: 1rem; /* side-by-side fields */
      }

      .row input {
        width: 100%; /* split space equally */
      }
    }
  </style>
</head>
<body>
   <h1>Contact Us</h1>
  <form>
    <div class="row">
      <input type="text" placeholder="Name" required>
      <input type="email" placeholder="Email" required>
    </div>
    <textarea placeholder="Your Message" rows="4" required></textarea>
    <button type="submit">Send</button>
  </form>
</body>
</html>