1 / 68

Mastering HTML Form Elements: A Practical Guide for Web Developers

Learn how to create effective web forms with HTML. This guide covers form tags, input elements, attributes, and more. Test your knowledge with practice exercises.

colettem
Download Presentation

Mastering HTML Form Elements: A Practical Guide for Web Developers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Unit 6 – HTML Forms Instructor: Brent Presley

  2. in class preparation • download unit 6 - HTML Forms (start) • it's on onedrive in Web Programming/ Inclass folder • download brackets and install on your machine

  3. Form elements • Web pages, via HTML, have the ability to gather data from the user and return that data to the server • Many of our favorite input objects such as text boxes, command buttons, check boxes are available to get data via a web form • Form elements must be included in a <form> tag (2-sided)

  4. Form Tag • The form tag is used to create an HTML form for user input • the <form> element can contain one or more of the following: • <input> <textarea> <button> <select> <option> <optgroup> <fieldset><label>

  5. get vs post • get: requests data from a specified source • post: submits data to be processed to a specified source • https://www.youtube.com/watch?v=576WwU7xlWU • https://www.youtube.com/watch?v=9o_4lsOkQ3g

  6. Form tag • The method attribute defines how the browser should submit the form data. There are two methods you can use: get and post. • method="post" • Sends form data to the server (invisible to user) • method="get" .. this is the default • Adds form data to the site URL and sends to the server (visible to the user)

  7. Actions • action="your action here" • Designates the name of a script on the server that is to process the form inputs • Can be empty for basic testing • This attribute tells the browser the location of the script that will process this form. Normally, this is a JavaScript, Perl script, or other program located on the web server • Use http://www.volkergaul.com/MSTC/HTMLFormTest.php as the action to send your form data to a test page on Volkers website. • The test page will display the data it received from your form. • Capitalize the web address exactly as it appears above (web server is case sensitive)

  8. quick test of the form • Can use "mailto:myaddress@email.com" as a quick test of your form. • Sends all form data concatenated into a string to the address you specify. • all form data concatenated into a string to the address you specify. • One page can include multiple form tags, but the form tags cannot be nested inside each other

  9. practice • Add form tag • id=”theForm” • method=”post” • link to your e-mail to test • then link to HTMLFormTest.php

  10. Input tag • Most form objects are enclosed in an <input> tag • The tag’s type attribute defines what type of input control this is: • type = "text" • type = "password" • type = "checkbox" • type = "radio" • type = "hidden" • type = "submit" • type = "reset" • type = "button" • type = "image"

  11. Name Attribute • Valid only on <a>, <form>, <iframe>, <img>, <map>, <input>, <select>, <textarea> • Name does not have to be unique, and can be used to group elements together such as radio buttons & checkboxes • Can not be referenced in URL, although as JavaScript and PHP can see the URL there are workarounds • Is referenced in JS with getElementsByName() • Shares the same namespace as the id attribute • Must begin with a letter • According to specs is case sensitive, but most modern browsers don't seem to follow this • Used on form elements to submit information. Only input tags with a name attribute are submitted to the server

  12. ID attribute • Valid on any element except <base>, <html>, <head>, <meta>, <param>, <script>, <style>, <title> • Each Id should be unique in the page as rendered in the browser, which may or may not be all in the same file • Can be used as anchor reference in URL • Is referenced in CSS or URL with # sign • Is referenced in JS with getElementById(), and jQuery by $(#<id>) • Shares same name space as name attribute • Must contain at least one character • Must begin with a letter • Must not contain anything other than letters, numbers, underscores (_), dashes (-), colons (:), or periods (.) • Is case insensitive

  13. additional tags • Each input tag should include an id element and a name element to distinguish one element from another in code. • ID can be used by JavaScript to validate the contents of the form object. • Name sent to server side processing (PHP) • I put prefix (txt, rdo, etc.) on name • not on ID • Text to appear next to the input control must be included after or before the input tag.

  14. test your form • Add a textbox (username) to the form. • Test by going to the test website • www.volkergaul.com/MSTC/HTMLFormTest.php • verify that the information you sent is what was received by the page

  15. label • NOT like labels in C#. • Tag that associates visible text with a form element • Accessibility feature: easier for screen readers to associate the label of an object with the object itself. • Can click in either the label or the control to set focus to that control

  16. label • Start each input with the <label> tag, • followed by the text to appear on the form (caption), • followed by </label> • followed by the input (or other) tag • The <label> tag should include a for="id" attribute that designates which input this is the label for. • Allows label and input to be in different table cells

  17. update your form • add a textbox to the form (username) • Test • Add label for first element (for txtUsername) • Test (click label)

  18. Text boxes • input type= "text" • Text box can scroll if length>size • value="default" vs placeholder • placeholder is html5 • autofocus (HTML5) • Automatically places focus in this object on page load • <input type="text" name="sample" id="sample" autofocus>

  19. autofocus • This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it • Only one form element in a document can have the autofocus attribute • It cannot be applied if the type attribute is set to hidden • (that is, you cannot automatically set focus to a hidden control).

  20. Required attribute • This attribute specifies that the user must fill in a value before submitting a form. • Cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button).

  21. update your forms textbox • Modify txtUsername • Set size 20 • Set length 50 • Set length 20 • Set default/placeholder value of "type here" • Add Title of "Enter a name" • Autofocus • Required

  22. Text boxes -autocomplete • Autocomplete (HTML5) • Most browsers will remember previously typed values. • Setting autocomplete to off (it’s on by default) prevents this from happening <input type="text" name="sample" id="sample" autocomplete="off">

  23. List • Identifies a list of pre-defined options to suggest to the user. • The value must be the id of a <datalist> element in the same document. • The browser displays only options that are valid values for this input element. • This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.

  24. list • Only works with input type="text" • No arrow to designate list is available • Almost looks like autocomplete, but list is fixed rather than user-defined

  25. placeholder • A hint to the user of what can be entered in the control. • Text must not contain carriage returns or line-feeds. • This attribute applies when the value of the type attribute is text, search, tel, url or email; otherwise it is ignored. • as soon as the field receives focus, the text disappears

  26. placeholder vs label • Do not use the placeholder attribute instead of a <label> element. Their purposes are different • The <label> attribute describes the role of the form element; that is, it indicates what kind of information is expected • The placeholder attribute is a hint about the format the content should take. • There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.

  27. update the form • Insert placeholder for textbox • create a list of any type • the list must have 3 elements in it

  28. Text area • Multi-line text box • Note this input type is NOT included in an <input> tag • <textarea>Default text </textarea> • rows="x" (height of text area) • cols="y" (width of text area, characters) • Scroll bars appear if more than "x" rows of text are entered • Do not include any tabs or Enter keys between <textarea> and </textarea> -- they will be included in the text area.

  29. password • Similar text box but inputs are masked • Actual value typed (not mask) is sent to server

  30. update your form • Add label and textarea (comments) 5 rows 20 columns. • Add default text, then remove default text • Set vertical-align top • Add label and password (pwd) size 20 length 20 minlength of 6 • verify you can only put 20 characters in the password box

  31. update your form • Set vertical-align top • textarea { vertical-align: top; }

  32. buttons • type = "submit" • submits the form data to the server which causes the action method to occur on the server. This is the default if the attribute is not spcified. • type = "reset" • Clears/resets all the input objects on the form • type="button" • No default behavior. It can have client side scripts (JavaScript) associated with the elements events, which are triggered when the event occurs • value = "caption" …. the text to appear on the button

  33. update form • Add Send Data button • Add Clear Form button • Apply formStyle css to the form element

  34. Image buttons • Spruce up forms by replacing boring, standard buttons with image buttons in 2 ways • 1. <input type="image" src="~~~" alt="~~~" > • Automatically results in a submit • 2. <button type="submit"> <img src="~~" alt="~~~" width="#" height="#" > </button> turns the entire form object into a button

  35. Image buttons • Adds a non-removable border around the image to make it look like a button • If type is not provided, submits. • Type can be reset • Type can be button (do nothing, but link to JavaScript)

  36. update your form • obtain a green play button and red stop button • Add GreenPlayButton.png as image button • Add RedStopButton.png as image within button

  37. Check boxes • type = "checkbox" • value = "text" • value to be sent to the server when checked • Nothing sent to server when unchecked • If no value is specified, “on” sent to server when checked • checked = "checked"

  38. Add label and check box for smoker. • Checked • Unchecked

  39. Radio buttons • type = "radio" • All buttons in a group must have the same name • Each must have a unique value • Note values are not displayed on form • checked = "checked"

  40. Add text (not label) Select favorite color • Add labels (favcolor) and radio buttons (red, blue, green) • Assign values to each

  41. Combo/dropdown/list boxes • Not an <input> • <select> • size="1" (combo) • Size > 1 results in list box • multiple allows multiple selections in the list box • Ctrl- or Shift-click to select multiple • <option> text here </option> • <option selected> • Each option shouldhave a valueattribute. Thisiswhatissent to the server. • Values do nothave to match the text in option • BIG NOTE: if multi-select, name must include [ ]

  42. Combo boxes and list boxes don’t have placeholders, but you can provide an initial option such as Select your favorite color. • If this field is required, use JavaScript to ensure the placeholder is not still selected • Add the disabledattribute to the select field to prevent the user from reselecting the placeholder after selecting another option.

  43. Add label and select (favclass) • Systems Implementation • Web Data Management • RPG-Intermediate • PC Troubleshooting • Select one • Add label and select (favday), size=3, multiple (Mon-Sun)

  44. Group boxes • Surround input objects with <fieldset> </fieldset> • To add a caption to the group box (field set), include a <legend>Legend Text Here</legend> immediately after the <fieldset> tag

  45. Field set can include a legend • appears on top edge of border created by fieldset • <legend>Your title here</legend> • Apply any formatting to the text in the legend, not the legend itself • Add fieldset and legend to radio buttons (remove text)

  46. Hidden inputs • Like constants • Allow you send data to the server that the user didn’t enter • type = "hidden" • value = "constant" • Value to be sent to the server

  47. Hidden inputs • Examples: • <input type="hidden" name="recipient" • value="myemail@somewhere.com" > • <input type="hidden" name="subject" • value="Email subject here" > • <input type="hidden" name="redirect" • value="someotherpage.htm" > • Also used in PHP to send signals from one page to another

  48. Add hidden inputs below form tag

More Related