Your SlideShare is downloading. ×
HTML Forms Tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

HTML Forms Tutorial

2,278
views

Published on

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

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

Published in: Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,278
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
30
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Basic HTML Forms Tutorial www.prodigyview.com
  • 2. OverviewObjectiveLearn how to create and submit forms in ProdigyView.Requirements Understanding of HTML form element tags Understanding of PVHtmlEstimated Time11 minutes www.prodigyview.com
  • 3. Follow Along With A Code Example1. 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 post1.2. Display Form Content and Elements Here Set the enctype to multipart for file uploads3. www.prodigyview.com
  • 5. 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
  • 6. Text InputTag:<input type=“text” />Purpose:Display a single line of text to enter information into. The name of the input element
  • 7. TextAreaTag:<textarea></textarea>Purpose:Defines a multiline text field that holds an unlimitedamount of characters www.prodigyview.com
  • 8. ButtonTag:<button></button> or <input type=“button” />Purpose:Create a clickable button. A button’s content can either beset to be text or an image.1. Name of the button2. Set an inline style for the button 3. Value for the button to display
  • 9. Options for Form ElementsReferring to our last slide, notice how we can pass valuesfor 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 thetags, as you will see throughout this tutorial. Options thatcan 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. PasswordTag:<input type=“password” />Purpose:Displays a password field for users entering a passwordor other sensitive. Values typed are replaced with ageneric 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. 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.
  • 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 radiosame name buttons in the options3. IMPORTANT: By default, ProdigyView wraps all form tags in a div. The optiondisable_css will remove that surrounding div.
  • 14. CSS OptionsThe difference between HTML elements from PVHtmland the elements in PVForms is the lastoption, css_options.By default the value is an empty array and does not haveto specified.In our last slide, we disabled the css_options whichdisabled the default surrounding div. We could have alsopassed attributes such as id, style, or class which wouldhave also changed the behavior of the surrounding div.
  • 15. CheckBoxTag:<input type=“checkbox” />Purpose:Creates a checkbox. Checkboxes are normally defined aseither on or off. www.prodigyview.com
  • 16. HiddenTag:<input type=“hidden” />Purpose:Holds a value in an input field that is not visible to theuser. www.prodigyview.com
  • 17. SubmitTag:<input type=“submit” />Purpose:Submit the values for the current form to be processed. www.prodigyview.com
  • 18. API ReferenceFor a better understanding of the HTML elements, checkout the api at the two links below.PVForms More TutorialsFor more tutorials, please visit:http://www.prodigyview.com/tutorials www.prodigyview.com