Accessible contact form with clear labels
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Contact us</title>
</head>
<body>
<main>
<h1>Contact us</h1>
<p>We usually reply within two working days.</p>
<form action="/contact" method="post">
<fieldset>
<legend>Your details</legend>
<p>
<label for="name">Name</label>
<input id="name" name="name" type="text" autocomplete="name" required>
</p>
<p>
<label for="email">Email</label>
<input id="email" name="email" type="email" autocomplete="email" required
aria-describedby="email-hint">
<small id="email-hint">Only used to reply to you.</small>
</p>
</fieldset>
<p>
<label for="message">Message</label><br>
<textarea id="message" name="message" rows="4" minlength="10" required></textarea>
</p>
<button type="submit">Send message</button>
</form>
</main>
</body>
</html>