Form


Form is a very important component of the web, as the website become more interactive, it is very common to have a visitor complete a website feedback form and immediately the submit button is click the data supply by the user is sent to the company (that owns the website) email or even in a more structure and secure storage location such as a database.

Although form is use for so much more, you can see the Google search engine, collect your search query via a web form to perform its search operation; besides this, the web is now use to build business or enterprise applications that really heavily on web forms.

You use the <FORM> tag to create a form, although you will have to setting its ACTION and METHOD parameter. The lines of code below show a typical example of this.

<FORM ACTION="enquiry.php" METHOD="POST">
</FORM>

The METHOD parameter can either have a POST or GET value, but the common choice for a typical form with sensitive data and unlimited information is the POST method as the GET method data is attached to the address bar of your web browser.

The ACTION parameter specify the page the form will be posting or submitting the data within the form to, in the example above it is “enquiry.php” page, typically this page will have a program that will carry out an operation using the data supplied to it.
PHP will be explained later in this book.

The <FORM> tag above will contain one or more form element or component for to be useful, below are some of the common FORM elements

Elements

Description

Textbox

it is use to collect (input) a single line text

Password

it is use to collect a line confidential (password) text

Textarea

it is use to collect (input) a multiple line text (larger information)

Check box

A square-like box for choosing more than one itemized data e.g hobby

Radio box

A circle-like element for choosing one item itemized data e.g gender

File

Its use to upload file

Select

Provides a drop down selection list to choose from

Hidden

To hold hidden data, it may not be visible but it can be very handy as we will see later. In the PHP chapter, later in this book

Submit button

To submit the content of a form

Reset button

To clear the content of a form

 

 
Textbox
 <INPUT TYPE="TEXT"> it is use to collect (input) a single line text, which is best use for collecting limited and insensitive data such as a name, text field must be added within the <FORM> tag.
See example below:

<HTML>
<HEAD>
<TITLE>Form Examples </TITLE>
</HEAD>
<BODY>
<FORM ACTION=”enquiry.php” METHOD=”POST”>
Enter your name: <INPUT TYPE="TEXT">
</FORM>
</BODY>
</HTML>

The browser view



Password field
<INPUT TYPE="PASSWORD"> is almost similar to Text field except that it is use to collect sensitive or password data credit card pin among other; data is being enter into it, it is not visible to the public view.  See example below:


<HTML>
<HEAD>
<TITLE>Form Examples </TITLE>
</HEAD>
<BODY>
<FORM ACTION=”enquiry.php” METHOD=”POST”>
Enter your name: <INPUT TYPE="TEXT">
<BR>
Enter your password: <INPUT TYPE="PASSWORD">
</FORM>
</BODY>
</HTML>

When you view this example on your browser, you may not easily spot the difference between both elements, until you start filling the form, which should look like the one below:



Textarea
<TEXTAREA COLS="50" ROWS="10"></TEXTAREA> unlike textbox, textarea can hold larger content such as address, or e-mail compose message. See example below:

<FORM ACTION=”enquiry.php” METHOD=”POST”>
Enter your name: <INPUT TYPE="TEXT">
<BR>
Enter your password: <INPUT TYPE="PASSWORD">
<BR>
Enter your address: <BR>
<TEXTAREA COLS="50" ROWS="10"></TEXTAREA>



The browser view

You must have noticed that this element is quite different from the two explained above, first its tag is <TEXTAREA> and I go further to set its common two optional parameter COLS=50, this means that in width it can take 50 character while ROWS=10 specify that it height can contain 10 line of text, this settings does not limit the number of text the Textarea can take, as it only make it look bigger in the browser, the more you enter data into the Textarea element its scroll button will be active as so that you could scroll down to see all the  information it contains.



Check box
<input type="checkbox"> this element is quite different in look, function and characteristic compare to the other elements above. This element is useful if you want your site user to choose more than one item or choice from a multiple option, For example you want your site visitors to choose from your services the one’s they love, and they can decide to pick one, two or even all of them.

Another example in a case where you design a website for job applicant to apply, you may want them to select how they come to know about the job offers, your choice may include; TV, Internet ads, news paper or radio, this mechanism can actually help you the website owner to know your most active advertising media, so that you can focus more your limited resources to only the effective advertising medium. The website visitor must have seen it on the TV and also on internet ads, therefore he or she can tick or check both option. Now let’s see how to create the checkbox below:
   
<FORM ACTION=”enquiry.php” METHOD=”POST”>
Enter your name: <INPUT TYPE="TEXT">
<BR>
<p>How do you know about this job over? </p>
<p>
<input type="checkbox" name="job" value="Through the TV" />
TV:</p>
<p>
<input type="checkbox" name=" job" value="Through the Internet" />
Internet ads:</p>
<p>
<input type="checkbox" name=" job" value="Through the Radio" />
Radio:</p>
</FORM>

The browser view of the code above would appear as we have in the screenshot below:


Despite my years as an IT instructor, I still find it quite challenging explaining checkbox to a beginner, probably because this is one out of the two form element that user or site visitors don’t really enter its data, so how does it work?
Let’s take a closer look at some of the checkbox code

<input type="checkbox" name="job" value="Through the TV" />
TV:
<input type="checkbox" name=" job" value="Through the Internet" />
Internet ads:

 
You will notice that after the checkbox tag <input type="checkbox", then comes the “name” parameter name=" job", actually every form elements including the ones discuss earlier are suppose to have a NAME parameter so that they can be access for processing; we will discuss how to process form later in the PHP section.

But I decided to use the NAME parameter in this checkbox example to explain that the NAME parameter value “JOB” are use to group all the checkboxes. That is both checkboxes are related or group as “JOB”.

It may interest you to know that the CHECKBOX elements data or value are hand-coded (that is, its data or value is written by the web designer or programmer during the web design process), this is done with the VALUE parameter, using our example, the first checkbox if chosen will send the text “Through the TV” to the submit page or website owner.  

<input type="checkbox" name="job" value="Through the TV" />

So it is not really the text “TV” in front or close to the checkbox that is posted or submitted to the website owner.

 

Radio button
<input type="radio"> everything you learnt about checkbox, is also applicable to radio box, except that radio button can only permit you to pick or check one option from it group, the common use of radio box is where you want a site visitor to choose or check it gender, which can be either male or female, let see an example below:

<FORM ACTION=”enquiry.php” METHOD=”POST”>
Choose your gender :< /p>
<p>Male: <input type="radio" name="sex" value="Male" />
</p>
<p>Female: <input type="radio" name=" sex" value="Female" /></p>
</FORM>


The browser view

Note: the RADIO button parameter group NAME “SEX” will not allow you to pick or choose both RADIO button options, therefore you can only pick either male or female.



File

This FORM element or control allow your visitor to upload a file such as their picture or any other file; below is how to use it:

<FORM ACTION="enquiry.php" METHOD="POST" enctype="multipart/form-data">
<p>Upload your picture: <input type="file"> </p>
</FORM>

In the sample code above the FILE tag <input type="file">  may be responsible for what you see on your web browser, but you will also notice the new addition to the FORM tag enctype="multipart/form-data"  this is necessary for the file upload to work. We will discuss how this works later in the PHP.

 

Select
The select element is use to create a dropdown list where the website visitors can choose an option from.

The select element is more handy (compare to checkbox and radio box) where the item to select from is much, it can provide more select items or options without occupying much space, as compare to checkbox and radio box. A typical use of the element is where you want your website visitor to select their country, from a dropdown list. Let’s see how to do this.


<FORM ACTION="enquiry.php" METHOD=”POST”>
<p>
Choose your country
<select name="country">
<option>Nigeria</option>
<option>Ghana</option>
<option>Kenya</option>
<option>Egypt</option>
<option>South Africa</option>
</select>
</p>
</FORM>

The SELECT element, as you can see come with the <OPTION> pair that contains the listed data and I actually include the NAME attribute to the SELECT tag and set its value to “country”. See how the browser view will look like below:



Hidden
<input type="hidden" > Is exactly what it is called “HIDDEN” because it does not appear on your browser views as compare to other elements.

You may wonder “what do I need it for then?” OK! This stuff may look useless for now, but belief me I’ve found it to be one of the most important tool in my career as a web developer.

You can compare it to the text field element discussed earlier except for the fact that you hand-code (or a program such as PHP can dynamically supply) its valued though it may not be visible like the textbox, but it post it value just like the textbox, we will see it important later in the PHP chapter of this book. For now let’s just see how it’s been created.


<FORM ACTION=”enquiry.php” METHOD=”POST”>
</p>
I am not visible:
<input type="hidden" name="who" value="God is invisible but exist">
</FORM>


Submit and Reset Button
<input type="submit"> you can’t imagine a web form with its entire beautiful elements well layout and after your finish filling the form you cannot see the submit button (ultimately you cannot submit), it’s a complete waste of time and effort. So the submit button is essential and a must be in every form even though it’s just a single line of textbox field.

Typically a form as two type of button, the one that submit it elements values <input type="submit" value="Submit Form" /> and the one that clear or reset its elements value <input type="reset" value="Clear Form" /> .

I went back to using the contant.htm page in the “myweb” website we used earlier, to create the feedback form as promised.


<HTML>
<HEAD>
<TITLE>Welcome to BICL website</TITLE>
</HEAD>
<BODY>
<TABLE WIDTH="50" BORDER=0 align="center">
<TR>
<TD COLSPAN=3>
<IMG SRC="images/banner.jpg">
</TD>
</TR>
<TR height="300px">
<TD width="14%" VALIGN=TOP BGCOLOR="#FFFF99">
<b>MY LINK</b> <br />
<a href="index.htm">Home</a><br />
<a href="contact.htm">Contact</a><br />
<a href="about_us.htm">About Us</a>
</TD>
  <TD width="67%" VALIGN=TOP><b>CONTACT US</b>
<p>
     <b>Feedback form </b>
                    
     <FORM ACTION="enquiry.php" METHOD="POST">
     Enter your name: <BR>
     <INPUT TYPE="TEXT" NAME="visitor_name">
     <BR><BR>
     Enter your phone number: <BR>
     <INPUT TYPE="TEXT" NAME="visitor_phone">
     <BR><BR>
     What is your question or comment: <BR>
     <TEXTAREA COLS="50" ROWS="10" NAME="visitor_comment"></TEXTAREA>
     <BR>
     <BR>
     <input type="submit" value="Submit Form" />
     &nbsp; &nbsp; &nbsp;
     <input type="reset" value="Clear Form" />
     </FORM>

  </TD>
  <TD width="19%" VALIGN=TOP bgcolor="#FFFF99">
<b>EMAILS</b> <br />
bicl@bengallery.net <br />
Benjamin.onuorah@gmail.com
  </TD>
</TR>
<TR>
  <TD colspan="3" align="center" BGCOLOR="#FFFF99">
Copyright (2014) Bengallery Integrated Company Ltd.
All rights reserved.
  </TD>
</TR>
</TABLE>
</BODY>
</HTML>


I went through the pain of setting the NAME attribute for the entire element, as I said earlier all your form element must have a name for you to access them or their value (we will see this later in the PHP chapter of this book).
Let’s examine the SUBMIT button first <input type="submit" value="Submit Form" /> the input type="submit" section create the submit button while value="Submit Form" display the text on the button, so you can change the VALUE text to anything you want; may be, “Complete”, “Register” or “Login” as it’s just a text that appear on the submit button. This is the same for the RESET button.
Note also the use of &nbsp; this special character means SPACE is HTML, I enter this three times in between the “submit” and “reset” button to space the two elements.

Below this the browser of the contact page


With this I can said we have come to the end of the HTML chapter of this book, I hope you found the information useful to your learning of HTML, please don’t forget to contact us (see the back cover), I hope you enjoy the next section (Formatting your page with CSS) just as you did with this.

 


Creating webpage with HTML »

META Data »

Background colour »

HTML Versions »

Setting up a website »

Break Line, paragraph and alignment »

Special character, bold, italics, underline and marquee »

Text Formatting »

Listing items and Horizontal rule »

Images »

Tables »

Hyperlink »

Form »