interactive form 1 edited by; l.maha alajmi. revision 2 we learnt how to extend our web pages by...
TRANSCRIPT
![Page 1: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/1.jpg)
Interactive Form1
Edited By;L.Maha AlAjmi
![Page 2: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/2.jpg)
Revision2
We learnt how to extend our Web pages by adding a few more tags
Specifically, we discussed various types of lists that can be added to a Web page – un-ordered, ordered and definition lists
And also, about tables: about various tags used in a table and their associated attributes
![Page 3: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/3.jpg)
Today’s Lecture3
We will try to understand the utility of forms on Web pages
We will find out about the various components that are used in a form
We will become able to build a simple, interactive form
![Page 4: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/4.jpg)
Interactive Forms (1)4
Without forms, a Web site is “read-only” – it just provides information to the user
Forms enable the user to provide information to the Web site. For example, the user can:
Perform searches on Web site Give comments Ask for info that is not available on the Website Place order for goods and services
![Page 5: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/5.jpg)
Interactive Forms (2)5
Can be simple or very complex
Can fill a whole page or just a single line
Can contain a single element or many
Are always placed between the <BODY> and </BODY> tags of a Web page
![Page 6: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/6.jpg)
Interactive Forms (3)6
Are GUI-based
May contain:
Text fields Check boxes Buttons Scrollable lists
![Page 7: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/7.jpg)
A SimpleExampleofInteractiveForms
7
![Page 8: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/8.jpg)
Code for that Example8
<HTML><HEAD>
<TITLE>Send Email to me</TITLE></HEAD><BODY>
<H1>Send Email to me</H1>Code for the instructionsCode for the form
</BODY></HTML>
![Page 9: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/9.jpg)
A SimpleExampleofInteractiveForms
9
![Page 10: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/10.jpg)
Code for the Instructions10
<P>To send an eMail message to me:</P>
<OL><LI>Type your eMail address in the
"From" field</LI><LI>Type a short message in the
"Message" field</LI><LI>Press the "Send eMail to
me" button</LI></OL>
![Page 11: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/11.jpg)
A SimpleExampleofInteractiveForms
11
![Page 12: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/12.jpg)
Code for the Form12
<FORM name="sendEmail" method="post" action="sendMailScriptURL">
Elements of the form
</FORM>
![Page 13: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/13.jpg)
13
<FORM name="sendEmail" method="post" action="sendMailScriptURL">
Elements of the form
</FORM>
name: Name given to the form
method: Forms can be submitted through two alternate methods – GET & POST
action: Specifies the URL that is accessed when the form is being submitted
![Page 14: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/14.jpg)
Server-Side Scripts14
Are programs that reside on Web servers
Receive info that a user enters in a form
Process that info and take appropriate action
Examples: CGI scripts on Unix servers ASP scripts on Windows servers
![Page 15: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/15.jpg)
A SimpleExampleofInteractiveForms
15
![Page 16: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/16.jpg)
Elements of the Form (1)16
<P>From: <INPUT type="text" name=“sender"
size="50"></P>
<P>Message: <INPUT type="text" name="message" size="50"></P>
![Page 17: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/17.jpg)
A SimpleExampleofInteractiveForms
17
![Page 18: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/18.jpg)
Elements of the Form (2)18
<P><INPUT type="hidden" name="receiver" value="[email protected]"></P>
<P><INPUT type="hidden" name=“subject” value=“eMail from the form”></P>
<P><INPUT type="submit“ name="sendEmail" value="Send eMail to
me"></P>
![Page 19: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/19.jpg)
A SimpleExampleofInteractiveForms
19
![Page 20: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/20.jpg)
20
![Page 21: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/21.jpg)
21
![Page 22: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/22.jpg)
22
![Page 23: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/23.jpg)
<TEXTAREAname=“message”cols=“38”rows=“6”
></TEXTAREA>
23
![Page 24: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/24.jpg)
24
<FORM name="sendEmail" method="post" action=“sendMailScriptURL"> <table><tr> <td>From: </td> <td><INPUT type="text" name="sender" size="50"></td> </tr><tr> <td>To: </td> <td><INPUT type="text" name="receiver" size="50"></td> </tr><tr> <td>Subject: </td> <td><INPUT type="text" name="subject" size="50"></td> </tr><tr> <td valign="top">Message: </td> <td><TEXTAREA name="message" cols="38"rows="6">
</TEXTAREA></td> </tr><tr> <td colspan="2" align="right"> <INPUT type="submit" name="sendEmail" value="Send eMail"> </td> </tr></table></FORM>
![Page 25: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/25.jpg)
25
![Page 26: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/26.jpg)
<INPUTtype=“text” name=“sender”size=“50”value=“your eMail address goes
here”>
26
![Page 27: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/27.jpg)
Review of the Tags Used in Forms
27
![Page 28: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/28.jpg)
28
<FORM
name=“nameOfTheForm”method=“get” or
“post”action=“URL”
>
Elements of the form
</FORM>
![Page 29: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/29.jpg)
Single-Line Text Input Field29
<INPUTtype=“text”name=“fieldName”size=“widthInCharacters”maxlength=“limitInCharacters”value=“initialDefaultValue”
>
![Page 30: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/30.jpg)
Hidden Input30
<INPUTtype=“hidden” name=“fieldName”value=“value”
>
![Page 31: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/31.jpg)
Submit Button Input31
<INPUTtype=“submit” name=“buttonName”value=“displayedText”
>
![Page 32: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/32.jpg)
Multi-Line Text Input Area32
<TEXTAREAname=“areaName”
cols=“widthInCharacters”rows=“numberOfLines”
>
initial default value
</TEXTAREA>
![Page 33: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/33.jpg)
This was a review of the new tags (and associated attributes) that we have used in today’s examples
There are many more tags that can be used in a form
Let us take a look at a few
33
![Page 34: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/34.jpg)
34
![Page 35: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/35.jpg)
<form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>
35
![Page 36: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/36.jpg)
Password Input Field36
<INPUTtype=“password”name=“fieldName”size=“widthInCharacters”maxlength=“limitInCharacters”value=“initialDefaultValue”
>
![Page 37: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/37.jpg)
37
![Page 38: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/38.jpg)
<form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td colspan="2"> <input type="checkbox" name="remember" value="remember"> Remember my user name and password<br> </td>
</tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>
38
![Page 39: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/39.jpg)
Checkbox Input Element39
<INPUTtype=“checkbox”name=“checkboxName”checkedvalue=“checkedValue”
>
![Page 40: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/40.jpg)
40
Office
![Page 41: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/41.jpg)
<form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td> <input type="text" name="userName" size="10"> </td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr> <td valign="top">Logging in from:</td> <td> <input type="radio" name="from" value="home"> Home<br> <input type="radio" name="from" value="office"> Home<br> <input type="radio" name="from" value="university" checked> University </td>
</tr><tr> <td colspan="2" align="right"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>
41
![Page 42: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/42.jpg)
Radio Button Input Element42
<INPUTtype=“radio”name=“radioButtonName”checkedvalue=“selectedValue”
>
![Page 43: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/43.jpg)
What is the difference between checkboxes and radio buttons?
43
![Page 44: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/44.jpg)
44
![Page 45: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/45.jpg)
<form name="login" method="post" action="loginScript"> <table><tr> <td>User Name: </td> <td><input type="text" name="userName" size="10"></td> </tr><tr> <td>Password: </td> <td> <input type="password" name="password" size="10"> </td> </tr><tr>
<td valign="top">Logging in from:</td> <td> <select size="2" name="from">
<option value="home"> Home<option value="office"> Office<option value="university" selected> University
</select> </td>
</tr><tr> <td colspan="2"> <input type="submit" name="login" value="Log me in"> </td> </tr></table></form>
45
![Page 46: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/46.jpg)
Select from a (Drop Down) List46
<SELECTname=“listName”size=“numberOfDisplayedChoices”multiple
>
<OPTION value=“value1”> text1<OPTION value=“value2” selected>
text2<OPTION value=“value3”> text2
……
</SELECT>
![Page 47: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/47.jpg)
47
![Page 48: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/48.jpg)
File Upload Input Element48
<INPUTtype=“file”name=“buttonName”value=“nameOfSelectedFile”enctype=“fileEncodingType”
>
![Page 49: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/49.jpg)
<formname=“uploadForm”method=“post”action=“uploadScript”
<inputtype=“file”name=“uploadFile”
enctype=“multipart/form-data” > <input
type=“submit”name=“submit”value=“Upload”
></form>
49
![Page 50: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/50.jpg)
Reset Button Input Element(Resets the contents of a form to default
values)50
<INPUTtype=“reset” value=“dispalyedText”
>
![Page 51: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/51.jpg)
51
![Page 52: Interactive Form 1 Edited By; L.Maha AlAjmi. Revision 2 We learnt how to extend our Web pages by adding a few more tags Specifically, we discussed various](https://reader035.vdocuments.net/reader035/viewer/2022062314/56649dc45503460f94ab66cc/html5/thumbnails/52.jpg)
Assignment # 4
52
Create a simple Web page to provide electronic greeting message service on the Internet. Your Web page should contain:
a. The heading of the Web pageb. Input fields to capture information (i.e. names and
email addresses) about the sender and the receiver of the message
c. List of the available greeting messages d. Button to send the card