Professional Documents
Culture Documents
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.
<form>
..
input elements
..
</form>
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>
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
<form>
Username : <input type = “text” name = “userid” />
Password : <input type="password" name="pwd" />
</form>
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.
<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
<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>
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
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:
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
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>
4
Page
ITS332 - LAB [HTML FORM AND PHP]
<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>
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