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 = "deitel@deitel.com" />

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 = "deitel@deitel.com" />

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. &#38;)• 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:deitel@deitel.com">here

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

22 deitel@deitel.com.

23 </p>

24

25 <hr /> <!-- inserts a horizontal rule -->

26

27 <p>All information on this site is <strong>&copy;</strong>

28 Deitel <strong>&amp;</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²

35 characters worth of information from this site.</del>

36 Only _one download per hour is permitted.</p>

37

38 <p>Note: <strong>&lt; &frac14;</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