Learn how to create and submit basic html forms in ProdigyView.

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