HTML Forms
HTML Forms

Forms are used in HTML to pass data. On the web, data is typically passed as a
key-value pair. For example, the following URL:

http://www.xyz.com/example?c=1&d=title

has two separate key-value pairs, separated by ‘&’. The key for the first
key-value pair is ‘c’, and the value is ‘1’. The key for the second key-value pair is
‘d’, and its value is ‘title’.

How are key-value pair specified? They are specified by the <form> tag.
The general format is as follows:

<form action=xxx>

[section specifying the value for each key]

<input type=submit value=Go>

</form>

The text after action= specifies the script to be executed after the user submits the
information. <input type=submit> gives a button that the user clicks when she is
ready to submit the information. The value=Go piece specifies the text appearing on the
button, in this case ‘Go’. This is shown below:

Text Input

One way users can enter data into a HTML document is via text. The most common scenario is when users have to enter a username and password to enter a site. There are three common types of text input:

  • text: In this type of input, we get a single-line text box to enter data. The texts typed appear directly on the web page.The syntax is <input type=text name=c>. Here, the key for this text input value is ‘c’. Below is an example:Text example:
  • password: In this type of inpu, we get a single-line text box to enter data. The text typed do not appear directly on the web page.The syntax is <input type=password name=pwd>. Here, the key for this password input is ‘pwd’. Below is an example:Text example:
  • textbox: In this type of input, we get a multi-lin text book to enter data. The texts typed appear directly on the web page.The syntax is <textarea rows=[row height] name=area>. The key for this textarea input is ‘area’. Below is an example, with [row height] = 2:Text area example:

Radio Button

A second type of input is the radio button. Radio buttons are used when you want users to be able to select one and only one of the options. Below is an example:

Code:
<input type=”radio” name=”color” value=”red”>Red<br>
<input type=”radio” name=”color” value=”green”>Green<br>
<input type=”radio” name=”color” value=”blue”>Blue<br>

Red
Green
Blue

In this case, the key is color, and the values can be either red, green, or blue, depending on the radio button selected.

If we want to pre-select a radio button, we’ll specify “selected” at the end of the <input> tag, such as follows:

<input type=”radio” name=”color” value=”red” selected>Red<br>

Checkbox

Another type of input is the check box. Check boxes are used when you want users to be able to select more than one of the options. Below is an example:

Code:
<input type=”checkbox” name=”color” value=”red”>Red<br>
<input type=”checkbox” name=”color” value=”green”>Green<br>
<input type=”checkbox” name=”color” value=”blue”>Blue<br>

Red
Green
Blue

In this case, the key is color, and the values can be either red, green, or blue, depending on the check box(es) selected. If multiple check boxes are checked, the “color” key will then have multiple values.

If we want to pre-select a check box, we’ll specify “checked” at the end of the <input> tag, such as follows:

<input type=”checkbox” name=”color” value=”red” checked>Red<br>

Drop Down Menu

Drop down menu is another common way to specify input data. For example, selecting a state is often done via a drop down menu. Users can select one or more items in a drop-down menu. Below is an example for a single-selection drop down menu:

Code:

<select name=color>

<option value=”red”>Red</option>

<option value=”green”>Green</option>

<option value=”blue”>Blue</option>

In this case, the key is color, and the values can be either red, green, or blue, depending on the item selected.

If we want to pre-select a check box, we’ll specify “selected” at the end of the
<input> tag, such as follows:

<input type=”checkbox” name=”color” value=”red” selected>Red<br>

If we want to select multiple items, we specify “multiple” at the end of the
<select> tag, i.e.,

<select name=color multiple>

About the author

Aku masih ingin melihat kembali lagi ke belakang, karna Aku masih ingin melihat dengan jernih apa yang tidak bisa aku lihat pada saat itu.

Hours & Info
62-81-263-629999
Lunch: 11am - 2pm
Dinner: M-Th 5pm - 11pm, Fri-Sat:5pm - 1am
%d bloggers like this: