Tim's Homepage

Html5 Forms

HTML5 Generic Field Attributes
<input type="text" id="autocomplete" autocomplete="on" name="autocomplete" />
<input type="text" autofocus="autofocus" id="autofocus" value="This could be annoying" name="autofocus" />
<input type="text" id="hidden" hidden="hidden" value="Is there a value?" name="hidden" />
<input type="text" id="novalidate" novalidate="novalidate" pattern="[0-9]+" name="novalidate" />
<input type="text" id="pattern" pattern="[0-9]+" name="pattern" />
<input type="text" id="placeholder" placeholder="This is placeholder text" name="placeholder" />
<input type="text" id="required" required="required" name="required" />
HTML5 Input Types
<input type="color" id="color" name="color" value="#91cf63" />
<input type="date" id="date" name="date" value="2020-03-09" />
<input type="time" id="time" name="time" value="00:34" />
<input type="datetime-local" id="datetime-local" name="datetime-local" value="1990-03-09T00:34" />
<input type="month" id="month" name="month" value="2000-01" />
<input type="week" id="week" name="week" value="1985-W23" />
<input type="email" id="email" name="email" value="tim@example.com" />
<input type="number" min="0" max="100" step="5" value="15" id="number" name="number" />
<input type="range" min="0" max="100" step="5" value="15" id="range" name="range" />
<input type="search" id="search" name="search" />
<input type="tel" id="tel" name="tel" value="1-234-567-8900" />
<input type="url" id="url" name="url" value="https://example.com" />
HTML5 Form Elements
<progress value="40" max="100" name="progress"></progress>
<meter value="92" min="0" low="5" high="90" max="100" name="meter"></meter>
<input type="text" id="dlist" list="datalist" name="dlist" />
<datalist id="datalist" name="datalist">
<option value="foo">Foo</option>
<option value="bar">Bar</option>
<option value="baz">Baz</option>
</datalist>
Traditional Form Elements
<button type="button" name="button">Button Element</button>
<button type="reset" id="reset_btn" name="reset_btn">Reset Button</button>
<button type="submit" id="submit_btn" name="submit_btn">Submit Button</button>
<select id="select" name="select">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
<select id="select_opt" name="select_opt">
<optgroup label="foo">
	<option value="1">Option 1</option>
	<option value="2">Option 2</option>
	<optgroup label="foo.foo">
		<option value="foo1">Foo 1</option>
		<option value="foo2">Foo 2</option>
	</optgroup>
</optgroup>
<optgroup label="bar">
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</optgroup>
</select>
<select id="multiple" name="multiple" multiple="multiple">
<option>Foo</option>
<option>Bar</option>
<option>Baz</option>
</select>
<textarea rows="10" cols="40" id="textarea" name="textarea"></textarea>
Traditional Generic Field Attributes
<input type="text" id="readonly" readonly="readonly" name="readonly" value="Readonly" />
<input type="text" id="disabled" disabled="disabled" name="disabled" value="Disabled" />
Traditional Input Types
<input type="button" name="button" id="input_button" value="Button input type" />
<input type="checkbox" name="check" id="checkbox" value="checked" checked="checked" />
<input type="file" name="file" id="file" />
<input type="file" id="file_multiple" name="file_multiple" multiple="multiple" />
<input type="hidden" id="hidden_input" name="hidden_input" value="hidden value" />
<input type="image" name="img" id="img" src="/images/Title.png" alt="Tim's Home Page" />
<input type="password" name="password" id="password" value="password" />



<br />
<label for="radio1">Option 1:</label>
<input type="radio" name="rad" id="radio1" value="1" />
<br />
<label for="radio2">Option 2:</label>
<input type="radio" name="rad" id="radio2" value="2" checked="checked" />
<br />
<label for="radio3">Option 3:</label>
<input type="radio" name="rad" id="radio3" value="3" disabled="disabled" />
<input type="reset" id="reset" value="Reset" name="reset" />
<input type="submit" id="submit" value="submit" name="submit" form="html5_form" />
<input type="text" id="text" value="text" name="text" />