Forms, Labels, and Help Text

Forms are where HTML starts to matter for real work. A usable form is not just inputs and a button. It needs labels, descriptions, sensible field types, and a layout that does not fight the user.

This lesson focuses on the minimum markup needed for forms that can be styled and validated without guesswork.

Edit the panels below and press Run to preview. Nothing you type here is saved — refreshing the page restores the original starter code.

<form class="signup-form">  

<div class="field">    
<label for="name">Name</label>   
<input id="name" name="name" type="text">  
</div>  

<div class="field">    
<label for="email">Email</label>    
<input id="email" name="email" type="email">  
</div> 

<button type="submit">Submit</button>

</form>

.signup-form {
     max-width: 28rem;
}
.field {
    margin-bottom: 1rem;
}

label {
  display: block;  
  margin-bottom: 0.35rem;  
  font-weight: 600;
}input, button {
  width: 100%;  
  box-sizing: border-box;
  padding: 0.8rem 0.9rem; 
  border: 1px solid #cfcfcf;  
  border-radius: 6px;
}

// Add client-side enhancement later if needed.\nconsole.log("Forms lesson loaded");