Last active
December 31, 2015 12:33
-
-
Save DaveKin/fe6150c0d7407e5c13a3 to your computer and use it in GitHub Desktop.
HTML form with pretty much everything in it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form> | |
<fieldset> | |
<legend>Form Fields</legend> | |
<div> | |
<label for="text-input">Text input</label> | |
<input id="text-input" type="text"> | |
</div> | |
<div> | |
<label for="text-input-placeholder">Text input with placeholder</label> | |
<input id="text-input-placeholder" type="text" placeholder="I'm placeholder text"> | |
</div> | |
<div> | |
<label for="readonly-input">Readonly input</label> | |
<input id="readonly-input" type="text" value="Read only text input" readonly> | |
</div> | |
<div> | |
<label for="disabled-input">Disabled input</label> | |
<input id="disabled-input" type="text" value="Disabled text input" disabled> | |
</div> | |
<div> | |
<label for="required-input">Required input <span class="required">*</span></label> | |
<input id="required-input" type="text" required aria-required="true"> | |
</div> | |
<div> | |
<label for="email-input">Email input</label> | |
<input id="email-input" type="email"> | |
</div> | |
<div> | |
<label for="search-input">Search input</label> | |
<input id="search-input" type="search"> | |
</div> | |
<div> | |
<label for="tel-input">Tel input</label> | |
<input id="tel-input" type="tel"> | |
</div> | |
<div> | |
<label for="url-input">URL input</label> | |
<input id="url-input" type="url" placeholder="http://"> | |
</div> | |
<div> | |
<label for="password-input">Password input</label> | |
<input id="password-input" type="password" value="password"> | |
</div> | |
<div><label for="select-field">Select field</label> | |
<select id="select-field"> | |
<option selected="selected">Option 01</option> | |
<option>Option 02</option> | |
</select> | |
</div> | |
<div> | |
<label for="select-field-grouped">Select field grouped</label> | |
<select id="select-field-grouped"> | |
<optgroup label="Group 1"> | |
<option>Option 1</option> | |
<option>Option 2</option> | |
</optgroup> | |
<optgroup label="Group 2"> | |
<option>Option 3</option> | |
<option>Option 4</option> | |
<option>Option 5</option> | |
</optgroup> | |
<optgroup label="Group 3"> | |
<option>Option 6</option> | |
<option>Option 7</option> | |
<option>Option 8</option> | |
</optgroup> | |
<optgroup label="Group 4"> | |
<option>Option 9</option> | |
<option>Option 10</option> | |
</optgroup> | |
</select> | |
</div> | |
<div> | |
<label for="multiple-select-field">Multiple select field</label> | |
<select id="multiple-select-field" multiple size="5"> | |
<option>Option 1</option> | |
<option>Option 2</option> | |
<option>Option 3</option> | |
<option>Option 4</option> | |
<option>Option 5</option> | |
<option>Option 6</option> | |
<option>Option 7</option> | |
<option>Option 8</option> | |
<option>Option 9</option> | |
<option>Option 10</option> | |
</select> | |
</div> | |
<div> | |
<label for="radio-input"> | |
<input id="radio-input" type="radio" name="rad"> Radio input | |
</label> | |
</div> | |
<div> | |
<label for="radio-input1"><input id="radio-input1" type="radio" name="rad1"> Radio input</label> | |
<label for="radio-input2"><input id="radio-input2" type="radio" name="rad1"> Radio input</label> | |
<label for="radio-input3"><input id="radio-input3" type="radio" name="rad1"> Radio input</label> | |
</div> | |
<div> | |
<label for="checkbox-input"> | |
<input id="checkbox-input" type="checkbox"> Checkbox input | |
</label> | |
</div> | |
<div> | |
<label for="file-input">File input</label> | |
<input id="file-input" type="file"> | |
</div> | |
<div> | |
<label for="textarea">Textarea</label> | |
<textarea id="textarea" cols="30" rows="5" >Textarea text</textarea> | |
</div> | |
<div> | |
<label for="color-input">Color input</label> | |
<input id="color-input" type="color" value="#000000"> | |
</div> | |
<div> | |
<label for="number-input">Number input</label> | |
<input id="number-input" type="number" value="5" min="0" max="10"> | |
</div> | |
<div> | |
<label for="range-input">Range input</label> | |
<input id="range-input" type="range" value="0" min="0" max="100" oninput="rangeout.value = this.value"> | |
<output name="rangeout" for="range-input">0</output> | |
</div> | |
<div> | |
<label for="date-input">Date input</label> | |
<input id="date-input" type="date"> | |
</div> | |
<div> | |
<label for="month-input">Month input</label> | |
<input id="month-input" type="month"> | |
</div> | |
<div> | |
<label for="week-input">Week input</label> | |
<input id="week-input" type="week"> | |
</div> | |
<div> | |
<label for="time-input">Time input</label> | |
<input id="time-input" type="time"> | |
</div> | |
<div> | |
<label for="datetime-input">Datetime input</label> | |
<input id="datetime-input" type="datetime"> | |
</div> | |
<div> | |
<label for="datetime-local-input">Datetime-local input</label> | |
<input id="datetime-local-input" type="datetime-local"> | |
</div> | |
</fieldset> | |
<input type="submit" value="Submit form"> | |
</form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment