ITS332 - LAB [HTML FORM AND PHP]

HTML FORM
HTML form is used to collect various data and pass it to the server. Those input can be any
type of form ; textfield, checkbox, radio-button, command button, lists, textarea field and label
elements.

The <form> tag is used to create an HTML form :

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

The <form> has several attributes :

 Method - either POST or GET method is used, how the data will be sent from one
page to another
 Action – a php file or specified URL to send the data to

HTML input elements :

The <input> has several attributes :

 type - determines what kind of input field it will be. Possible choices are text,
password, submit
 name - Assigns a name to the given field so that you may reference it later.
 size - Sets the horizontal width of the field. The unit of measurement is in blank
spaces.
 maxlength - Dictates the maximum number of characters that can be entered.

1. TEXTFIELD

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

<form>
My Name is : <input type="text" name="myname" /> <br />
My Tel Number: <input type="text" name="mytelno" />
</form>

How the HTML code above looks in a browser:

My Name is :
My Tel Number :

Note: The form itself is not visible. Also note that the default width of a text field
is 20 characters

1
Page
 ITS332 - LAB [HTML FORM AND PHP]
2. PASSWORD FIELD

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

<form>
Username : <input type = “text” name = “userid” />
Password : <input type="password" name="pwd" />
</form>

How the HTML code above looks in a browser:

Username :
3.
Password :

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

5. HIDDEN FIELD

Hidden fields are not displayed by the browser, there are a number of uses for them.
Usually when dealing with database, you want to pass along information to your
database that may have already received from the user. A hidden HTML field is used
to pass along variable with values from ne form to another page without user to re-
enter the information. Use the type attribute to specify a hidden field.

<input type="hidden" /> to specify a hidden field

<form>
<input type = “hidden” id = “stuid” name = “stuid” />
</form>

Use the id or name attribute to specify a name for your hidden field. This hidden field
will not be displayed by your browser. The value will be passed from one form to
another page without user re-enter it.

6. RADIO BUTTON

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

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

2
Page
 ITS332 - LAB [HTML FORM AND PHP]
How the HTML code above looks in a browser:

Male
Female

Attributes that are important that relate to radio button :

 value - specifies what will be sent if the user chooses this radio button. Only one
value will be sent for a given group of radio buttons.
 name - defines which set of radio buttons that it is a part of.
 By using the checked attribute, we can tell our form to automatically "check" a
default radio.

<form>
<input type="radio" name="gender" value="male" checked=”yes”/>
Male <br />
<input type="radio" name="gender" value="female" /> Female
</form>

7. CHECK BOX

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

<form>
<input type="checkbox" name="vehicle" value="Bike" /> Bicycle<br />
<input type="checkbox" name="vehicle" value="Car" /> Car
</form>

How the HTML code above looks in a browser:

Bicycle
Car

Attributes that are important that relate to checkbox are the same as a radio button.

3
Page
 ITS332 - LAB [HTML FORM AND PHP]

8. ACTION BUTTON

<input 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:

<form id="form1" name="form1" method="post" action="welcome.php">

Username : <input type="text" name="username" id="username" />
<input type="submit" name="submit" id="submit" value="Submit" />
<input type="reset" name="reset" id="reset" value="reset" />
</form>

How the HTML code above looks in a browser:

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 "welcome.php". The page will show you
the received input. If you click the “Reset” button, then it will clear all the input data.

9. TEXTAREA FIELD

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). The size of a textarea can be specified by the cols and
rows attributes. By default auto-wrap.

<form>
ADDRESS : <textarea name = “addr” id =”addr” rows="5" cols="50">
</textarea>
</form>

How the HTML code above looks in a browser :

4
Page
 ITS332 - LAB [HTML FORM AND PHP]

10. DROP DOWN LIST

The <select> tag is used to create a select list (drop-down list).

The <option> tags inside the select element define the available options in the list.

<form >
Your Favourite Car :
<select name="favcar" id="favcar">
<option value="volvo" selected="selected">VOLVO </option>
<option value="kenari">KENARI</option>
<option value="mercedes">MERCEDES</option>
<option value="audi">AUDI</option>
</select>
</form>

How the HTML code above looks in a browser :

 By using the selected attribute, we can tell our form to automatically select default
item.

5
Page
ITS332 - LAB [HTML FORM AND PHP]

6
Page