HTML Forms 2023

HTML Forms

What is an HTML form?

(i) An HTML form is a section of a HTML page containing normal content and special
elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those
controls. Users generally "complete" a form by modifying its controls (entering text,
selecting menu items, etc.), before submitting the form to an agent for processing (e.g., to
a Web server, to a mail server, etc.).
(ii) A web form or HTML form on a web page allows a user to enter data that is sent to a
server for processing. Forms can resemble paper or database forms because web users fill
out the forms using checkboxes, radio buttons, or text fields. For example, forms can be
used to enter shipping or credit card data to order a product, or can be used to retrieve
search results from a search engine.

HTML forms are created using the following tags:-

©Juliet 2023 Page 1

 HTML Forms 2023

HTML tags

Opening tag Description Closing tag

<form> Used to create an HTML form </form>
for user input.
<input> Defines an input control. Not required

Input tag attributes include:-

Type, name, value and size.
<textarea> Defines a multi-line text input </textarea>
control
<label> Defines a label for an input </label>
element. Label tag uses “for”
attribute.
<select> Defines a select list (drop-down </select>
list).
<option> Defines an option in a select list </option>
<button> Defines a push button </button>

©Juliet 2023 Page 2

 HTML Forms 2023

An example of an HTML Form

A form can contain input elements like text fields, checkboxes, radio-buttons, password fields
etc. A form can also contain select lists and textarea elements.

The <form> tag is used to create an HTML form as illustrated below:-

< form>
input elements
…..
< /form>

HTML Forms - The Input Element

The most important form element is the input element. The input element is used to select user
information. An input element can vary in many ways, depending on the type attribute. An input
element can be of type text field, checkbox, password, radio button, submit button, and more.

©Juliet 2023 Page 3

 HTML Forms 2023

Examples of HTML form control elements:-

1. Text Fields

<input type="text" /> defines a one-line input field that a user can enter text into.

Example

< form>
<label for=”First name”>First name:</label>< input type="text" name="firstname" /><br />
label for=”Last name”>last name:</label>Last name:< input type="text" name="lastname"
size=”10” />
< /form>

How the HTML code above looks in a browser:

First name:

Last name:

Note:-

(i) SIZE attribute determines the size of the textbox in characters. Default = 20 characters
(ii) MAXSIZE attribute: determines the maximum number of characters that the field will
accept.

2. Password Field

<input type="password" /> defines a password field.

Example

©Juliet 2023 Page 4

 HTML Forms 2023

< form>
Password:< input type="password" name="pwd" />
< /form>

How the HTML code above looks in a browser:

Password:

Note: The characters in a password field are masked (shown as asterisks or circles).

3. Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a
limited number of choices.

Example

< form>
< input type="radio" name="sex" value="male" /> Male<br />
< input type="radio" name="sex" value="female" /> Female
< /form>

How the HTML code above looks in a browser:

Male

Female

4. Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE
options of a limited number of choices.

Example:

©Juliet 2023 Page 5

 HTML Forms 2023

< form>
< input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
< input type="checkbox" name="vehicle" value="Car" /> I have a car
< /form>

How the HTML code above looks in a browser:

I have a bike

I have a car

5. Submit Button

<button type="submit" /> defines a submit button.

A submit button is used to send form data to a server. The data is sent to the page specified in the
form's action attribute. The file defined in the action attribute usually does something with the
received input:

Example:

< form>
Username:< input type="text" name="user" />
< button type="submit" value="Submit"> Submit</button>
< /form>

How the HTML code above looks in a browser:

Submit
Username:

If you type some characters in the text field above, and click the "Submit" button, the browser
will send your input to a page called "html_form_action.asp". The page will show you the
received input.

©Juliet 2023 Page 6

 HTML Forms 2023

6. Drop down menu

A dropdown menu is a toggleable menu that allows the user to choose one value from a
predefined list.

The <select> Element

The <select> element defines a drop-down list:

Example:

<select id="cars" name="cars">

<option value="toyota">Toyata</option>
<option value="subaru">Subaru</option>
<option value="nissan">Nissan</option>
</select>

Note: The <option> element defines an option that can be selected. By default, the first item in
the drop-down list is selected.

Visible Values:-Use the size attribute to specify the number of visible values:

Example:

<select id="cars" name="cars" size=”3”>

<option value="toyota">Toyata</option>
<option value="subaru">Subaru</option>
<option value="nissan">Nissan</option>
</select>

7. Text area

The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited
number of characters, and the text renders in a fixed-width font (usually Courier).

©Juliet 2023 Page 7

 HTML Forms 2023

The size of a text area can be specified by the cols and rows attributes.

Example:

<form>

<p>Post your comments below:</p>

<textarea rows="4" cols="50">

</textarea>

9. Reset Button

<button type="reset" /> defines a reset button.

The Reset button resets the form-data to its initial values.

Command syntax:

<button type="reset" value="Reset">Reset</button>

The attributes of the <FORM> element are:

(i) ACTION: is the URL of the CGI (Common Gateway Interface) program that is going to
accept the data from the form, process it, and send a response back to the browser.
(ii) METHOD: GET (default) or POST specifies which HTTP method will be used to send
the form’s contents to the web server. The CGI application should be written to accept
the data from either method.
(iii)ENCTYPE: determines the mechanism used to encode the form contents. You can leave
this attribute as default (unspecified) unless you are creating a file upload field.
(iv) NAME: is a form name used by VB or JAVA scripts.
(v) TARGET: is the target frame where the response page will show up.

©Juliet 2023 Page 8

 HTML Forms 2023

Common Gateway Interface (CGI)

When the user has finished filling in the form and presses “Submit” the data is sent to the
application on the server specified in the ACTION attribute of the form element.

The application is commonly referred to as a CGI application/program. It resides and runs on

the web server. It is typically but not always stored in a directory called cgi-bin.

The application can be written in any language; however, it must be one supported by your
webserver’s operating system and webserver software.

A very popular language for creating CGI applications is PERL (Practical Extraction Report
Language).

PERL is an interpreted language with rich text manipulation characteristics. Because it is

interpreted its performance compared to a compiled CGI application is slower, thus
negatively affecting server performance. It has been ported to most popular operating
systems and is currently available for most versions of UNIX, Windows NT, and Windows

The actual application is commonly referred to as a script.

CGI Scripts

CGI Scripts process the form's data, and send a response back to the user. They can be
written to calculate numbers as in a sales order. They can format data and put it into a
database such as a mailing list or guest book. Depending on the situation, a CGI Script can be
written to do almost anything

©Juliet 2023 Page 9