HTML5 Forms

Creating forms with HTML5 input types and validation

Basic Form

<form action=""/submit" method="POST"> # form element
    <input type="text" name="username">
    <button type="submit">Submit</button>
</form>

Input Types

<input type="text"> # single-line text
<input type="email"> # email address
<input type="password"> # password field
<input type="number"> # numeric input
<input type="date"> # date picker
<input type="tel"> # telephone number
<input type="url"> # URL

Other Input Types

<input type="checkbox"> # checkbox
<input type="radio"> # radio button
<input type="file"> # file upload
<input type="range"> # slider
<input type="color"> # color picker

Form Elements

<textarea>...</textarea> # multi-line text
<select>
    <option>Option 1</option> # dropdown
</select>
<label for="input-id">Label</label> # input label

Validation Attributes

required # field must be filled
pattern="[A-Za-z]+" # regex pattern
minlength="5" # minimum length
maxlength="20" # maximum length
min="1" max="100" # number range