HTML Forms Tutorial
Download as PPTX, PDF1 like2,169 views
This document provides an overview of creating and submitting forms in ProdigyView. It discusses the required understanding of HTML form elements and PVHtml. It then demonstrates creating a basic form using various form elements like text inputs, textareas, buttons, selects, radios, checkboxes and more. It also discusses options that can be passed to form elements to define attributes. The document encourages reviewing the PVForms API reference and checking additional tutorials for more details.
HTML Forms Tutorial
- 1. Basic HTML Forms Tutorial www.prodigyview.com
- 2. Overview Objective Learn how to create and submit forms in ProdigyView. Requirements Understanding of HTML form element tags Understanding of PVHtml Estimated Time 11 minutes www.prodigyview.com
- 3. Follow Along With A Code Example 1. Download a copy of the example code at www.prodigyview.com/source. 2. Install the system in an environment you feel comfortable testing in. 3. Proceed to examples/template/Forms.php www.prodigyview.com
- 4. Starting and Ending The Form To begin this tutorial, we need to outline the area of the form. Start with a PVForms:formBegin() and PVForms::formEnd() methods. Set the submission method as a post 1. 2. Display Form Content and Elements Here Set the enctype to multipart for file uploads 3. www.prodigyview.com
- 5. Labels Tag: <label></label> Purpose: Defines the header that describes an input field in a form. The text to go in the form tags Set the for attribute, that corresponds with the input element id
- 6. Text Input Tag: <input type=“text” /> Purpose: Display a single line of text to enter information into. The name of the input element
- 7. TextArea Tag: <textarea></textarea> Purpose: Defines a multiline text field that holds an unlimited amount of characters www.prodigyview.com
- 8. Button Tag: <button></button> or <input type=“button” /> Purpose: Create a clickable button. A button’s content can either be set to be text or an image. 1. Name of the button 2. Set an inline style for the button 3. Value for the button to display
- 9. Options for Form Elements Referring to our last slide, notice how we can pass values for defining the style or value of an element in an array. Every form html element in ProdigyView takes in options. These options can be used to define elements in the tags, as you will see throughout this tutorial. Options that can be added include but are not limited to: class title onblur id onabort onfocus dir onmousedown accesskey lang onmouseup xml:lang style onclick spellcheck
- 10. Password Tag: <input type=“password” /> Purpose: Displays a password field for users entering a password or other sensitive. Values typed are replaced with a generic character such as ‘*’. www.prodigyview.com
- 11. Select Tag: <select> <option></option> </select> Purpose: Display a list or a combo box of options for a user to pick one or multiple options. 1. Create the options as an array 2. Set the options in a select 3. Set the id of the select element
- 12. File Tag: <input type=“file” /> Purpose: A field in which a file to be uploaded can be placed into. Remember the form enctype should be set to mutlipart/form- data and the file information will be in the $_FILE array.
- 13. Radio Buttons Tag: <input type=“radio” /> Purpose: Create a radio button. Radio buttons will be considered separate elements unless they have the same name. 1. Assign the radio buttons with the 2. Set the value of the radio same name buttons in the options 3. IMPORTANT: By default, ProdigyView wraps all form tags in a div. The option disable_css will remove that surrounding div.
- 14. CSS Options The difference between HTML elements from PVHtml and the elements in PVForms is the last option, css_options. By default the value is an empty array and does not have to specified. In our last slide, we disabled the css_options which disabled the default surrounding div. We could have also passed attributes such as id, style, or class which would have also changed the behavior of the surrounding div.
- 15. CheckBox Tag: <input type=“checkbox” /> Purpose: Creates a checkbox. Checkboxes are normally defined as either on or off. www.prodigyview.com
- 16. Hidden Tag: <input type=“hidden” /> Purpose: Holds a value in an input field that is not visible to the user. www.prodigyview.com
- 17. Submit Tag: <input type=“submit” /> Purpose: Submit the values for the current form to be processed. www.prodigyview.com
- 18. API Reference For a better understanding of the HTML elements, check out the api at the two links below. PVForms More Tutorials For more tutorials, please visit: http://www.prodigyview.com/tutorials www.prodigyview.com