1. HTML ll Cyndi Hageman

2. Forms  Overview Method to collect and process user input and to formulate personalized replies. Built using HTML/XHTML on the client side Processed on the server side using server software Can be dynamic – we can capture the client side events (a click for example) and change our form accordingly

3. The Form Tag   Attributes Action – required tag that tells the browser what URL to send the form to. Method – how do you want to send your data  Get – default – sends the data by appending the “Action” url with the form data  Post – contacts the server (defined in the “Action” attribute, then sends the data

4. When to use Method=“GET”  Form is very short  No concerns about the security of the data in the form  If you do not know how to write server side applications

5. When to use Method=“POST”  Long forms with a lot of data  Security – POST data is encrypted and safer to use when sending sensitive data (e.g. SSN)  When you have a server side forms processing application or are comfortable writing your own server side application.

6. The Form tag  Attributes Name or id – a unique string that identifies that particular form. You can use both. Target – this can be used if you would like the URL in the Action attribute to open into a new window.

7. Form Tag Example

8. Input Tags  Text Name or id – used to identify the textbox. You can use both Value – this would be a default value you want the form to have. It can be left blank. Size – this will determine how big the size of the text box is Maxlength – determines the maximum number of characters allowed in the box

9. Text Example <input type=“text” name = “txtName” id = “txtName” size = 40 maxlength = 40 value = “” />

10. Input Tags  Button Name or id – used to identify the form element. You can use both. Value – this is what you want displayed as text on the button onclick – determines what will be done when the button is clicked. Note: there are several events that can be captured, onclick is one example

11. Button tag

12. Input tags  Submit Name or id – not necessary if you want this button to just submit the form Value – this will display what the button says. If this is left blank, the word “Submit” will appear on the button By default, the submit button will submit the form to the URL in the Action attribute. However, it is always good make sure a form has been validated before submitting it.

13. Submit Example If you want to use a JavaScript function to validate your form, add that to the form tag. When the Submit button is clicked it will submit the form once the function returns true

14. Input tag  Reset Value – this can be set to display whatever wording you wish on the button. If you do set this it will default to “Reset” This button will wipe out all information entered on the form.

15. Input tags  Radio Button Group Name or id – used to identify this form element Value – the value you want to be passed to the form (not the value displayed on your web page) Checked – by putting this word in the input tag of one of the buttons in the group, this one will be checked or selected when the form loads.

16. Input tags  Radio Button Group cont. When you use several radio buttons with the same name you are grouping them. This means that only one of the options can be selected. When you create a radio button group, the form elements in this group will be referred to as one element with several parts – in JavaScript this will be read as an array.

17. Radio Button Example Male Female

18. Input tags  Checkbox Name or id – identifies this form element Value – what will be submitted with the form, not displayed on the page Checked – if “checked” then this will have a checkmark in the box for that element

19. Input tag  Checkbox cont. To group several checkboxes together, give them the same name. More than one checkbox can be checked. This is seen as one element with several parts – when this is read by JavaScript it will be seen as an array.

20. Checkbox example Guitar <input type = “checkbox” name = “chkInstrument” id = “chkInstrument” value = “P” />Piano Drums

21. Input Tag  Select Tag Drop down list that gives the client different options to select from. Name or id – used to identify the form element Size – shows how many options to display Multiple – allows the user to select multiple options in the drop down list.

22. Input Tag  Option tag The option tag is used to define each option within the Select tags Value = this is the value that is submitted on the form Selected – allows you to preselect a particular option

23. Select/Option Example Iowa Minnesota Illinois Wisconsin

24. Input Tag  Password Similar to a text field, but the information typed in this field is masked for security purposes. When the form is submitted, it is not encrypted. If collecting sensitive data, add extra security to your website, such as SSL Name, id, maxlength, size and value attributes are the same as a textbox

25. Password Example

26. Input Tag  Textarea Used to allow the user to enter multiple lines of text. Cols – specifies how many columns in the textarea Rows – specifies how many rows in the textarea Wrap - allows the text entered to wrap in the textarea

27. Textarea Example

28. Input Tag  Hidden Used to include information on a form that is not displayed to or entered by the user. Information may be something specific about the form itself or information retrieved from the server that is part of the form, but does not need to be displayed. Name – used to identify the form element Value – used to store the value assigned

29. Hidden Tag Example

30. Input Tag  Label Used to add a label to a form element that gathers data. A label is for display purposes only. For – contains the id of the form element associated with it.

31. Label Examples Name: Name:

32. Form Tag  Fieldset Groups of set of form elements. Used for organizational or display purposes Can use a legend tag to label a fieldset

33. Fieldset Example Personal Information.....(input fields)…..

34. Processing Form Data  Email Used to email form results to a designated email address Used when there is no access to server side form processing programs Used when there is no concern for security

35. Email Example mailto:chageman@kirkwood.edu …..

36. Forms Processing  Server Side Processing CGI-Bin ASP PHP

37. HTML ll Events, Framesets and XHTML

38. onclick  Captures the click event  Can be used with most tags  Examples onclick=“javascript:alert(‘Thank you for subscribing!’)” onclick=“checkfield(form1)”

39. ondoubleclick  Captures the double click event  Used on most tags  Example ondblclick = “javascript:document.getElementById (‘txtName’).value = this.value”

40. onmouseover/onmouseout  Captures the movement of the mouse  Used with most tags  Example: onMouseOver="javascript:this.src= ‘world.jpg'" onmouseout="javascript:this.src='web. gif'"

41. onfocus/onblur  Captures event when you set focus on an element or lose focus.  Used with,,,,,,,,  Example: onfocus=“javascript:alert(‘This field is required’)” onblur=“javascript:if (this.value) == “”){alert(‘You must enter a value in this field’)}”

42. Frameset  Breaks your page into rows and columns. Each frame is essentially it’s own document.  Attributes: rows or cols – you must define one or the other Border, frameborder, framespacing or border color

43. Frameset example

44. Frame Content  Defines each frame within the frameset  Attributes: Src = defines the URL that will be displayed in the frame Name or id – used to uniquely identify the frame Noresize – keeps the user from resizing the frame Scrolling – allows vertical or horizontal scrolling Frameborder and bordercolor – determines if there is a border and it’s color

45. noframes  This replaces the body and is read by browsers that do not support frames  It is best to include this especially if you are unsure of what browser your audience will be using

46. Frames Example We apologize, but this page must be viewed in a frame-capable browser.

47. Inline frames  Allows you use frames inside a traditional document  Attributes Name – identifies the frame Src – the url of what is to be in the frame when the page loads Height and width – needs to set or defaults will apply (width is 300px, height is 100px)

48. Disadvantages of using frames  Search engines cannot read the text on your pages contained in the frames, therefore you’re page is not getting found.  Orphan pages – pages can be looked at individually outside the frameset. You may loose your navigation.  Many browsers cannot print frame pages correctly.  Difficult to accurately bookmark a frames page.

49. External.js files  Can be linked so javascript functions can be reused on different pages.

50. DTD  The doctype declaration should be the very first thing in an HTML document, before the tag.  The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.  The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers can render the content correctly.

51. DTD  HTML 4.01 Strict  contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. 

52. DTD  HTML 4.01 Transitional  contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. 

53. DTD  HTML 4.01 Frameset  equal to HTML 4.01 Transitional, but allows the use of frameset content. 

54. DTD  XHTML 1.0 Strict  contains all HTML elements and attributes, but does not include presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well- formed XML. 

55. DTD  XHTML 1.0 Transitional  contains all HTML elements and attributes, including presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML. 

56. DTD  XHTML 1.0 Frameset  equal to XHTML 1.0 Transitional, but allows the use of frameset content. 

57. DTD  XHTML 1.1  equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages). 

58. XHTML  Like HTML but uses DTD to define XML elements 

59. XHTML  Nested Tags Same as current HTML This statement is itallic  End Tags are required

60. XHTML  Case sensitive All html tags need to be lower case  Attributes in Quotes All attribute values must be in double quotes

61. XHTML  Explicit Attribute values All attributes must have a value  Special Characters Put javascript in external files See appendix F for character definitions

62. XHTML  Name vs. Id XHTML has a strong preference for the Id tag If you have to use the name attribute for a tag, then also add the id attribute

63. Getting Your Web Site Found

64. Meta Tags  Description Tag This allows you to influence the description of your page with the web crawlers

65. Meta Tags  Keywords Tag Can supplement the content of your web page in getting it found. A keyword tag on it’s own will not get your site found.

66. Meta Tags  Robots Tag Used to get robots to index your page, or not index your page.

67. Meta Tag  Author Ignored by the web crawlers but used for the authors purpose. Good for tracking web sites you have authored.

68. How does a web crawler work?  Scans through internet pages to create an index of the data it is looking for.  Main purpose is to collect data so they can quickly provide web surfers with requested information  Used by search engines and others, such as linguist trying to find commonly used words.

69. Web Crawlers  Also known as web spider, web robot, bot  Can be used to gather specific types of information, such as email addresses for spam purposes

70. Search Engine Optimization  Process of editing and organizing the content on a webpage or across a website to increase its potential relevance to specific keywords on specific search engines  Ensures that external links to the site are correctly titled and in abundance.

71. SEO cont.  Consider how search engines work and what people search for  Involves editing its content and HTML coding to both increase its relevance to specific keywords and to remove barriers to the indexing activities of search engines

72. How to Get Your Web Site Found  Provide content – make sure your web site content is relevant to what you are selling or trying to say.  Use the Title Meta Tag – Many search engines compare your title tag to your keywords and page content.

73. Getting Your Web Site Found  There’s more out there than Google – there are a lot of search engines out there, make sure you are found by as many as possible  Use keywords meta tags – still used by search engines to compare to the content of your page

74. Get Your Web Site Found  Description Meta Tag – may not be the most important but still use to tell a search engine exaclty what your web site is about.  Submit your site to major search engines, but don’t “spam” them – do this when your site is completely finished.

75. Get Your Web Site Found  Use the revisit Meta Tag – this will keep the web crawlers coming back  Add a site map if your site is large – make this available on your home page.

76. Get Your Web Site Found  Add a robots.txt file on your root directory and add a robots meta tag  Reciprocal linking – find a few other sites like yours and trade links with them. The more links to your site the more you will be found.

77. Get Your Web Site Found  Get Advice from Others – once your web site is up, ask other developers for advice.  Keep on top of the latest search engine technologies

78. Tips and Tricks  Make your web site flow. Users usually scan a web site from upper left to lower right  Make your own web site navigation- never leave it up to the user to have to click the back key

79. Tips  Make your forms easy to complete – do not make your user have to move between mouse and keyboard too much  We are a society of little patience – speed of your web site is important in today’s world. Test your site over different connections

80. Tips  TEST, TEST, TEST – try absolutely everything to break your site. Try your site in different browsers. Have other people test your site.

81. Thank You  Cyndi Hageman  HTML ll