HTML Form Boilerplate

Complete reference for form inputs and validation

Text Inputs

Text Input *

Basic text input with placeholder

Email Input *

Validates email format

Password Input *

Minimum 8 characters

Phone Number

Telephone number input

Website URL

Validates URL format

Search input with clear button

Textarea

Multi-line text input

Number & Date Inputs

Number Input

Min: 0, Max: 100, Step: 1

Range Input

Value: 50

Color Picker

Color selection input

Date Input

Date picker

Time Input

Time picker

DateTime Input

Date and time picker

Month Input

Month and year picker

Week Input

Week picker

Selection Inputs

Select Dropdown *

Single selection dropdown

Multiple Select

Hold Ctrl/Cmd to select multiple

Datalist Input

Autocomplete with suggestions

Checkboxes & Radio Buttons

Checkboxes (Multiple Selection)

Reading

Sports

Music

Travel

Select multiple options

Radio Buttons (Single Selection) *

Male

Female

Other

Select one option

Toggle Switch

On/off toggle switch

File & Advanced Inputs

File Upload

Single file upload

Multiple Files

Multiple file upload

Image Upload

Images only (jpg, png, gif, etc.)

Hidden Input (Not Visible)

This is a hidden input field with value “hidden-value”

Input Groups & Floating Labels

Price Input

$ .00

Input with prefix and suffix

Username

Input with prefix

Floating Label Name

Floating label input

Floating Select

Floating label select

Form Validation

Valid Input

Looks good!

Invalid Input

Please provide a valid input.

I agree to the Terms and Conditions *

You must agree before submitting.

Form Actions

Basic Form Structure

<form id=”myForm” method=”POST” action=”/submit” enctype=”multipart/form-data”>
    <div class=”mb-3″>
        <label for=”inputId” class=”form-label”>Label Text</label>
        <input type=”text” class=”form-control” id=”inputId” name=”inputName” required>
        <div class=”form-text”>Helper text</div>
    </div>
    
    <button type=”submit” class=”btn btn-primary”>Submit</button>
</form>
            