In this chapter you will learn How to create forms in HTML

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

2. learning objective
 In this chapter you will learn
 How to create forms in HTML
2

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

16. 16

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