Download - CSE 382/ETE 334 Internet and Web Technology
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