<form>
<fieldset>
<legend>Inputs as descendents of labels (form legend)</legend>
<label>
<b>Text input</b>
<input type="text" value="default value">
</label>
<label>
<b>Email input</b>
<input type="email">
</label>
<label>
<b>Search input</b>
<input type="search">
</label>
<label>
<b>Tel input</b>
<input type="tel">
</label>
<label>
<b>URL input</b>
<input type="url" placeholder="http://">
</label>
<label>
<b>Password input</b>
<input type="password" value="password">
</label>
<label>
<b>File input</b>
<input type="file">
</label>
<label>
<b>Radio input</b>
<input type="radio" name="rad">
</label>
<label>
<b>Checkbox input</b>
<input type="checkbox">
</label>
<label>
<input type="radio" name="rad"> Radio input
</label>
<label>
<input type="checkbox"> Checkbox input
</label>
<label>
<b>Select field</b>
<select>
<option>Option 01</option>
<option>Option 02</option>
</select>
</label>
<label>
<b>Textarea</b>
<textarea cols="30" rows="5" >Textarea text</textarea>
</label>
</fieldset>
<fieldset>
<legend>Clickable inputs and buttons</legend>
<input type="image" src="http://placekitten.com/90/24" alt="Image (input)">
<input type="reset" value="Reset (input)">
<input type="button" value="Button (input)">
<input type="submit" value="Submit (input)">
<button type="reset">Reset (button)</button>
<button type="button">Button (button)</button>
<button type="submit">Submit (button)</button>
</fieldset>
<fieldset id="boxsize">
<legend>box-sizing tests</legend>
<div><input type="text" value="text"></div>
<div><input type="email" value="email"></div>
<div><input type="search" value="search"></div>
<div><input type="url" value="http://example.com"></div>
<div><input type="password" value="password"></div>
<div><input type="color" value="#000000"></div>
<div><input type="number" value="5"></div>
<div><input type="range" value="10"></div>
<div><input type="date" value="1970-01-01"></div>
<div><input type="month" value="1970-01"></div>
<div><input type="week" value="1970-W01"></div>
<div><input type="time" value="18:23"></div>
<div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
<div><input type="datetime-local" value="1970-01-01T00:00"></div>
<div><input type="radio"></div>
<div><input type="checkbox"></div>
<div><select><option>Option 01</option><option>Option 02</option></select></div>
<div><textarea cols="30" rows="5">Textarea text</textarea></div>
<div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div>
<div><input type="submit" value="Submit (input)"></div>
<div><button type="reset">Reset (button)</button></div>
<div><button type="button">Button (button)</button></div>
<div><button type="submit">Submit (button)</button></div>
</fieldset>
</form>
<form>
<fieldset>
<legend>Inputs as descendents of labels (form legend)</legend>
<label>
<b>Text input</b>
<input type="text" value="default value">
</label>
<label>
<b>Email input</b>
<input type="email">
</label>
<label>
<b>Search input</b>
<input type="search">
</label>
<label>
<b>Tel input</b>
<input type="tel">
</label>
<label>
<b>URL input</b>
<input type="url" placeholder="http://">
</label>
<label>
<b>Password input</b>
<input type="password" value="password">
</label>
<label>
<b>File input</b>
<input type="file">
</label>
<label>
<b>Radio input</b>
<input type="radio" name="rad">
</label>
<label>
<b>Checkbox input</b>
<input type="checkbox">
</label>
<label>
<input type="radio" name="rad"> Radio input
</label>
<label>
<input type="checkbox"> Checkbox input
</label>
<label>
<b>Select field</b>
<select>
<option>Option 01</option>
<option>Option 02</option>
</select>
</label>
<label>
<b>Textarea</b>
<textarea cols="30" rows="5" >Textarea text</textarea>
</label>
</fieldset>
<fieldset>
<legend>Clickable inputs and buttons</legend>
<input type="image" src="http://placekitten.com/90/24" alt="Image (input)">
<input type="reset" value="Reset (input)">
<input type="button" value="Button (input)">
<input type="submit" value="Submit (input)">
<button type="reset">Reset (button)</button>
<button type="button">Button (button)</button>
<button type="submit">Submit (button)</button>
</fieldset>
<fieldset id="boxsize">
<legend>box-sizing tests</legend>
<div><input type="text" value="text"></div>
<div><input type="email" value="email"></div>
<div><input type="search" value="search"></div>
<div><input type="url" value="http://example.com"></div>
<div><input type="password" value="password"></div>
<div><input type="color" value="#000000"></div>
<div><input type="number" value="5"></div>
<div><input type="range" value="10"></div>
<div><input type="date" value="1970-01-01"></div>
<div><input type="month" value="1970-01"></div>
<div><input type="week" value="1970-W01"></div>
<div><input type="time" value="18:23"></div>
<div><input type="datetime" value="1970-01-01T00:00:00Z"></div>
<div><input type="datetime-local" value="1970-01-01T00:00"></div>
<div><input type="radio"></div>
<div><input type="checkbox"></div>
<div><select><option>Option 01</option><option>Option 02</option></select></div>
<div><textarea cols="30" rows="5" >Textarea text</textarea></div>
<div><input type="image" src="http://placekitten.com/90/24" alt="Image (input)"></div>
<div><input type="reset" value="Reset (input)"></div>
<div><input type="button" value="Button (input)"></div>
<div><input type="submit" value="Submit (input)"></div>
<div><button type="reset">Reset (button)</button></div>
<div><button type="button">Button (button)</button></div>
<div><button type="submit">Submit (button)</button></div>
</fieldset>
</form>
{
"siteName": "siteName",
"siteUrl": "/"
}
There are no notes for this item.