HTML: Building a simple form
You add a form to an HTML page using the <form></form> tags. Two common form fields are text fields and password fields. These two form fields are both input elements, where text fields have their type indicated as text and password fields as password. Password fields mask the letters as you type so nobody can observe your password when you are typing. You can specify the width of either field using the size attribute, and you can also pre-fill either field with a default value by specifying a value attribute.
<input type=”password” name=”passOne” size=”20″ value=”Default Value”/>
You can add a label to any form field using the <label></label> tags. You tie a label to its field using the ‘label for’ attribute.
<label for=”textOne”>TextOne: .
</label><input type=”text” name=”textOne”/>
Most forms have a ‘submit’ and a ‘reset’ button. The submit button submits the form. The reset/cancel button resets all the form’s fields to blank or their default value. Submit buttons are input elements of type submit. Reset buttons are input elements of type reset. You assign both buttons’ text label using the name attribute.
<input type=”submit” name=”Submit”/>
<input type=”reset” name=”Cancel”/>
Tab Order
The default tab order is the order in which elements appear in the form. However, in some situations, you might need to alter the tab order. You specify the tab order using the tabindex attribute. You can use the tabindex attribute with the <input>, <a>, <textarea>, <select> and <button> tags; and if you wish to exclude an element from the tabindex, you assign that element’s tabindex value to zero.
<form>
First Field:<input type=”text”
name=”field1″ tabindex=”1″ />
Second Field:<input type=”text”
name=”field2″ tabindex=”3″ />
Third Field:<input type=”text”
name=”field3″ tabindex=”2″ />
</form>
Checkboxes
You use check boxes in two situations. When providing users with a yes or no type question a check box is the most appropriate field element to use.
<input type=”checkbox” name=”mailinglist” value=”true”/>
When providing users with a choice, where they can select one or more choices from several choices, a check box is often appropriate (you can also use a select element). For example, you might ask users what flavour ice-cream they like, giving them the options: chocolate, vanilla and strawberry. They might check none, chocolate only or any combination of the three flavours.
<input type=”checkbox” name=”flavours” value=”chocolate”/>
<input type=”checkbox” name=”flavours” value=”vanilla”/>
<input type=”checkbox” name=”flavours” value=”strawberry”/>
Suppose you select vanilla and chocolate. The vanilla and chocolate check boxes would be submitted. The other check boxes would not.
Check boxes are on or off. When checked, the check box is on and has a value when submitted. When unchecked, the check box is off and is not sent as part of the form submission when submitted. In other words, when unchecked, the check box doesn’t get sent to the server. This is important when you decide to learn how to process forms using a programming language. If you try to process a non existing check box, you end up with a null-pointer exception. You don’t need to worry about this now, just make a mental note to remember this for future reference.
You create a check box using the input element and assigning its type as “checkbox”. You assign its value by setting its value attribute. When checked, the check box value is the value in the attribute. For instance:
<input type=”checkbox” name=”signup” value=”yes”/>
is sent to the server as the name/value pair, signup=yes when submitted. You can specify a check box is checked by default by specifying the attribute checked equal to checked.
<input type=”checkbox” value=”signup” value=”yes” checked=”checked”/>
