Web geliştirme HTML Form Tasarımı: Gelişmiş Form Kodları ve Stil İpuçları

<form id="signup-form" class="form-container" novalidate>
  <fieldset>
    <legend>Kişisel Bilgiler</legend>
    
    <div class="form-group">
      <label for="fullname">Tam Adınız</label>
      <input type="text" id="fullname" name="fullname" required
             placeholder="Ad ve soyadınızı yazın"
             pattern="[A-Za-zğüşıöçĞÜŞİÖÇ\s]{3,}">
      <span class="form-hint">En az 3 karakter</span>
    </div>
    
    <div class="form-group">
      <label for="email">E-posta <span class="required">*</span></label>
      <input type="email" id="email" name="email" required
             placeholder="ornek@mail.com">
    </div>
  </fieldset>
 
  <!-- Diğer form alanları -->
</form>

<!-- Tarih Seçici -->
<div class="form-group">
  <label for="birthdate">Doğum Tarihi</label>
  <input type="date" id="birthdate" name="birthdate"
         min="1900-01-01" max="2023-12-31">
</div>

<!-- Renk Seçici -->
<div class="form-group">
  <label for="favcolor">Favori Renginiz</label>
  <input type="color" id="favcolor" name="favcolor" value="#6a5acd">
</div>

<!-- Aralık Seçici -->
<div class="form-group">
  <label for="volume">Ses Seviyesi: <span id="volume-value">50</span>%</label>
  <input type="range" id="volume" name="volume"
         min="0" max="100" value="50" step="5"
         oninput="document.getElementById('volume-value').textContent = this. Value">
</div>

<div class="form-group">
  <label for="country">Ülke</label>
  <select id="country" name="country" required>
    <option value="" disabled selected>Ülke seçiniz</option>
    <optgroup label="Avrupa">
      <option value="tr">Türkiye</option>
      <option value="de">Almanya</option>
    </optgroup>
    <optgroup label="Asya">
      <option value="jp">Japonya</option>
    </optgroup>
  </select>
</div>

<!-- Çoklu Seçim -->
<div class="form-group">
  <label for="skills">Yetenekler</label>
  <select id="skills" name="skills" multiple size="4">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </select>
</div>

.form-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .form-group {
    flex-direction: row;
    align-items: center;
  }
 
  .form-group label {
    flex: 0 0 200px;
    margin-right: 1rem;
    text-align: right;
  }
 
  .form-group input,
  .form-group select,
  .form-group textarea {
    flex: 1;
  }
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
select, textarea {
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 16px;
  transition: all 0.3s ease;
  background-color: #f9f9f9;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: #4a6fa5;
  box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.2);
  background-color: #fff;
}

/* Özel Checkbox ve Radio Butonları */
input[type="checkbox"], input[type="radio"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  margin-right: 10px;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"]:checked {
  background-color: #4a6fa5;
  border-color: #4a6fa5;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-color: #4a6fa5;
  border-color: #4a6fa5;
}

/* Özel Select Ok Simgesi */
select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 1em;
  padding-right: 2.5em;
}

<input type="text" id="username" name="username"
       minlength="3" maxlength="20"
       pattern="[A-Za-z0-9_]+"
       title="Sadece harf, sayı ve alt çizgi kullanabilirsiniz">

/* Geçerli ve geçersiz durumlar */
input:valid {
  border-color: #4CAF50;
}

input:invalid:not(:placeholder-shown) {
  border-color: #f44336;
}

/* Hata ve uyarı mesajları */
.form-group {
  position: relative;
}

.error-message {
  color: #f44336;
  font-size: 0.85rem;
  margin-top: 0.25rem;
  display: none;
}

input:invalid:not(:placeholder-shown) ~ .error-message {
  display: block;
}

/* Zorunlu alan göstergesi */
.required {
  color: #f44336;
  margin-left: 0.25rem;
}

<div class="form-group floating-label">
  <input type="text" id="username" name="username" placeholder=" ">
  <label for="username">Kullanıcı Adı</label>
</div>

.floating-label {
  position: relative;
}

.floating-label input {
  padding-top: 1.5rem;
}

.floating-label label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: #999;
  transition: all 0.3s ease;
  pointer-events: none;
}

.floating-label input:focus + label,
.floating-label input:not(:placeholder-shown) + label {
  top: 0.25rem;
  left: 0.75rem;
  font-size: 0.75rem;
  color: #4a6fa5;
}

<div class="form-group">
  <label for="password">Şifre</label>
  <input type="password" id="password" name="password" required
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">
  <div class="password-strength">
    <div class="strength-bar"></div>
    <span class="strength-text">Şifre gücü: zayıf</span>
  </div>
</div>

.password-strength {
  margin-top: 0.5rem;
  width: 100%;
}

.strength-bar {
  height: 5px;
  background: #eee;
  border-radius: 3px;
  margin-bottom: 0.25rem;
  overflow: hidden;
}

.strength-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  background: #f44336;
  transition: width 0.3s ease, background 0.3s ease;
}

.strength-text {
  font-size: 0.75rem;
  color: #f44336;
}

document.getElementById('password').addEventListener('input', function(e) {
  const password = e.target.value;
  const strengthBar = document.querySelector('.strength-bar');
  const strengthText = document.querySelector('.strength-text');
 
  let strength = 0;
  if (password.length > 0) strength += 1;
  if (password.length >= 8) strength += 1;
  if (/[A-Z]/.test(password)) strength += 1;
  if (/\d/.test(password)) strength += 1;
  if (/[^A-Za-z0-9]/.test(password)) strength += 1;
 
  const width = strength * 20;
  strengthBar.style.width = width + '%';
 
  if (strength <= 2) {
    strengthBar.style.backgroundColor = '#f44336';
    strengthText.textContent = 'Şifre gücü: zayıf';
    strengthText.style.color = '#f44336';
  } else if (strength <= 4) {
    strengthBar.style.backgroundColor = '#ff9800';
    strengthText.textContent = 'Şifre gücü: orta';
    strengthText.style.color = '#ff9800';
  } else {
    strengthBar.style.backgroundColor = '#4CAF50';
    strengthText.textContent = 'Şifre gücü: güçlü';
    strengthText.style.color = '#4CAF50';
  }
});

<div class="multi-step-form">
  <div class="steps">
    <div class="step active" data-step="1">Kişisel Bilgiler</div>
    <div class="step" data-step="2">Ödeme Bilgileri</div>
    <div class="step" data-step="3">Onay</div>
  </div>
 
  <div class="form-step active" id="step-1">
    <!-- 1. adım form alanları -->
    <button type="button" class="next-step">Devam</button>
  </div>
 
  <div class="form-step" id="step-2">
    <!-- 2. adım form alanları -->
    <button type="button" class="prev-step">Geri</button>
    <button type="button" class="next-step">Devam</button>
  </div>
 
  <div class="form-step" id="step-3">
    <!-- 3. adım form alanları -->
    <button type="button" class="prev-step">Geri</button>
    <button type="submit">Gönder</button>
  </div>
</div>

.multi-step-form {
  position: relative;
}

.steps {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}

.steps::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #ddd;
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 0.5rem 1rem;
  border: 2px solid #ddd;
  border-radius: 50px;
  text-align: center;
  min-width: 120px;
}

.step.active {
  border-color: #4a6fa5;
  color: #4a6fa5;
  font-weight: bold;
}

.form-step {
  display: none;
}

.form-step.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translate(0); }
}

document.querySelectorAll('.next-step').forEach(button => {
  button.addEventListener('click', () => {
    const currentStep = document.querySelector('.form-step.active');
    const nextStep = currentStep.nextElementSibling;
    
    if (nextStep) {
      currentStep.classList.remove('active');
      nextStep.classList.add('active');
      
      const stepNumber = nextStep.id.split('-')[1];
      document.querySelectorAll('.step').forEach(step => {
        step.classList.remove('active');
        if (step.dataset.step === stepNumber) {
          step.classList.add('active');
        }
      });
    }
  });
});

document.querySelectorAll('.prev-step').forEach(button => {
  button.addEventListener('click', () => {
    const currentStep = document.querySelector('.form-step.active');
    const prevStep = currentStep.previousElementSibling;
    
    if (prevStep) {
      currentStep.classList.remove('active');
      prevStep.classList.add('active');
      
      const stepNumber = prevStep.id.split('-')[1];
      document.querySelectorAll('.step').forEach(step => {
        step.classList.remove('active');
        if (step.dataset.step === stepNumber) {
          step.classList.add('active');
        }
      });
    }
  });
});

<button type="submit" class="submit-btn">
  <span class="btn-text">Gönder</span>
  <div class="loading-spinner"></div>
</button>

.submit-btn {
  position: relative;
  overflow: hidden;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  opacity: 0;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.submit-btn.loading .btn-text {
  opacity: 0;
}

.submit-btn.loading .loading-spinner {
  opacity: 1;
}

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
 
  const submitBtn = document.querySelector('.submit-btn');
  submitBtn.classList.add('loading');
 
  // Simüle edilmiş AJAX isteği
  setTimeout(() => {
    submitBtn.classList.remove('loading');
    alert('Form başarıyla gönderildi!');
  }, 2000);
});