Skip to content

Instantly share code, notes, and snippets.

@bpeterso2000

bpeterso2000/html_form_red_asterisk_required_field.py

Created May 13, 2025 01:10
Show Gist options
  • Save bpeterso2000/e76ad627446d3c02152d5b3b1ca2941e to your computer and use it in GitHub Desktop.
Save bpeterso2000/e76ad627446d3c02152d5b3b1ca2941e to your computer and use it in GitHub Desktop.
Download ZIP
For accessible purposes use SVG for red asterisk on required fields
Raw
html_form_red_asterisk_required_field.py
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Form with Red Asterisk</title>
<style>
/* Style the asterisk container */
.required-asterisk {
color: red;
vertical-align: super;
font-size: 0.8em;
margin-left: 2px;
}
/* Ensure SVG is inline and sized appropriately */
.required-asterisk svg {
width: 8px;
height: 8px;
fill: currentColor; /* Inherits red color from parent */
}
/* Form styling for clarity */
.form-group {
margin-bottom: 1em;
}
label {
font-weight: bold;
}
input {
padding: 0.5em;
margin-top: 0.2em;
}
.help-text {
font-size: 0.9em;
color: #555;
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label for="name">
Full Name
<span class="required-asterisk" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z"/>
</svg>
</span>
</label>
<input type="text" id="name" required aria-required="true" aria-describedby="name-help">
<p id="name-help" class="help-text">Enter your first and last name. This field is required.</p>
</div>
<div class="form-group">
<label for="email">
Email
<span class="required-asterisk" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z"/>
</svg>
</span>
</label>
<input type="email" id="email" required aria-required="true" aria-describedby="email-help">
<p id="email-help" class="help-text">Enter a valid email address, e.g., [email protected]. This field is required.</p>
</div>
<div class="form-group">
<label for="phone">Phone (optional)</label>
<input type="tel" id="phone" aria-describedby="phone-help">
<p id="phone-help" class="help-text">Enter your phone number, including area code.</p>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment