cse 382/ete 334 internet and web technology
DESCRIPTION
CSE 382/ETE 334 Internet and Web Technology. Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU. Forms for Interface Design. Form is type of user interface where user can enter data Syntax for declaring a form is: - PowerPoint PPT PresentationTRANSCRIPT
CSE 382/ETE 334Internet and Web Technology
Presented ByDr. Shazzad Hosain
Asst. Prof. EECS, NSU
Forms for Interface Design
• Form is type of user interface where user can enter data Syntax for declaring a form is:
<Form Method=Get/Post Action=Example6.html > </Form>
• Action-specifies the page that will open when submit button is pressed
Basic XHTML Forms • Element form
– Attribute method• Specifies how the form’s data is sent to Web server• method = “post”
– Appends form data to the browser request• method = “get”
– Appends form data directly to the end of the URL
– Attribute action• Specifies the URL of a script on the Web server
– input• Specifies data to provide to the script that processes the form
http://www.cs.tut.fi/~jkorpela/forms/methods.html
One Line Text Box
• The following tags should be placed within the form tag to place a one line text box in the form where user can enter
• Syntax: <input type=text size=20 name=user value=“John">
• Size-specifies the number of character it can hold
• Value-specifies the text that will initially be displayed in the textbox
single line text box with predefined valueJohn
Password type text box
• To place a one line textbox in the form where user can enter password The character entered is shown like *
• Syntax: <input type=password size=20 name=user > • size-specifies the number of character it can hold
****************** Password type text box
Check Boxes
• Check Boxes are like on/off switch • The following syntax you can use to put a
checkbox element in the form. • Syntax:
<input type=checkbox name=course value=CSC382 checked> <input type=checkbox name=course value=ETE334 >
• Checked-if given, the checkbox will be checked by default
CSC382
ETE334
√√
Radio Buttons• RadioButton is like on/off switch. To put a radio button element in the form
follow the syntax. • When group of radio button is given same name, only one button within the
group can be "on" at a time • Syntax: <br> <input type="radio" name="radiobutton“
value="myValue1">male<br><input type="radio" name="radiobutton" value="myValue2" checked>female
• If two or more radio buttons have the same name, the user can only select one of them at a time, This is how you make a radio button “group”
Text Area
• To put a text area (i.e multiple line textbox) in the form where user can enter
• The text within text area tags will be displayed
• Syntax: • <textarea cols=30 rows=6
name=Address> Insert Address Here </textarea>
• Cols-specifies the width of the textarea
• Rows-specifies the number of lines
Multi-line text area
Insert Address Here
Drop down List
• To put a drop-down list in the form • Syntax: <select name=month size=1> </select> • size-specifies the number of list items that will be
displayed • The option tags should be within select tags and
option tags define the fields in the list. • Syntax: <option value=1 selected>
<option value=2 > • selected-makes the item selected when form is
displayed
Jan
Drop-down menu or list
• A menu or list:<select name="select"> <option value="red">red</option> <option value="green">green</option> <option value="BLUE">blue</option></select>
• Additional arguments:– size: the number of items visible in the list (default is "1")– multiple: if set to "true", any number of items may be selected
(default is "false")
Buttons in a Form
• To put a button in the form • Syntax: <input type=button value=Go> • value-specifies the label of the button • To put a reset button in the form. By pressing this button it will clear all
the things that user has entered • Syntax: <input type=reset value=Clear> • value-specifies the label of the button. It is "Reset" by default. • To put a submit button in the form. When this button is pressed, the page
that is specified by action in form tag will appear. • Syntax: <input type=submit value=SubmitForm> • value-specifies the label of the button. It is "Submit" by default.
Clear
SubmitForm
Hidden fields
• <input type="hidden" name="hiddenField" value="nyah">
• What good is this?– All input fields are sent back to the server, including hidden fields– This is a way to include information that the user doesn’t need to
see (or that you don’t want her to see)– The value of a hidden field can be set programmatically (by
JavaScript) before the form is submitted
Example: form.html
form.html1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 5.3: form.html -->
6 <!-- Form Design Example 1 -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fill out this form to help
18 us improve our site.</p>
19
20 <!-- this tag starts the form, gives the -->
21 <!-- method of sending information and the -->
22 <!-- location of form scripts -->
23 <form method = "post" action = "/cgi-bin/formmail">
24
form.html(2 of 3)
25 <p>
26 <!-- hidden inputs contain non-visual -->
27 <!-- information -->
28 <input type = "hidden" name = "recipient"
29 value = "[email protected]" />
30 <input type = "hidden" name = "subject"
31 value = "Feedback Form" />
32 <input type = "hidden" name = "redirect"
33 value = "main.html" />
34 </p>
35
36 <!-- <input type = "text"> inserts a text box -->
37 <p><label>Name:
38 <input name = "name" type = "text" size = "25"
39 maxlength = "30" />
40 </label></p>
41
42 <p>
43 <!-- input types "submit" and "reset" insert -->
44 <!-- buttons for submitting and clearing the -->
45 <!-- form's contents -->
46 <input type = "submit" value =
47 "Submit Your Entries" />
48 <input type = "reset" value =
49 "Clear Your Entries" />
50 </p>
51
52 </form>
53
54 </body>
55 </html>
More Complex XHTML Forms • Element textarea
– Inserts a multiline text box (text area)– Attribute rows
• Specifies the number of rows– Attribute cols
• Specifies the number columns– Input “password”
• Inserts a password box with the specified size• Element checkbox
– Enable users to select from a set of options• Element select
– Provides a drop-down list of items• Element option
– Adds items to the drop-down list– Attribute selected
• Specifies which item initially is displayed as the selected item
Feedback form Interface
Example: form2.html1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 5.4: form2.html -->
6 <!-- Form Design Example 2 -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Forms</title>
11 </head>
12
13 <body>
14
15 <h1>Feedback Form</h1>
16
17 <p>Please fill out this form to help
18 us improve our site.</p>
19
20 <form method = "post" action = "/cgi-bin/formmail">
21
form2.html22 <p>
23 <input type = "hidden" name = "recipient"
24 value = "[email protected]" />
25 <input type = "hidden" name = "subject"
26 value = "Feedback Form" />
27 <input type = "hidden" name = "redirect"
28 value = "main.html" />
29 </p>
30
31 <p><label>Name:
32 <input name = "name" type = "text" size = "25" />
33 </label></p>
34
35 <!-- <textarea> creates a multiline textbox -->
36 <p><label>Comments:<br />
37 <textarea name = "comments" rows = "4" cols = "36">
38 Enter your comments here.
39 </textarea>
40 </label></p>
41
42 <!-- <input type = "password"> inserts a -->
43 <!-- textbox whose display is masked with -->
44 <!-- asterisk characters -->
45 <p><label>E-mail Address:
46 <input name = "email" type = "password"
47 size = "25" />
48 </label></p>
49
50 <p>
51 <strong>Things you liked:</strong><br />
52
53 <label>Site design
54 <input name = "thingsliked" type = "checkbox"
55 value = "Design" /></label>
56
57 <label>Links
58 <input name = "thingsliked" type = "checkbox"
59 value = "Links" /></label>
60
61 <label>Ease of use
62 <input name = "thingsliked" type = "checkbox"
63 value = "Ease" /></label>
64
65 <label>Images
66 <input name = "thingsliked" type = "checkbox"
67 value = "Images" /></label>
form2.html68
69 <label>Source code
70 <input name = "thingsliked" type = "checkbox"
71 value = "Code" /></label>
72 </p>
73
74 <p>
75 <input type = "submit" value =
76 "Submit Your Entries" />
77 <input type = "reset" value =
78 "Clear Your Entries" />
79 </p>
80
81 </form>
82
83 </body>
84 </html>
Feedback form Interface
All available support
Special Characters and More Line Breaks
• Character entity references (in the form &code;)• Numeric character references (e.g. &)• del
– Strike-out text• sup
– Superscript text• sub
– Subscript text• <hr />
– Horizontal rule (horizontal line)
Example: contact2.html
26
Example: contact2.html1 <?xml version = "1.0"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
3 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
4
5 <!-- Fig. 4.9: contact2.html -->
6 <!-- Inserting special characters -->
7
8 <html xmlns = "http://www.w3.org/1999/xhtml">
9 <head>
10 <title>Internet and WWW How to Program - Contact Page
11 </title>
12 </head>
13
14 <body>
15
16 <!-- special characters are entered -->
17 <!-- using the form &code; -->
18 <p>
19 Click
20 <a href = "mailto:[email protected]">here
21 </a> to open an e-mail message addressed to
23 </p>
24
25 <hr /> <!-- inserts a horizontal rule -->
26
27 <p>All information on this site is <strong>©</strong>
28 Deitel <strong>&</strong> Associates, Inc. 2002.</p>
29
30 <!-- to strike through text use <del> tags -->
31 <!-- to subscript text use <sub> tags -->
32 <!-- to superscript text use <sup> tags -->
33 <!-- these tags are nested inside other tags -->
34 <p><del>You may download 3.14 x 10<sup>2</sup>
35 characters worth of information from this site.</del>
36 Only <sub>one</sub> download per hour is permitted.</p>
37
38 <p>Note: <strong>< ¼</strong> of the information
39 presented here is updated daily.</p>
40
41 </body>
42 </html>
Example: contact2.html
28
Summary:Tips for Good XHTML Code
• Use line breaks and indented text to make your HTML file easier to read.
• Insert comments into your HTML file to document your work.
• Enter all tag and attribute names in lowercase.
• Place all attribute values in quotes.
• Close all two-sided tags.
29
Summary:Tips for Good XHTML Code
• Make sure that nested elements do not cross.
• Use styles in place of presentational elements whenever possible.
• Know your market and the types of browsers that your audience will use to view your Web page.
• Test your Web page on all relevant browsers.
Web Resources • www.w3.org/TR/xhtml11 • www.xhtml.org• www.w3schools.com/xhtml/default.asp • validator.w3.org• hotwired.lycos.com/webmonkey/00/50/index2a.html• wdvl.com/Authoring/Languages/XML/XHTML• www.w3.org/TR/2001/REC-xhtml11-20010531
