Name: HTML Tutorial - 14 - Forms II
Uploaded: 2015-01-26T05:24:04.000Z
Duration: 2 min 48 s
Description: Thousands of YouTube videos with English-Chinese subtitles! Now you can learn to understand native speakers, expand your vocabulary, and improve your pronunciation...

The most useful and common input type is the text field. Like most form elements it requires

the name attribute to be specified and the value attribute will be set to the text that

it contains. Another useful input type is the password

field, which hides its characters from view. For both of these types we can specify an

initial value using the value attribute. We can also change the field's size, which

is measured in number of character, or put a character limit on the field using the maxlength

attribute. The last text field - hidden - is used to

add data to a form without displaying it to the user. Because the user can't change this

input type's value we must specify it in the markup.

Next, we have checkboxes which are used to give multiple choices. If we don't specify

a value a selected checkbox is sent with the value "TRUE". And if the box is unchecked

no value will be sent for this element. With radio buttons only one button in every

group can be checked. To group radio buttons together we just need to give them the same

name. We can also make default selections using the checked attribute.

<textarea> creates a multiline 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.

The last form control we can create are list boxes using the elements <select>, <option>,

and option group <optgroup>. The <select> tag is the container for the

list and gives the list its name. Inside of it we define each list item 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. By default only one option is displayed, making

the list box appear as a dropdown list. We can increase the number of displayed items

using the size attribute, making the list box into a scroll list instead.

To be able to select multiple options, we can enable the multiple attribute.

And to select default options we can use the selected attribute.

The option group tag is used to give a title for a set of options in order to group them

The <fieldset> element creates a border around any form controls in order to group them visually.

We may also provide a label for the fieldset using the <legend> tag.