HTML Forms Tutorial

HTML Forms Tutorial

• 1.
  Basic HTML FormsTutorial www.prodigyview.com
• 2.
  Overview Objective Learn how tocreate 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 WithA 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 EndingThe 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 headerthat 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 multilinetext field that holds an unlimited amount of characters www.prodigyview.com
• 8.
  Button Tag: <button></button> or <inputtype=“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 FormElements 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: Displaysa 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: Afield 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 differencebetween 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: Createsa checkbox. Checkboxes are normally defined as either on or off. www.prodigyview.com
• 16.
  Hidden Tag: <input type=“hidden” /> Purpose: Holdsa value in an input field that is not visible to the user. www.prodigyview.com
• 17.
  Submit Tag: <input type=“submit” /> Purpose: Submitthe values for the current form to be processed. www.prodigyview.com
• 18.
  API Reference For abetter 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