Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Form Example</title>
</head>
<body>
<div class="container">
<h1>📝 Sign Up Form</h1>
<p class="form-description">
All fields marked with <span class="required">*</span> are required.
</p>
<form onsubmit="handleSubmit(event)" novalidate>
<!-- Text Input -->
<div class="form-group">
<label for="fullname">
Full Name<span class="required">*</span>
</label>
<input
type="text"
id="fullname"
name="fullname"
required
aria-required="true"
aria-describedby="name-hint"
onblur="markTouched(this)">
<p id="name-hint" class="hint">Enter your first and last name</p>
<p class="error">Please enter your full name</p>
</div>
<!-- Email Input -->
<div class="form-group">
<label for="email">
Email<span class="required">*</span>
</label>
<input
type="email"
id="email"
name="email"
required
aria-required="true"
aria-describedby="email-hint"
onblur="markTouched(this)">
<p id="email-hint" class="hint">We'll never share your email</p>
<p class="error">Please enter a valid email address</p>
</div>
<!-- Password Input -->
<div class="form-group">
<label for="password">
Password<span class="required">*</span>
</label>
<input
type="password"
id="password"
name="password"
required
minlength="8"
aria-required="true"
aria-describedby="password-hint"
onblur="markTouched(this)">
<p id="password-hint" class="hint">Minimum 8 characters</p>
<p class="error">Password must be at least 8 characters</p>
</div>
<!-- Radio Buttons -->
<fieldset>
<legend>Account Type<span class="required">*</span></legend>
<div class="radio-group" role="radiogroup" aria-required="true">
<div class="radio-option">
<input type="radio" id="personal" name="accountType" value="personal" required>
<label for="personal">Personal</label>
</div>
<div class="radio-option">
<input type="radio" id="business" name="accountType" value="business">
<label for="business">Business</label>
</div>
</div>
</fieldset>
<!-- Checkboxes -->
<fieldset>
<legend>Interests (Optional)</legend>
<div class="checkbox-group">
<div class="checkbox-option">
<input type="checkbox" id="newsletter" name="interests" value="newsletter">
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div class="checkbox-option">
<input type="checkbox" id="updates" name="interests" value="updates">
<label for="updates">Receive product updates</label>
</div>
</div>
</fieldset>
<!-- Select Dropdown -->
<div class="form-group">
<label for="country">
Country<span class="required">*</span>
</label>
<select id="country" name="country" required aria-required="true">
<option value="">Select your country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
<option value="ca">Canada</option>
<option value="au">Australia</option>
</select>
</div>
<!-- Textarea -->
<div class="form-group">
<label for="bio">
Bio (Optional)
</label>
<textarea
id="bio"
name="bio"
rows="4"
aria-describedby="bio-hint"></textarea>
<p id="bio-hint" class="hint">Tell us about yourself</p>
</div>
<!-- Submit Button -->
<button type="submit">Create Account</button>
<!-- Success Message -->
<div class="success-message" role="status" tabindex="-1">
✅ Form submitted successfully! (Demo only - not actually sent)
</div>
</form>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Error Handling</title>
</head>
<body>
<div class="container">
<h1>⚠️ Error Handling Demo</h1>
<!-- Error Summary -->
<div
id="error-summary"
class="error-summary"
role="alert"
aria-live="assertive"
tabindex="-1">
<h2>⚠️ There are 2 errors in this form</h2>
<ul id="error-list" class="error-list"></ul>
</div>
<form onsubmit="validateForm(event)">
<div class="form-group">
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
aria-describedby="username-error">
<p id="username-error" class="error-message">
❌ Username is required
</p>
</div>
<div class="form-group">
<label for="email2">Email</label>
<input
type="email"
id="email2"
name="email"
aria-describedby="email-error">
<p id="email-error" class="error-message">
❌ Please enter a valid email
</p>
</div>
<button type="submit">Submit</button>
</form>
<div style="background: #fef3c7; padding: 20px; border-radius: 8px; margin-top: 30px; border-left: 4px solid #f59e0b;">
<h3 style="color: #78350f; margin-bottom: 10px;">💡 Try This:</h3>
<p style="color: #92400e; line-height: 1.6;">
Click "Submit" without filling the form. Notice:
<br>• Error summary appears at top (gets focus)
<br>• Errors listed with clickable links
<br>• Fields highlighted in red
<br>• Error messages shown below fields
</p>
</div>
</div>
</body>
</html>Loading preview...