html forms tutorial
DESCRIPTION
Learn how to create and submit basic html forms in ProdigyView.TRANSCRIPT
![Page 2: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/2.jpg)
OverviewObjective
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
![Page 3: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/3.jpg)
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
![Page 4: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/4.jpg)
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.
Display Form Content and Elements Here
1.
2.
3.
Set the submission method as a post
Set the enctype to multipart for file uploads
www.prodigyview.com
![Page 5: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/5.jpg)
LabelsTag:
<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
![Page 6: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/6.jpg)
Text Input
Tag:
<input type=“text” />
Purpose:
Display a single line of text to enter information into.
The name of the input element
![Page 7: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/7.jpg)
TextAreaTag:
<textarea></textarea>
Purpose:
Defines a multiline text field that holds an unlimited amount of characters
www.prodigyview.com
![Page 8: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/8.jpg)
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
![Page 9: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/9.jpg)
Options for Form ElementsReferring 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
id
dir
lang
style
title
onabort
onmousedown
onmouseup
onclick
onblur
onfocus
accesskey
xml:lang
spellcheck
![Page 10: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/10.jpg)
PasswordTag:
<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
![Page 11: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/11.jpg)
SelectTag:
<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
![Page 12: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/12.jpg)
FileTag:
<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.
![Page 13: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/13.jpg)
Radio ButtonsTag:
<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 same name
2. Set the value of the radio 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.
![Page 14: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/14.jpg)
CSS OptionsThe 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.
![Page 15: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/15.jpg)
CheckBoxTag:
<input type=“checkbox” />
Purpose:
Creates a checkbox. Checkboxes are normally defined as either on or off.
www.prodigyview.com
![Page 16: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/16.jpg)
HiddenTag:
<input type=“hidden” />
Purpose:
Holds a value in an input field that is not visible to the user.
www.prodigyview.com
![Page 17: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/17.jpg)
SubmitTag:
<input type=“submit” />
Purpose:
Submit the values for the current form to be processed.
www.prodigyview.com
![Page 18: HTML Forms Tutorial](https://reader033.vdocuments.us/reader033/viewer/2022061206/548287b7b07959650c8b47bd/html5/thumbnails/18.jpg)
API ReferenceFor a better understanding of the HTML elements, check out the api at the two links below.
PVForms
www.prodigyview.com
More Tutorials
For more tutorials, please visit:
http://www.prodigyview.com/tutorials