1. Fundamentals of Web designing
Ministry of Higher Education
Bamyan University
Computer Science Department
1
Presented by : Mustafa Kamel Mohammadi
Email : bamian.cs@gmail.com
Working forms in HTML
3. HTML forms
Forms are used frequently in many applications
Login
Adding records to system
….
Form are consists of two parts
Form interface designed by HTML and CSS
Form action file that process form requests
Forms are created in HTML using <form> </form>
“action” attribute of <form> identifies the processing file by its URL
“method” attribute of <form> identifies the method of passing data from
interface to processing file
Two methods are frequent in passing data “GET”, “POST”
3
4. HTML form passing data
GET
Passes data to processing page by URL
Used when transferring small amount of data from interface to processing part
Used when needed to remember the browsing history
POST
Passes data to processing part by encapsulating data in a message package
Used for transferring large amount of data and so small
Data passed through POST method is not rememberable
4
5. From controls
forms are made of some form elements called form controls like
Text fields
Password fields
Checkboxes
Radio buttons
Lists or menus
Buttons
Almost all form controls has attribute “name” which contains the name of form
control element set by us.
We use this “name” attribute to get the value of element in processing page.
5
6. Text fields
Used to enter data like name, zipcode, numbers, ….
Can get single line numeric and text data
<input /> with “type” attribute set to “text” create text field
It has some attribute like
Size : determines the length of text box in character
Maxlenght : specifies the maximum characters that we can type in text field
Value : specifies the default value typed in text field
<input type=“text” name=“first_name” size=“20” value=“type first name here” />
6
7. Password field
Used to enter password data into the text box
It shows the (* ) in place of character typed in box
<input /> with “type” attribute set to “password” create password field
It has the same attributes as “text field” like “size”, “maxlenght”
It has no security policy for encrypting data
<input type=“password” name=“user_pass” size=“20” />
7
8. Textarea
Is a large , multiline, scrollable text box
<textarea> </textarea> creates a text are box, “name” attr is a must.
“cols” and “rows” attributes specifies the width a height of text box
<textarea name=“comment” col=“20” rows=“40” >
</textarea>
8
9. Check box
act as a multiple choice form input
<input /> with “type” attribute set to “checkbox” create chechbox
Because it allows multiple choice options so
Create all check boxes related to a single group with adding an attribute “name” to it.
Add “value” attribute to each of them and set the value.
If you want to set some options to be checked add attribute “Checked” with the
value “checked”
<input type=”checkbox” name=”fav_flavor” value=”chocolate”
checked=”checked” />
9
10. Radio buttons
a single choice form input
<input /> with “type” attribute set to “radio” create radio buttons.
The same as checkboxes , but in a radio button group you can only choose one
option rather than multiple options in check boxes
If you want to set one option to be checked add attribute “Checked” with the
value “checked”
<input type=”radio” name=”hand” value=”right”
checked=”checked” />
10
11. Selection menu
allows user to select one from multiple options through a menu
Creating menu is the same as lists but their tags differs
Each option has a vlue attribute , this is the value that is sent when form is
submitted.
<select name=“country”>
<option value=“af”>Afghanistan</option>
<option value=“ir”>Iran</option>
<option value=“pk”>Pakistan</option>
<option value=“us”>United states</option>
</select>
11
12. Cont.
“size” attribute of <select> takes a numeric value, signifying the number of list
options you want to make visible
To permit users to make multiple selections from the list, add a multiple attribute
and set it equal to multiple.
To specify one option as preselected, define a selected attribute for the <option>
tag and set it equal to selected.
<select name=”pets” size=”4” multiple=”multiple”>
<option value=”k9” selected=”selected”>Dogs</option>
…
</select>
12
13. File fields
HTML allows you to select files from PC
<input /> with “type” attribute set to “file” create file fields
Set “name” attribute to specify uniquely a form control
To limit the type of files a visitor can upload, define an accept attribute and set it
equal to the MIME type of the files you want to allow.
MIME stands for Multi-purpose Internet Mail Extensions
<input type=”file” name=”profile_image” size=”20” maxlength=”50”
accept=”image/gif”>
13
14. Submit or Reset form
Site visitors click buttons either to send the completed form to the server (the
Submit button) or to clear the form if they’ve made a mistake (the Reset but-ton)
To create a Submit or reset button, insert an <input>tag add a “type” attribute
and set it equal to submit or reset.
<input type=”submit” value=”Submit” name=”submit” />
<input type=”reset” value=”Reset” name=”reset” />
14
15. Hidden fields
HTML provides a mechanism by which you can include values in your form to be
sent to the script that visitors never see. These values are defined using hidden
fields.
Insert an <input>tag define a “type” attribute and set it equal to hidden
<input type=”hidden” name=”form_num” value=”C0003435” />
15
17. References
• “HTML 4 dummies 5th edition” by Ed Tittel & Mary Burmeister
• “HTML 5 designing rich internet applications” by Mathew Dawid
• “HTML in ten simple steps” by Robert G. fuller
17