Introduction to HTML Forms: Syntax, Attributes, and Input Fields

1. INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 sunny.shi@senecacollege.ca SENECA COLLEGE

2. Outline Form - <input> Next class: Client-side validation 2

3. Introduction to Forms Example: form_ex_1.html 3 3

4. Introduction to Forms HTML forms are used to pass data to a server. An HTML form can contain input elements like text fields, textarea, checkboxes, radio-buttons, submit buttons, select lists, fieldset, legend, and label elements. The client fill-outsome information and then the browsersendsthe data from the form fields to the server for processing, to an e-mail address, or to a JavaScript subroutine. 4

5. Introduction to Forms Syntax: <form id='formID’ method=‘…' action='url' > A document may have more than one form, but forms cannot be nested. 5

6. Attributes for <form> • method: specifies how the data will be transmitted. • The method is the short way of saying HTTP request method. It tells the server the request is being made of what kind of request it is. - method=“get”: the default method. The fill-out form contents to be appended to the URL as if they were a normal query (maximum of 256 characters). - method=“post”: the fill-out form contents to be sent to the server in a data body rather than as part of the URL • Method “post” is more secure.

7. Attributes for <form> <form method="post" id = "example1" action=“http://formpost.azurewebsites.net/home/test"> The action attribute tells browser where to post the form data or which address to get with the appended data. This is the action that takes place when the user presses the submit button. 7

8. <input /> tag The <input /> tag is used to specify a simple input element inside a form that can receive user input. All <input /> tags are required to have a type attribute. Except for the submit and reset buttons they must also have a name attribute. The type indicates what sort of input field the tag represents, such as text boxes or radio buttons. The name/id attribute creates a named data field, or variable, to assign values to. The name/id attribute must be unique within a form, although some types of input may take multiple <input /> tags to define 8

9. <input /> type Attribute type = “text”: single line text input field in which the user can enter text. type = “password”: a text field where the content is masked, such as password fields. type = “checkbox” : a toggle that the user can select (switch on) or deselect (switch off.) type= “radio”: one of a set of radio buttons, which is a collection of selectable check boxes where only one in the group can be chosen. type= “file”: allows the user to select of file on their computer for submission to the server. type = “hidden”: denotes a hidden field, usually for sending additional system generated information along with the form, for instance, the form version number. 9

10. <input /> type Attribute type= “reset”: reset all elements in the form to their default values. type= “submit”: when a user clicks a submit button, the form is submitted, which means that the action specified for the form is invoked. type=“image”: Places an image, serving as a custom button in place of the submit button. When a user clicks the image, the form is submitted to the server. New in HTML5: type =“email”: a field for email. type = “number”: a field for number, type = range: slider control for number range. 10

11. Attributes for <input/> • checked: element is selected when page loads • disabled: value cannot be submitted • maxlength = “maximum amount of text” maxlength can be larger than the size, -- scroll. readonly • size = width in number of characters • value = “initial/ default value” • multiple

12. Attributes for <input/> • New in HTML5: • autocomplete= “on” or ”off” (form_ex_3.html) • autofocus: element automatically get focus when page loads • max: max value for an element • min: min value for an element • placeholder= “hint for input” • Required • list: with <datalist> to provide a list of predefined options

13. Text Fields in a Form <input type="text" /> <input type="password" /> <input type="file" /> <textarea> 13

14. Text Fields in a Form <input type="text" /> A text field is an empty field that is one line high and of a given length that accepts a single line of input from a user. <input type = "text" name ="courseName" size = "30" maxlength="50" value = “INT222"/> <input type="text" name="name" placeholder=“Your name"> 14

15. <datalist> • <datalist>: specifies a list of pre-defined options for an <input> element. • To provide an "autocomplete" feature on <input> elements. • Users will see a drop-down list of pre-defined options as they input data. (form_ex_3.html) Department: <input list = "department"/> <datalist id = "department"> <option value = "IT"> IT </option> <option value = "Finance"> Finance </option> <option value = "Sales"> Sales </option> </datalist>

16. Text Fields in a Form <input type=“password" /> what the user types does not display on the screen. Instead it is masked by some masking character, such as an asterisk. Note: the password type only secures the information from prying eyes, it does not secure it from prying programs. The data written into the field is still stored as a string of plain text and is still transmitted unencrypted unless a secure transmission method is used. Type in your password: <input type='password' name='password' /> 16

17. Text Fields in a Form <input type="file“ multiple /> Allows the user to select a file to be sent back to the server by browsing the directories. The file name is included as a text string which the browser uses to retrieve the document. In order to use this type of data field, you must set your method to post. <p> Select a file: <input type="file" name = "listFile" /> </p> 17

18. <textarea> </textarea>: allows for multi-line input fields. attributes: - rows = “height of the textarea in character” i.e., the number of lines up - cols = “width of the textarea in character” i.e., the number of characters across. - name = “symbolic name of the text entry field“ <textarea name="comments“ cols="30“ rows="10"> Input your comments: </textarea> Text Fields in a Form 18

19. Selection Fields in a Form Selection fields allow you to choose from a selection of options. These choices can be exclusive, in the case of radio buttons, meaning you can only select one, or can be non-exclusive, such as checkboxes, meaning you can choose many from a list. The selection field types are: <input type="checkbox" /> <input type="radio" /> <select> 19

20. Selection Fields in a Form <input type="checkbox" /> The checkbox input type creates an item that can be checked or unchecked. When sending data from checkboxes, only the data from selected checkboxes is sent. Blank, unselected checkboxes have no data sent. Attributes: value = “data” : data sent to server checked = “checked”: pre-selected Although the items appear to be in a list, each one is a separate data field that is returned separately when the data is submitted. Since the items are a list, you can choose to name each element separately, or you can name all the elements in the list with the same name. 20

21. Selection Fields in a Form <input type="radio" /> similar to the function of the checkbox, except that only one option can be selected at a time. All fields in a radio button group should also have the same name, since they are all different possible values for the same variable The radio button list will always return only one value. Attributes: - value = “data” : data sent to server - checked = “checked”: pre-selected - only one radio button in a button grouping can be marked as checked. 21

22. <label> tag • Define a label <input> element. • It does not render as anything special for the user. • It provides a usability improvement for mouse users, • if the user clicks on the text within the <label> element, it toggles the control. • The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

23. Example <input type="radio" name="gender" id = "female" value="Female" checked/> <label for ="female">Female </label> <input type="radio" name="gender" id = "male" value="Male"/> Male </p> <p> <input type="checkbox" name="music"id = “music” value="music" /> <labelfor = “music”> music </label> </p> <p> <input type="checkbox" name="hobbies" value="sports" /> sports </p> <p> <input type="checkbox" name="hobbies" value="reading" checked = "checked"/> reading </p> form_ex_2.html

24. Selection Fields in a Form <select> … </select> create a drop down menu or scrollable list of selectable choices. Ex: (form_ex_2.html) <p> the interested topics: </p> <select name="topics"> <option value="web design"> web design </option> <option value="programming" label="programming"> programming</option> <option>database</option> </select> 24

25. Selection List 25 The selection list itself is defined by a series of <option> tags. The name to the <select> tag applies to the entire list. If more than one option is selected in the list, the options are all sent to the server under that one variable name as a comma separated list.

26. Selection Fields in a Form <select> … </select> Attributes: - multiple="multiple“: allows users to select more than one option, usually by holding down the Control key while clicking on additional choices. Otherwise the selection functions like radio buttons where selecting one deselects another. - size = “ how many lines are display in the selection menu” ** If the size is not specified or if it is set to a value of one (size="1") then a single line is displayed and the selection menu functions as a drop down menu. ** If a number larger than one is specified, then the menu functions as a scrollable list. 26

27. Selection Fields in a Form <select> … </select> The <option> … </option> tag is what is used to define the individual selectable elements in the menu. one <option> tag <->for each item. The contents between the tag is what shows up in the menu listing. The value attribute is the value that is returned by selecting that option. If a value is not specified, the contents of the option tag are returned. 27

28. Selection Fields in a Form <select> … </select> <optgroup> tag to group things by category. <p> the details of the topics: </p> <select multiple="multiple" name="topics_detail" size="4"> <optgroup label="web design"> <option selected="selected" value="XHTML"> XHTML </option> <option value="frames">Frames</option> <option value="forms"> Forms </option> </optgroup> <optgroup label="programming"> <option selected = "c language" value="c language"> C language </option> <option value = "Java"> Java </option> </optgroup> </select> form_selection.html 28

29. Form Buttons Buttons are selectable icons that perform some action when clicked on. They are sometimes called action buttons since some action occurs when one is clicked on. The different types of buttons are: - <input type="button" /> - <input type="image" /> - <input type="submit" /> - <input type="reset" /> - <button> 29

30. Form Buttons <input type="submit" /> <input type="reset" /> Allow users to submit the data and to reset the form, respectively. “submit”: submit form to the server as per the method and action attributes of the form. “reset”: does not send anything back to the server. It clears and resets the form. 30

31. Form Buttons If you do not provide value attributes for these buttons then they have default names that are system dependent. If you provide a name attribute for the submit button, then you must also provide a value, since that value will be sent back associated with the name. There is no need to assign a name to reset button, although it can be assigned a value if you want a reset message other than the default. 31

32. Form Buttons - examples Submit buttons: <input type="submit" /> <input type="submit" value="This is a submit button" /> <input type="submit" name="test1" value="This is another" /> Reset buttons: <input type="reset" /> <input type="reset" value="My Reset Button" /> Example: form_ex_buttons.html 32

33. Form Buttons <input type="image" /> Use image as the submit button. The submission includes: - data of the form - x, y coordinates of the mouse click within the image. <input type="image" src= “../img/seneca_logo.gif" width = “90" height = “40" border = "2"/> Example: form_ex_buttons.html 33

34. Form Buttons <input type="button" /> An action button that is neither a submit button nor a reset button. Does absolutely nothing, unless you tell it to. Needs to be associated with event attributes that determine what to do when the button is selected. <input type="button" value="Press This Button" onclick="window.alert('using type =button....')" /> Example: form_ex_buttons.html 34

35. Form Buttons <button> </button> The <button> tag allows you to perform most of the above actions with greater flexibility. <button> content showing as button </button> type attributes: - <button type="submit"> - <button type="reset"> - <button type="button"> Example: form_ex_buttons.html 35

36. Accessing Fields use the tabindex attribute to specify a tab order. The tab index starts at one (1) and increases with adding items. If tabindex=“0“ or tabindex="-1“ (negative number), then the field cannot be tabbed to, although it can still be selected with the mouse. <p > Course: <input type = "text" name ="courseName" size = "30" maxlength="50" value = “BTI220“ tabindex = "1" /> </p> <p> Name: <input type="text" name="MyName" size="30" maxlength="50" tabindex ="20"/> </p> <p> Question: <input type="text" name="Quest" size="30" maxlength="100" tabindex = "10"/> </p> 36

37. Grouping Fields <fieldset>: grouping the fields <legend>: specifying a title for the group <fieldset> <legend>Some Questions</legend> <p > Course: <input type = "text" name ="courseName" size = "30" maxlength="50" value = “BTI220"/> </p> <p> Name: <input type="text" name="MyName" size="30" maxlength="50“/> </p> </fieldset> Example: form_ex_advanced.html 37

38. Remarks about Forms HTML itself does not control what is entered in text fields or validate the data entered. Two possible solutions: (1) use clear and concise directions for the form (2) write client-side or server-side programs to test the data before sending it to the program that is supposed to process it. 38

39. Remarks about Forms Try to make the browser window user-friendly. Clear directions for all form elements. Make sure fields are neatly arranged and are sized to reflect the content that goes in them. Use selection buttons rather than text boxes whenever possible to reduce the number of possible answers the user can give or must choose from. 39

40. Remarks about Forms Nice structure and flow - Structure: grouping the form into coherent units. - Structure allows to break the form up into smaller units, - Flow: having the coherent units cohere into a narrative that the user can work their way through. - Flow ensures that people don't get lost moving through the form. - In other words, things should be grouped sensibly and in a sensible order. 40

41. Lab 5 • Practice on forms

42. Next Class • Client-side validation

43. Thank you!