w3.org - Forms in HTML documents
w3schools.com - HTML FORM TAG
<form action="#" method="post"> .................. </form>
A form requires attribute 'action' together with a value. If 'method' is declared, it requires a value.
<input name="#" onfocus="if(this.value==this.defaultValue){this.value='';}" size="15" type="text" value="foo-boo" />
<input maxlength="6" name="#" style="width:222px;" type="password" value="1234567890" />
Maxlength limits the amount of characters. Size sets the width of the textbox and is overriden by the style.
<select name="#"> <option value="1">01</option> <option value="2" selected="selected">02</option> <option value="3">03</option> </select>
hold down 'ctrl' to select more than one
<select multiple="multiple" name="#"> <option value="1">tea</option> <option value="2">coffee</option> <option value="3">cacao</option> </select>
<input type="submit" value="Click Here" />
<input class="button-2" type="submit" value="Click!" />
body{
behavior:url("ie-hover.htc");
}
.button-2{
background:#ccc;
}
.button-2:hover{
background:#bbb;
}
File ie-hover.htc in body selector makes IE6 respond to any hovers, otherwise it recognises link hovers (a:hover) only. ie6 hover htc download
<input class="button width" title="click here!" type="submit" value="Submit" />
.button-3{
background:#bad;
border:none;
color:#ff0;
height:22px;
padding-bottom:2px;
*padding-top:2px;
width:100px;
}
.button-3:hover{/*button animation, optionally play with top-left and bottom-right borders*/
left:1px;
position:relative;
top:1px;
}
input{/*trims elements horisontally*/
vertical-align:baseline;
}
<input alt="button beer" src="beer.gif" title="Click for Beer" type="image" />
A: B:
A: <input type="checkbox" /> B: <input type="checkbox" />
Clicking on the link clears ticked checkboxes. The thing requires <form> with name="foo", and can't have any checked="checked"
<form name="foo" action="#"> <input type="checkbox" />... <input type="checkbox" />... <input type="checkbox" />... <input type="checkbox" />... <input type="checkbox" />... <a href="javascript:document.foo.reset()">clear all ticked boxes</a> </form>
All checkboxes are preselected, clicking on the link clears them all.
... ... ... ... ... clear all boxes
<input type="checkbox" id="check0" checked="checked" />... <input type="checkbox" id="check1" checked="checked" />... <input type="checkbox" id="check2" checked="checked" />... <input type="checkbox" id="check3" checked="checked" />... <input type="checkbox" id="check4" checked="checked" />... <a href="#" onclick="uncheck()">clear all boxes</a>
<script type="text/javascript">
//<![CDATA[
function uncheck(){
for (i = 0; i <= 4; i++){
document.getElementById('check'+ i).checked = false;
}
}
//]]>
</script>
Has to have attribute "name" with some value in order to work, name="foo" name="#" whatever.
Tea
Coffee
Cacao
<input name="foo" type="radio" value="a" /> Tea <input checked="checked" name="foo" type="radio" value="b" /> Coffee <input name="foo" type="radio" value="c" /> Cacao
Encapsuling radio or checkbox in between <label> and </label> enables to check them even by clicking on text.
For IE6 add both for="foo1" and id="foo1".
<label for="foo3"><input id="foo3" type="radio" name="#" />Herradura Mango Mojito</label>
Good Practice - don't piggyback label tags for positioning.
<textarea cols="50" rows="8">Hallooo....</textarea>
For Safari, set rows="6" at least, if less, the scrollbar does not fit in.
While placing a textarea somewhere in to a fixed-width thing, (and using overflow:auto;), reserve some space for the scrollbar. I.e. set the width of the textarea less for 2 cols.
Textarea requires cols and rows. Width and height set in style sheet override them.
<textarea cols="9" name="#" rows="3" style="background-color:#ff0;background-image:url(beer.gif);color:#00f;padding:11px;border:1px solid red;"></textarea>
Scrollbar color. The CSS colored scrollbars are visible in IE, not in FF.
If the content of an element overflows its area.