Subtitles section Play video
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
together.
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.