HTML5 Tutorial - HTML Forms Control Element

In the previous two chapters we have been introduces with HTML form and form attributes. Now in this chapter we will study about the HTML form control element and it’s type.

The <input> Element

The <input> element is the most important element form element. The reason is that <input> element can be used in several different ways with the help of ‘type’ attribute. The simplest use of input element is text input which is described in the below example:

<form action = "update.php">
   First Name:
    <input type = "text" name = "f_name" /><br /><br />
   Last Name:
    <input type = "text" name = "l_name" /><br /><br />
    <input type = "submit" name = "name"/>
  </form>

Note: If input element is used without type attribute or type attribute is omitted then the input field type becomes ‘text’ by default.

The <select> Element

The <select> element defines the drop-down list of one or multiple options. Options for the drop-down list can be defined with the <option> element which is nested inside the <select> element just like below example.

<form action = "update.php">
   <select name = "fruits">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

In the above example you can see the first option is selected by default. To change the pre-defined selected option without changing the order of options, add the ‘selected’ attribute to the option.

<form action = "update.php">
   <select name = "fruits">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry" selected>Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

Multiple Selection Options

In the above example only one option can be selected at once. To allow the multiple section at once use the multiple attribute inside the <select> element. 

<form action = "update.php">
   <select name = "fruits" multiple>
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

Visible Values

In above example seven values are presented in the drop-down list but only four values are visible. To change the number of visible options add the ‘size’ attribute in the <select> element and give value of size in number. Let say if the size = 6 then 6 option will be visible. Example describe more clearly.

<form action = "update.php">
   <select name = "fruits" multiple size = "6">
    <option value = "Apple">Apple</option>
    <option value = "Banana">Banana</option>
    <option value = "Cherry">Cherry</option>
    <option value = "Guava">Guava</option>
    <option value = "Grapes">Grapes</option>
    <option value = "Mango">Mango</option>
    <option value = "Strawberry">Strawberry</option>
   </select>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

The <textarea> Element.

Text input element defines single line input but unlike input element <textarea> defines the multiline text input field like a text area. Check the example

<form action = "update.php">
   <textarea rows = "3" cols = "40">This is the example of textarea. Textarea defines multi-line input text field.</textarea>
   <br />
   <br />
   <input type = "submit" name = "name"/>
  </form>

The ‘rows’ attribute defines the visible number of lines in text area.

The ‘cols’ attribute defines the visible width of a text area.

In the bottom right corner of the textarea two diagonal lines can be seen. Take the mouse pointer over those lines, left click &amp; hold and drag to change it’s size.

You can change the size of a textarea

This is the example of textarea. Textarea defines multi-line input text field.

The <button> Element

The button element defines a clickable button on the webpage. Check below example

Do not forget to specify the ‘type’ attribute for the button element just because different browsers may have the different default types for button element.

<button type = "button" onclick = "alert('Hello Peogrammers!');">Click Me!</button>

In above example button type is ‘button’ which execute the ‘Java script’ functions. If we use ‘submit’ instead of ‘button’ then it acts like a submit button inside the forms which execute the server-side scripts like PHP scripts etc.

<form action = "update.php">
   First Name:
    <input type = "text" name = "f_name" /><br /><br />
   Last Name:
    <input type = "text" name = "l_name" /><br /><br />
    <button type = "submit" name = "name">Submit</button>
  </form>

HTML5 Tutorial - HTML Forms Control Element

Related Topics