HTML Text Inputs: 5 Fixes to Crush Form Frustration

<label for="username">Your Alter Ego:</label>  
<input 
  type="text" 
  id="username" 
  name="username" 
  placeholder="PizzaSamurai88" 
  maxlength="20" 
  required
>  

<label for="pizza-rant">Crust Crisis Report:</label>  
<textarea 
  id="pizza-rant" 
  name="pizza_rant" 
  rows="4" 
  minlength="20" 
  placeholder="Describe your soggy-bottom trauma..." 
  spellcheck="true"
></textarea>  

textarea {  
  resize: vertical; /* Lets users adjust height */  
  min-height: 100px; /* No ant-sized boxes! */  
  max-height: 300px; /* Prevents novel-writing */  
}  

<label for="email">Secret Pizza Email:</label>  
<input 
  type="text" 
  id="email" 
  aria-describedby="emailHelp" 
  required
>  
<small id="emailHelp">We'll spam you with cheese deals</small>  

<!-- Zip code guard -->  
<input 
  type="text" 
  name="zip" 
  pattern="\d{5}" 
  title="5 digits only, no pizza toppings!" 
  required
>  

<!-- Email trap -->  
<input 
  type="text" <!-- Not type="email"! More control -->  
  name="email" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" 
  oninvalid="this.setCustomValidity('Real email for pizza coupons!')"
>  

input, textarea {  
  width: 100%;  
  padding: 14px;  
  border: 2px solid #eee;  
  border-radius: 12px;  
  margin: 12px 0;  
  font-family: system-ui; /* Bye, Times New Roman */  
  transition: all 0.3s;  
  background: #fff;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);  
}  

/* Focus glow */  
input:focus, textarea:focus {  
  border-color: #ff6b00;  
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.15);  
  outline: 0;  
}  

/* Disabled state */  
input:disabled {  
  background: #fafafa;  
  cursor: not-allowed; /* The universal 'back off' */  
}  

<!-- Placeholder as label (SHAME!) -->  
<input placeholder="Enter email here">  

<label for="email">Secret Pizza Club Email:</label>  
<input 
  type="text" 
  id="email" 
  placeholder="spy@cheeseundercover.com" 
  aria-describedby="emailHint"
>  
<small id="emailHint">We'll never share your mozzarella obsession</small>  

<input type="text" autofocus> <!-- For search pages ONLY -->  

<textarea id="pizza-sonnet" maxlength="280"></textarea>  
<div id="counter" aria-live="polite">280 left</div>  

<script>  
  const sonnet = document.getElementById('pizza-sonnet');  
  const counter = document.getElementById('counter');  

  sonnet.addEventListener('input', () => {  
    const left = 280 - sonnet.value.length;  
    counter.textContent = `${left} characters left`;  
    counter.style.color = left < 30 ? '#ff3b30' : '';  
    counter.style.fontWeight = left < 30 ? 'bold' : '';  
  });  

/*HTML*/
<form id="pizza-sins">  
  <label for="name">Your Name:</label>  
  <input type="text" id="name" name="name" required>  

  <label for="sin">Your Pizza Sin:</label>  
  <select id="sin" name="sin">  
    <option value="">--Confess--</option>  
    <option value="pineapple">I put pineapple on pizza</option>  
    <option value="ketchup">I use ketchup instead of sauce</option>  
  </select>  

  <label for="confession">Full Confession:</label>  
  <textarea 
    id="confession" 
    name="confession" 
    minlength="50" 
    placeholder="Describe your culinary crime..." 
    required
  ></textarea>  

  <div id="char-counter">50 characters minimum</div>  
  <button type="submit">Seek Forgiveness</button>  
</form>  

/*JavaScript*/
// Drama-filled character counter  
document.getElementById('confession').addEventListener('input', function() {  
  const min = 50;  
  const count = this.value.length;  
  const counter = document.getElementById('char-counter');  
    
  if (count < min) {  
    counter.innerHTML = `❌ <strong>${min - count} more characters</strong> needed for absolution`;  
    counter.style.color = '#ff3b30';  
  } else {  
    counter.innerHTML = '✅ <strong>Ready to confess!</strong>';  
    counter.style.color = '#4cd964';  
  }  
});