Code. Form Elements.
w3.org - Forms in HTML documents
w3schools.com - HTML FORM TAG
Form
<form action="#" method="post"> .................. </form>
A form requires attribute 'action' together with a value. If 'method' is declared, it requires a value.
Textbox, textfield
<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 drop-down
<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>
Button
Button minimal
<input type="submit" value="Click Here" />
Button with hover effect
<input class="button-2" type="submit" value="Click!" />
body{
behavior:url("/content/web-development/form-elements/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
Button with moving effect
<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;
}
Button with image
<input alt="button beer" src="beer.gif" title="Click for Beer" type="image" />
Checkbox
A simple checkbox
A: B:
A: <input type="checkbox" /> B: <input type="checkbox" />
Clear ticked checkboxes, JavaScript
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>
Clear preselected checkboxes, JavaScript
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>
Radio
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
Label
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
<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.
- overflow:visible; - Default. The content is not clipped. It renders outside the element.
- overflow:hidden; - The content is clipped, but the browser does not display a scroll-bar to see the rest of the content.
- overflow:scroll; - The content is clipped, but the browser displays a scroll-bar to see the rest of the content.
- overflow:auto; - If the content is clipped, the browser should display a scroll-bar to see the rest of the content.
2008
Web Development - XHTML CSS JavaScript jQuery.