News & UpdatesProgrammingWeb programming Store My Projects
Links
Affiliates

HTML Tutorial – 14 – Forms II

Text and password fields

The most useful and common input type is the text field. Like most form elements it requires the name attribute to be specified. The value attribute will be set to the text that the user inputs into the field.

<input type="text" name="txt">

Another useful input type is the password field, which hides its characters from view.

<input type="password" name="pass">

For both the text and password types an initial value can be specified using the value attribute.

<input type="text" name="txt" value="default text">

The size of the field can be changed with the size attribute to a specific number of characters. Moreover, a character limit on the field can be set using the maxlength attribute.

<input type="text" name="txt" size="50" maxlength="75">

Hidden field

The last text field, hidden, is used to add data to a form without displaying it to the user. Because the user cannot change this input type’s value it must be specified in the markup.

<input type="hidden" name="secure" value="hidden text">

Check boxes

Check boxes are used to give the user multiple choices. If no value is set a selected check box will be sent with the value “TRUE” and if the box is unchecked no value will be sent for that element.

<input type="checkbox" name="c1" value="1">
<input type="checkbox" name="c2" value="2">
<input type="checkbox" name="c3" value="3">

Radio buttons

With radio buttons only one button in every group can be checked. To group radio buttons together they need to be given the same name.

<input type="radio" name="group" value="1">
<input type="radio" name="group" value="2">
<input type="radio" name="group" value="3">

Default selections can be made using the checked attribute for both the checkbox and radio types.

<input type="checkbox" checked="checked">

Textarea

The <textarea> form element creates a multi-line text box. The text between the tags is the default content and the size of the area is given with the cols and rows attributes.

<textarea cols="50" rows="5">initial text</textarea>

List boxes

The last form control is the list box, which is created using the elements: <select>, <option> and <option group>. The <select> tag is the container for the list and gives the list its name. Inside of it each list item is defined using the <option> element. If no value attribute is assigned the content of the <option> element will be sent as the value if that option is selected.

<select name="list">
 <option>first</option> 	
 <option>second</option>
 <option selected="selected">third</option>
</select>

By default, only one option is displayed, making the list box appear as a drop down list. The number of displayed items can be increased using the size attribute, making the list box into a scroll list instead. To be able to select multiple options the multiple attribute can be enabled. To select default options the selected attribute can be used.

<select name="list" size="3">
 <optgroup label="Listbox items">
  <option>first</option> 	
  <option>second</option>
  <option selected="selected">third</option>
 </optgroup>
</select>

The option group element <optgroup> is used to give a title for a set of options in order to visually group them together.

<select name="list">
 <optgroup label="Listbox items">
  <option>first</option> 	
 </optgroup>
</select>

Fieldset

The fieldset element creates a border around any form controls in order to group them visually. A label may be provided for the fieldset using the <legend> element.

<fieldset>
 <legend>Title</legend>
 <input type="text" name="txt">
</fieldset>
Recommended additional reading:
Sams - Teach Yourself HTML and CSS in 24 Hours