HTML ll

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 • <form></form> • 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 <form name=“form1” id = “form1” Method = “POST” Action = “processform.asp”> </form>

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 <input type = “button” name=“btnYes” id = “btnYes” onclick=“javascript:alert(‘You clicked the YES button’)” />

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 <input type = “Submit” Value = “Submit mForm”> 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 <form name=“form1” id = “form1” Method=“POST” onSubmit = “return checkForm()” Action=“processform.asp”></form>

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. <input type = “Reset” Value = “Clear 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 <input type = “radio” id = “rdoMF” name = “rdoMF” value = “M” />Male <input type = “radio” id = “rdoMF” name = “rdoMF” value = “F” />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 <input type = “checkbox” name = “chkInstrument” id = “chkInstrument” checked = “checked” value = “G” />Guitar <input type = “checkbox” name = “chkInstrument” id = “chkInstrument” value = “P” />Piano <input type = “checkbox” name = “chkInstrument” id = “chkInstrument” value = “D” />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 <select id=“dlStates” name=“dlstates”> <option value=“IA”>Iowa</option> <option value = “MN”>Minnesota</option> <option value = “IL”>Illinois</option> <option value = “WI” selected> Wisconsin</option> </select>

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 <input type=“password” name=“txtSSN” id = “txtSSN” size = 9 maxlength = 9 />

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 <textarea cols = 20 rows = 5 wrap = “true” ></textarea>

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 <input type=“hidden” name=“txtType” value = “Order Form” />

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 <label for=“txtName”>Name:</label> <input type = “text” id=“txtName” name = “Name”> <label>Name: <input type=“text” Name = “Name” /></label>

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 <fieldset> <legend>Personal Information</legend> .....(input fields)….. </fieldset>

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 <form method=“Post” action=mailto:chageman@kirkwood.edu enctype = “text/plain” onSubmit=“window.alert(‘The form has been sent by email.’)”> ….. </form>

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 <a>, <area>, <input>,<label>, <body>, <textarea>,<button>,<frameset>,<select> • 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 <frameset cols=“150, *”> </frameset>

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 <frameset cols=“150, *”> <frame src=“navbar.htm” name=“frame1”> <frame src=“content.htm” name=“frame2”> </frameset> <noframes> We apologize, but this page must be viewed in a frame-capable browser. </noframe>

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. <script language=“javascript” src =“openwindow.js” type=“text/javascript”></script>

50. DTD • The doctype declaration should be the very first thing in an HTML document, before the <html> 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.