cse 382/ete 334 internet and web technology presented by dr. shazzad hosain asst. prof. eecs, nsu

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 

6 

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 

21 

22 

23 <form method = "post" action = "/cgi-bin/formmail">

24

form.html(2 of 3)

25 <p>

26 

27 

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 

37 <p><label>Name:

38 <input name = "name" type = "text" size = "25"

39 maxlength = "30" />

40 </label></p>

41

42 <p>

43 

44 

45 

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"?>



4

5 

6 

7


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 

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 

43 

44 

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


59 value = "Links" /></label>

60

61 <label>Ease of use


63 value = "Ease" /></label>

64

65 <label>Images


67 value = "Images" /></label>

form2.html68

69 <label>Source code


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"?>



4

5 

6 

7


9 <head>

10 <title>Internet and WWW How to Program - Contact Page

11 </title>

12 </head>

13

14 <body>

15

16 

17 

18 <p>

19 Click

20 <a href = "mailto:[email protected]">here

21 </a> to open an e-mail message addressed to

22 [email protected].

23 </p>

24

25 <hr />

26

27 <p>All information on this site is <strong>©</strong>

28 Deitel <strong>&</strong> Associates, Inc. 2002.</p>

29

30 

31 

32 

33 

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

cse 382/ete 334 internet and web technology presented by dr. shazzad hosain asst. prof. eecs, nsu

Documents