Skip to content

Instantly share code, notes, and snippets.

@knice

knice/form-elements.html

Created May 2, 2025 21:51
Show Gist options
  • Save knice/8edbcb1b2716df22543aa6db67d6a632 to your computer and use it in GitHub Desktop.
Save knice/8edbcb1b2716df22543aa6db67d6a632 to your computer and use it in GitHub Desktop.
Download ZIP
HTML form elements
Raw
form-elements.html
<fieldset>
<legend>Basic Information</legend>
<div class="form-group">
<label for="name" class="required">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required autocomplete="name">
<div class="hint">Please enter your first and last name</div>
</div>
<div class="form-group">
<label for="email" class="required">Email Address</label>
<input type="email" id="email" name="email" placeholder="[email protected]" required autocomplete="email">
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" placeholder="(123) 456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" autocomplete="tel">
<div class="hint">Format: 123-456-7890</div>
</div>
<div class="form-group">
<label for="password" class="required">Password</label>
<input type="password" id="password" name="password" placeholder="Create a password" required minlength="8">
<div class="hint">Minimum 8 characters</div>
</div>
</fieldset>
<!-- Numerical Inputs -->
<fieldset>
<legend>Numerical Information</legend>
<div class="form-group">
<label for="age">Age</label>
<input type="number" id="age" name="age" min="18" max="120" placeholder="Enter your age">
</div>
<div class="form-group">
<label for="birthday">Date of Birth</label>
<input type="date" id="birthday" name="birthday">
</div>
<div class="form-group">
<label for="appointment">Preferred Appointment Time</label>
<input type="datetime-local" id="appointment" name="appointment">
</div>
<div class="form-group">
<label for="month">Preferred Month</label>
<input type="month" id="month" name="month">
</div>
<div class="form-group">
<label for="week">Preferred Week</label>
<input type="week" id="week" name="week">
</div>
<div class="form-group">
<label for="time">Preferred Time</label>
<input type="time" id="time" name="time">
</div>
</fieldset>
<!-- Selection & Options -->
<fieldset>
<legend>Preferences</legend>
<div class="form-group">
<label for="country">Country</label>
<select id="country" name="country">
<option value="">-- Select a Country --</option>
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
<option value="au">Australia</option>
<option value="in">India</option>
</select>
</div>
<div class="form-group">
<label for="languages">Languages You Speak</label>
<select id="languages" name="languages" multiple size="4">
<option value="en">English</option>
<option value="es">Spanish</option>
<option value="fr">French</option>
<option value="de">German</option>
<option value="zh">Chinese</option>
<option value="ja">Japanese</option>
</select>
<div class="hint">Hold Ctrl/Cmd to select multiple options</div>
</div>
<div class="form-group">
<label>Gender</label>
<div class="radio-group">
<label><input type="radio" name="gender" value="male"> Male</label>
<label><input type="radio" name="gender" value="female"> Female</label>
<label><input type="radio" name="gender" value="other"> Other</label>
<label><input type="radio" name="gender" value="prefer-not"> Prefer not to say</label>
</div>
</div>
<div class="form-group">
<label>How did you hear about us?</label>
<div class="checkbox-group">
<label><input type="checkbox" name="source" value="search"> Search Engine</label>
<label><input type="checkbox" name="source" value="social"> Social Media</label>
<label><input type="checkbox" name="source" value="friend"> Friend/Family</label>
<label><input type="checkbox" name="source" value="ad"> Advertisement</label>
</div>
</div>
</fieldset>
<!-- Advanced Inputs -->
<fieldset>
<legend>Additional Information</legend>
<div class="form-group">
<label for="profile">Profile Picture</label>
<input type="file" id="profile" name="profile" accept="image/*">
</div>
<div class="form-group">
<label for="documents">Upload Documents</label>
<input type="file" id="documents" name="documents" multiple accept=".pdf,.doc,.docx">
<div class="hint">Max 3 files, PDF or DOC format</div>
</div>
<div class="form-group">
<label for="favorite-color">Favorite Color</label>
<input type="color" id="favorite-color" name="favorite-color" value="#4CAF50">
</div>
<div class="form-group">
<label for="satisfaction">Satisfaction Level</label>
<input type="range" id="satisfaction" name="satisfaction" min="1" max="10" step="1" value="5">
<div class="hint">1 = Not Satisfied, 10 = Very Satisfied</div>
</div>
<div class="form-group">
<label for="website">Website</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
</div>
<div class="form-group">
<label for="search">Search Query</label>
<input type="search" id="search" name="search" placeholder="Search...">
</div>
<div class="form-group">
<label for="comments">Additional Comments</label>
<textarea id="comments" name="comments" rows="5" placeholder="Enter any additional comments or questions..."></textarea>
</div>
<div class="form-group">
<label><input type="checkbox" name="terms" required> I agree to the <a href="#">Terms and Conditions</a></label>
</div>
<div class="form-group">
<label><input type="checkbox" name="newsletter"> Subscribe to newsletter</label>
</div>
</fieldset>
<!-- Hidden Fields -->
<input type="hidden" name="form_id" value="registration_form_v1">
<input type="hidden" name="timestamp" value="2023-04-20T12:00:00">
<!-- Form Controls -->
<div class="form-group">
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment