|
CS479/579 - Web Programming II
|
Displaying ./code/HTML/input.html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta charset='utf-8'>
<style>
</style>
<script>
</script>
</head>
<body>
<form>
<table>
<tbody>
<tr>
<th colspan=2> Text Fields:
<tr>
<td> Text:
<td> <input type='text' placeholder='Your username' required>
<tr>
<td> Hidden:
<td> <input type='hidden' value='text'>
<tr>
<td> Password
<td> <input type='password'>
<tr>
<td> Search:
<td> <input type='search' value='search'>
<tr>
<td> Tel:
<td> <input type='tel'>
<tr>
<td> URL:
<td> <input type='url'>
<tr>
<td> Email:
<td> <input type='email'>
<tr>
<th colspan=2> Date/time controls:
<tr>
<td> Datetime
<td> <input type='datetime'>
<tr>
<td> Date
<td> <input type='date'>
<tr>
<td> Month
<td> <input type='month'>
<tr>
<td> Week
<td> <input type='week'>
<tr>
<td> Time
<td> <input type='time'>
<tr>
<td> Datetime-local
<td> <input type='datetime-local'>
<tr>
<th colspan=2> A field of spinner control
<tr>
<td> Number
<td> <input type='number'>
<tr>
<th colspan=2> A slider or similar
<tr>
<td> Range
<td> <input type='range' min=0 max=100 value=0 oninput='document.getElementById("p").value=this.value;'> <output id='output'>0</output>
<tr>
<th colspan=2> Misc:
<tr>
<td> Color
<td> <input type='color'>
<tr>
<td> Checkbox
<td> <input type='checkbox'><input type='checkbox'><input type='checkbox'>
<tr>
<td> Radio
<td> <input type='radio' name='r'> <input type='radio' name='r'>
<tr>
<td> File
<td> <input type='file'>
<tr>
<th colspan=2> Buttons
<tr>
<td> Submit
<td> <input type='submit' value='Submit this'>
<tr>
<td> Reset
<td> <input type='reset' value='Reset'>
<tr>
<td> Button
<td> <input type='button' value='The label'>
</tbody>
</table>
<table>
<tbody>
<tr>
<th colspan=2>Buttons
<tr>
<td> Submit:
<td> <button type='submit'> Submit </button>
<tr>
<td> Reset:
<td> <button type='reset'> Reset </button>
<tr>
<td> Button:
<td> <button type='button' onclick='window.scrollTo(0,0);'> Button </button>
</tbody>
</table>
<table>
<tbody>
<tr>
<th colspan=2> Select
<tr>
<td> Select
<td> <select>
<optgroup label='Options group 1'>
<option> Option 1 </option>
<option> Option 2 </option>
<option disabled> Option 3 </option>
<option> Option 4 </option>
<option selected> Option 5 </option>
</optgroup>
<optgroup label='Options group 2'>
<option> Option 6 </option>
<option> Option 7 </option>
<option> Option 8 </option>
<option> Option 9 </option>
<option> Option 10 </option>
<option> Option 11 </option>
<option> Option 12 </option>
</optgroup>
<option> Option 13 </option>
<option> Option 14 </option>
<option> Option 15 </option>
<option> Option 16 </option>
</select>
<tr>
<td> Datalist
<td> <input type='text' list='animals'>
<datalist id='animals'>
<option> Cat </option>
<option> Lions </option>
<option> Tigers </option>
<option> Bears </option>
<option> Dogs </option>
</datalist>
<tr>
<td> Textarea
<td> <textarea rows=5 cols=40></textarea>
<tr>
<td> Progress
<td> <progress id='p' max=100 value=75></progress>
<tr>
<td> Meter
<td> <meter id='m' min=0 max=100 low=10 high=90 value=91></meter>
</tbody>
</table>
<br>
<br>
<br>
<br>
<br>
</form>
</body>
</html>
|