1

Fundamentals of Web designing

Ministry of Higher EducationBamyan University

Computer Science Department

Presented by : Mustafa Kamel MohammadiEmail : bamian.cs@gmail.com

Working forms in HTML

2

learning objective In this chapter you will learn

How to create 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”

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

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.

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” />

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” />

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>

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” />

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” />

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>

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>

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”>

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” />

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” />

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