lecture 09 html: forms - mubashirali.com€¦ · 1. html forms •forms provide a means of...
TRANSCRIPT
![Page 2: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/2.jpg)
Summary of the previous lecture
2
• Creating tables in HTML
• Table attributes
• Page lay-out using tables
![Page 3: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/3.jpg)
Outline
• HTML FORMS
• HTML FORM elements
Mubashir Ali - Lecturer (Department of Computer Science)
3
![Page 4: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/4.jpg)
1. HTML FORMS
• Forms provide a means of submittinginformation from the client to the server
• HTML supports tags for creating forms, however, it does not process the information
• Use server-side script to process form information
• Server-side script runs on the Web server and receives data from a form and uses it to perform a set of tasks
Mubashir Ali - Lecturer (Department of Computer Science)
4
![Page 5: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/5.jpg)
This figure shows how a Web page form interacts with a CGI script.
1. HTML FORMS…
Mubashir Ali - Lecturer (Department of Computer Science)
5
![Page 6: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/6.jpg)
1. HTML FORMS…
• <form> tag is used to start a form• </form> tag is used to end a form• Between <form> and </form>, form elements are
placed• We can declare a form as:
<form attributes>form elements and layout tags
</form>• A single page can include several different
forms, but you cannot nest one form inside another
Mubashir Ali - Lecturer (Department of Computer Science)
6
![Page 7: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/7.jpg)
1. HTML FORMS…
• Common Form Attributes:
• action - gives the URL of the application that is to receive and process the forms data
• method - sets the HTTP method that the browser uses to send the form's data to the server for processing; Either POST or GET
• name – name of the form
Mubashir Ali - Lecturer (Department of Computer Science)
7
![Page 8: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/8.jpg)
2. Form Elements
• Textbox• Password Field• Hidden Field• Checkbox• Radio Button• Text Area• Select List• Submit Button• Reset Button
Mubashir Ali - Lecturer (Department of Computer Science)
8
![Page 9: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/9.jpg)
2.1 Text box
<INPUT TYPE=“TEXT” >
– NAME
– SIZE
– VALUE
– MAXLENGTH
<INPUT TYPE=“TEXT” NAME=NAME SIZE=30 VALUE=“ALI” MAXLENGTH=15>
Mubashir Ali - Lecturer (Department of Computer Science)
9
![Page 10: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/10.jpg)
2.1 Text box…
Mubashir Ali - Lecturer (Department of Computer Science)
10
Start of the form
label Text box
![Page 11: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/11.jpg)
2.1 Text box…
Mubashir Ali - Lecturer (Department of Computer Science)
11
label Text boxvalue
![Page 12: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/12.jpg)
2.2 Password Field
• <INPUT TYPE=“PASSWORD”>
– NAME
– SIZE
– VALUE
– MAXLENGTH<INPUT TYPE=“PASSWORD” NAME=NAME SIZE=30 VALUE=“ALI”
MAXLENGTH=15>
Mubashir Ali - Lecturer (Department of Computer Science)
12
![Page 13: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/13.jpg)
2.2 Password Field…
Mubashir Ali - Lecturer (Department of Computer Science)
13
Type is password
![Page 14: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/14.jpg)
2.2 Password Field…
Mubashir Ali - Lecturer (Department of Computer Science)
14
Typed characters are hidden
![Page 15: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/15.jpg)
2.3 Hidden Text Field
• <INPUT TYPE=“HIDDEN”>
– NAME
– VALUE
<INPUT TYPE=“HIDDEN” NAME=NAME VALUE=“ALI” >
Mubashir Ali - Lecturer (Department of Computer Science)
15
![Page 16: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/16.jpg)
2.3 Hidden Text Field…
Mubashir Ali - Lecturer (Department of Computer Science)
16
Type is hidden
![Page 17: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/17.jpg)
2.3 Hidden Text Field…
Mubashir Ali - Lecturer (Department of Computer Science)
17
Hidden field is not visible
![Page 18: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/18.jpg)
2.4 Checkbox
<INPUT TYPE=“CHECKBOX”>– CHECKED
– NAME
– VALUE<INPUT TYPE=“CHECKBOX” NAME=“CHECK” VALUE=“ CHECKED”>
Mubashir Ali - Lecturer (Department of Computer Science)
18
![Page 19: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/19.jpg)
2.4 Checkbox…
Mubashir Ali - Lecturer (Department of Computer Science)
19
label
option
Type
checkedvalue
![Page 20: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/20.jpg)
2.4 Checkbox…
Mubashir Ali - Lecturer (Department of Computer Science)
20
label
OptionsAlready checked
![Page 21: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/21.jpg)
2.5 Radio Buttons
• <INPUT TYPE=“RADIO”>
– CHECKED
– NAME
– VALUE<INPUT TYPE=“RADIO” NAME=“RADIO” VALUE=“” CHECKED>MALE
<INPUT TYPE=“RADIO” NAME=“RADIO” VALUE=“” >FEMALE
Mubashir Ali - Lecturer (Department of Computer Science)
21
![Page 22: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/22.jpg)
2.5 Radio Buttons…
Mubashir Ali - Lecturer (Department of Computer Science)
22
label
Optiontype
Same name
![Page 23: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/23.jpg)
2.5 Radio Buttons…
Mubashir Ali - Lecturer (Department of Computer Science)
23
Radio ButtonAlready checked
![Page 24: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/24.jpg)
2.6 Select list
• Drop down list:
• Select
– Name, size
• Option
<SELECT name=“name” size=“size”>
<OPTION value=“lahore”>LAHORE</option>
<OPTION value=“karachi”>KARACH</option>
<OPTION value=“islamabad”>ISLAMABAD</option>
</SELECT>
Mubashir Ali - Lecturer (Department of Computer Science)
24
![Page 25: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/25.jpg)
2.6 Select list…
Mubashir Ali - Lecturer (Department of Computer Science)
25
List starts
options
Select ends
![Page 26: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/26.jpg)
2.6 Select list…
Mubashir Ali - Lecturer (Department of Computer Science)
26
Select list with options
![Page 27: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/27.jpg)
2.7 Text area
• Text-area
– Rows
– Cols
– Name
<TEXTAREA rows=“5” cols=“5”>
Default text
</TEXTAREA>
Mubashir Ali - Lecturer (Department of Computer Science)
27
![Page 28: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/28.jpg)
2.7 Text area…
Mubashir Ali - Lecturer (Department of Computer Science)
28
![Page 29: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/29.jpg)
2.7 Text area…
Mubashir Ali - Lecturer (Department of Computer Science)
29
Text area
![Page 30: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/30.jpg)
2.8 File field
• File-field
<input type=“file” name=“file-name”>
Mubashir Ali - Lecturer (Department of Computer Science)
30
![Page 31: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/31.jpg)
2.8 File field…
Mubashir Ali - Lecturer (Department of Computer Science)
31
![Page 32: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/32.jpg)
2.8 File field…
Mubashir Ali - Lecturer (Department of Computer Science)
32
![Page 33: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/33.jpg)
2.9 Submit and Reset buttons
• Submit and Reset Buttons
<INPUT TYPE=“SUBMIT” VALUE=“SAVE”>
<INPUT TYPE=“RESET” VALUE=“RESET”>
Mubashir Ali - Lecturer (Department of Computer Science)
33
![Page 34: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/34.jpg)
2.9 Submit and Reset buttons…
Mubashir Ali - Lecturer (Department of Computer Science)
34
Submit button
Reset button
![Page 35: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/35.jpg)
2.9 Submit and Reset buttons…
Mubashir Ali - Lecturer (Department of Computer Science)
35
Submit Reset
![Page 36: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/36.jpg)
Summary
Mubashir Ali - Lecturer (Department of Computer Science)
36
• Creating forms in HTML
• Adding form elements
![Page 37: Lecture 09 HTML: Forms - mubashirali.com€¦ · 1. HTML FORMS •Forms provide a means of submitting information from the client to the server •HTML supports tags for creating](https://reader033.vdocument.in/reader033/viewer/2022051918/600a88f4b5141f2aeb33da5d/html5/thumbnails/37.jpg)
• Chapter 5, Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1.
37Basharat Mahmood, Department of Computer Science, CIIT, Islamabad,
Pakistan.
References