Mobil Öncelikli Formlar

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 10 / 35.

Formlar web'in en önemli bölümlerinden biridir: kullanıcılar sürekli olarak bunlara yazar, dokunur ve etkileşimde bulunur. Formları önce mobil cihazlar için tasarlarken küçük ekranlarda kullanılabilirliğe odaklanırız:

Kullanıcıların kolayca yazabilmesi ve dokunabilmesi için giriş alanlarını ve düğmeleri büyütün.
Alanları dikey olarak hizalayın ve tam genişlikte giriş alanları kullanın.
Parmaklar için iç boşluk ve aralık ekleyin.

Mobil için örnek:

input, button {
  width: 100%;       /* full width for small screens */
  padding: 0.75rem;  /* easier to tap */
  font-size: 1rem;   /* readable text */
}

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

Formu sayfada ortalayın.
Bazı alanları üst üste yerleştirmek 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;  /* center and limit width */
    margin: 0 auto;
  }

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

Görev

Kolay

Size temel bir HTML formu verilmiştir. Göreviniz, mobil öncelikli stilleri ayarlamaktır:

Formun içindeki öğeler dikey olarak sıralanmalıdır. display: flex ve flex-direction: column kullanın ve görünümün hoş olması için biraz gap ekleyin.
Mobil ekranlar için yeterince büyük ve kullanıcıların kolayca dokunabileceği şekilde input, button ve textarea öğelerine width: 100% uygulayın ve biraz padding ekleyin.

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>