SlideShare a Scribd company logo
Basic HTML Forms Tutorial




        www.prodigyview.com
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
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
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
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
Text Input
Tag:

<input type=“text” />

Purpose:

Display a single line of text to enter information into.




                        The name of the input element
TextArea
Tag:

<textarea></textarea>

Purpose:

Defines a multiline text field that holds an unlimited
amount of characters




                      www.prodigyview.com
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
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
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
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
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.
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.
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.
CheckBox
Tag:
<input type=“checkbox” />
Purpose:
Creates a checkbox. Checkboxes are normally defined as
either on or off.




                    www.prodigyview.com
Hidden
Tag:

<input type=“hidden” />

Purpose:

Holds a value in an input field that is not visible to the
user.




                       www.prodigyview.com
Submit
Tag:

<input type=“submit” />

Purpose:

Submit the values for the current form to be processed.




                     www.prodigyview.com
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

More Related Content

What's hot (20)

HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
tina1357
 
Html form tag
Html form tagHtml form tag
Html form tag
shreyachougule
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
hrisi87
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
Html forms
Html formsHtml forms
Html forms
eShikshak
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
Mudasir Syed
 
Html forms
Html formsHtml forms
Html forms
Himanshu Pathak
 
Html forms
Html formsHtml forms
Html forms
nobel mujuji
 
20 html-forms
20 html-forms20 html-forms
20 html-forms
Kumar
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
Html forms
Html formsHtml forms
Html forms
Abhishek Kesharwani
 
Web design - Working with forms in HTML
Web design - Working with forms in HTMLWeb design - Working with forms in HTML
Web design - Working with forms in HTML
Mustafa Kamel Mohammadi
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
Saad Sheikh
 
Building html forms
Building html formsBuilding html forms
Building html forms
ice es
 
Entering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML FormsEntering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML Forms
sathish sak
 
Html form
Html formHtml form
Html form
Jaya Kumari
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
Jesus Obenita Jr.
 
HTML
HTML HTML
HTML
Emertxe Information Technologies Pvt Ltd
 
05 html-forms
05 html-forms05 html-forms
05 html-forms
Palakshya
 
HTML5 - Forms
HTML5 - FormsHTML5 - Forms
HTML5 - Forms
tina1357
 
Forms in html5
Forms in html5Forms in html5
Forms in html5
hrisi87
 
Web engineering - HTML Form
Web engineering -  HTML FormWeb engineering -  HTML Form
Web engineering - HTML Form
Nosheen Qamar
 
Web forms and html lecture Number 4
Web forms and html lecture Number 4Web forms and html lecture Number 4
Web forms and html lecture Number 4
Mudasir Syed
 
20 html-forms
20 html-forms20 html-forms
20 html-forms
Kumar
 
[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags[Basic HTML/CSS] 4. html - form tags
[Basic HTML/CSS] 4. html - form tags
Hyejin Oh
 
Form using html and java script validation
Form using html and java script validationForm using html and java script validation
Form using html and java script validation
Maitree Patel
 
Html tables, forms and audio video
Html tables, forms and audio videoHtml tables, forms and audio video
Html tables, forms and audio video
Saad Sheikh
 
Building html forms
Building html formsBuilding html forms
Building html forms
ice es
 
Entering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML FormsEntering User Data from a Web Page HTML Forms
Entering User Data from a Web Page HTML Forms
sathish sak
 
Designing web pages html forms and input
Designing web pages html  forms and inputDesigning web pages html  forms and input
Designing web pages html forms and input
Jesus Obenita Jr.
 
05 html-forms
05 html-forms05 html-forms
05 html-forms
Palakshya
 

Similar to HTML Forms Tutorial (20)

Html Tags Tutorial
Html Tags TutorialHtml Tags Tutorial
Html Tags Tutorial
ProdigyView
 
HTML (part ii).pptx
HTML (part ii).pptxHTML (part ii).pptx
HTML (part ii).pptx
techsupport70
 
Lect15
Lect15Lect15
Lect15
maamir farooq
 
Aspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_csAspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_cs
Murali G
 
Chapter09
Chapter09Chapter09
Chapter09
Sreenivasan G
 
HTML 5
HTML 5HTML 5
HTML 5
Yaowaluck Promdee
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
Jesus Cortes
 
Html5 - Tutorial
Html5 - TutorialHtml5 - Tutorial
Html5 - Tutorial
adelaticleanu
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
E-Bazaar
E-BazaarE-Bazaar
E-Bazaar
ayanthi1
 
FlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
FlexNet Delivery and FlexNet Operations On-Demand Tips & TricksFlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
FlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
Flexera
 
M02 un11 p01
M02 un11 p01M02 un11 p01
M02 un11 p01
Intan Jameel
 
HTML-Forms
HTML-FormsHTML-Forms
HTML-Forms
Ahmed Saihood
 
1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf
AAFREEN SHAIKH
 
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docxCS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
mydrynan
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
Russ Weakley
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
Kyle Cearley
 
331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet
stephen972973
 
Html5 tutorial
Html5 tutorialHtml5 tutorial
Html5 tutorial
Ali Haydar(Raj)
 
Html Tags Tutorial
Html Tags TutorialHtml Tags Tutorial
Html Tags Tutorial
ProdigyView
 
Aspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_csAspnet mvc tutorial_9_cs
Aspnet mvc tutorial_9_cs
Murali G
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
ZahouAmel1
 
HTML5 Tags and Elements Tutorial
HTML5 Tags and Elements TutorialHTML5 Tags and Elements Tutorial
HTML5 Tags and Elements Tutorial
ProdigyView
 
FlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
FlexNet Delivery and FlexNet Operations On-Demand Tips & TricksFlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
FlexNet Delivery and FlexNet Operations On-Demand Tips & Tricks
Flexera
 
1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf1. Advanced Web Designing (12th IT) (1).pdf
1. Advanced Web Designing (12th IT) (1).pdf
AAFREEN SHAIKH
 
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docxCS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
CS 2336 PROJECT 3 – Linked Inventory Management Project Due 1104 b.docx
mydrynan
 
Accessible names & descriptions
Accessible names & descriptionsAccessible names & descriptions
Accessible names & descriptions
Russ Weakley
 
Building Potent WordPress Websites
Building Potent WordPress WebsitesBuilding Potent WordPress Websites
Building Potent WordPress Websites
Kyle Cearley
 
331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet331592291-HTML-and-Cascading style sheet
331592291-HTML-and-Cascading style sheet
stephen972973
 
Ad

More from ProdigyView (20)

Installing Plug-ins
Installing Plug-insInstalling Plug-ins
Installing Plug-ins
ProdigyView
 
Building An Application
Building An ApplicationBuilding An Application
Building An Application
ProdigyView
 
Installing Applications
Installing ApplicationsInstalling Applications
Installing Applications
ProdigyView
 
Video Content Management
Video Content ManagementVideo Content Management
Video Content Management
ProdigyView
 
Audio Content Management
Audio Content ManagementAudio Content Management
Audio Content Management
ProdigyView
 
File Content Management
File Content ManagementFile Content Management
File Content Management
ProdigyView
 
Email Configuration
Email ConfigurationEmail Configuration
Email Configuration
ProdigyView
 
Video Conversion PHP
Video Conversion PHPVideo Conversion PHP
Video Conversion PHP
ProdigyView
 
Sending Email Basics PHP
Sending Email Basics PHPSending Email Basics PHP
Sending Email Basics PHP
ProdigyView
 
Tools ProdigyView
Tools ProdigyViewTools ProdigyView
Tools ProdigyView
ProdigyView
 
Custom Validation PHP
Custom Validation PHPCustom Validation PHP
Custom Validation PHP
ProdigyView
 
Basic File Cache Tutorial - PHP
Basic File Cache Tutorial - PHPBasic File Cache Tutorial - PHP
Basic File Cache Tutorial - PHP
ProdigyView
 
Understanding Web Cache
Understanding Web CacheUnderstanding Web Cache
Understanding Web Cache
ProdigyView
 
Javascript And CSS Libraries
Javascript And CSS LibrariesJavascript And CSS Libraries
Javascript And CSS Libraries
ProdigyView
 
PHP Libraries
PHP LibrariesPHP Libraries
PHP Libraries
ProdigyView
 
SQL Prepared Statements Tutorial
SQL Prepared Statements TutorialSQL Prepared Statements Tutorial
SQL Prepared Statements Tutorial
ProdigyView
 
Database Basics
Database BasicsDatabase Basics
Database Basics
ProdigyView
 
Implementing the Adapter Design Pattern
Implementing the Adapter Design PatternImplementing the Adapter Design Pattern
Implementing the Adapter Design Pattern
ProdigyView
 
Intercepting Filters Design Pattern
Intercepting Filters Design PatternIntercepting Filters Design Pattern
Intercepting Filters Design Pattern
ProdigyView
 
Creating Dynamic Objects PHP
Creating Dynamic Objects PHPCreating Dynamic Objects PHP
Creating Dynamic Objects PHP
ProdigyView
 
Installing Plug-ins
Installing Plug-insInstalling Plug-ins
Installing Plug-ins
ProdigyView
 
Building An Application
Building An ApplicationBuilding An Application
Building An Application
ProdigyView
 
Installing Applications
Installing ApplicationsInstalling Applications
Installing Applications
ProdigyView
 
Video Content Management
Video Content ManagementVideo Content Management
Video Content Management
ProdigyView
 
Audio Content Management
Audio Content ManagementAudio Content Management
Audio Content Management
ProdigyView
 
File Content Management
File Content ManagementFile Content Management
File Content Management
ProdigyView
 
Email Configuration
Email ConfigurationEmail Configuration
Email Configuration
ProdigyView
 
Video Conversion PHP
Video Conversion PHPVideo Conversion PHP
Video Conversion PHP
ProdigyView
 
Sending Email Basics PHP
Sending Email Basics PHPSending Email Basics PHP
Sending Email Basics PHP
ProdigyView
 
Tools ProdigyView
Tools ProdigyViewTools ProdigyView
Tools ProdigyView
ProdigyView
 
Custom Validation PHP
Custom Validation PHPCustom Validation PHP
Custom Validation PHP
ProdigyView
 
Basic File Cache Tutorial - PHP
Basic File Cache Tutorial - PHPBasic File Cache Tutorial - PHP
Basic File Cache Tutorial - PHP
ProdigyView
 
Understanding Web Cache
Understanding Web CacheUnderstanding Web Cache
Understanding Web Cache
ProdigyView
 
Javascript And CSS Libraries
Javascript And CSS LibrariesJavascript And CSS Libraries
Javascript And CSS Libraries
ProdigyView
 
SQL Prepared Statements Tutorial
SQL Prepared Statements TutorialSQL Prepared Statements Tutorial
SQL Prepared Statements Tutorial
ProdigyView
 
Implementing the Adapter Design Pattern
Implementing the Adapter Design PatternImplementing the Adapter Design Pattern
Implementing the Adapter Design Pattern
ProdigyView
 
Intercepting Filters Design Pattern
Intercepting Filters Design PatternIntercepting Filters Design Pattern
Intercepting Filters Design Pattern
ProdigyView
 
Creating Dynamic Objects PHP
Creating Dynamic Objects PHPCreating Dynamic Objects PHP
Creating Dynamic Objects PHP
ProdigyView
 
Ad

Recently uploaded (20)

Droidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing HealthcareDroidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing Healthcare
Droidal LLC
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 
Droidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing HealthcareDroidal: AI Agents Revolutionizing Healthcare
Droidal: AI Agents Revolutionizing Healthcare
Droidal LLC
 
Create Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent BuilderCreate Your First AI Agent with UiPath Agent Builder
Create Your First AI Agent with UiPath Agent Builder
DianaGray10
 
UiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build PipelinesUiPath Community Zurich: Release Management and Build Pipelines
UiPath Community Zurich: Release Management and Build Pipelines
UiPathCommunity
 
Palo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity FoundationPalo Alto Networks Cybersecurity Foundation
Palo Alto Networks Cybersecurity Foundation
VICTOR MAESTRE RAMIREZ
 
Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...Cyber security cyber security cyber security cyber security cyber security cy...
Cyber security cyber security cyber security cyber security cyber security cy...
pranavbodhak
 
Measuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI SuccessMeasuring Microsoft 365 Copilot and Gen AI Success
Measuring Microsoft 365 Copilot and Gen AI Success
Nikki Chapple
 
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptxECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
ECS25 - The adventures of a Microsoft 365 Platform Owner - Website.pptx
Jasper Oosterveld
 
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 ADr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr Jimmy Schwarzkopf presentation on the SUMMIT 2025 A
Dr. Jimmy Schwarzkopf
 
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Agentic AI Explained: The Next Frontier of Autonomous Intelligence & Generati...
Aaryan Kansari
 
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto CertificateCybersecurity Fundamentals: Apprentice - Palo Alto Certificate
Cybersecurity Fundamentals: Apprentice - Palo Alto Certificate
VICTOR MAESTRE RAMIREZ
 
Introducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRCIntroducing the OSA 3200 SP and OSA 3250 ePRC
Introducing the OSA 3200 SP and OSA 3250 ePRC
Adtran
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk TechniciansOffshore IT Support: Balancing In-House and Offshore Help Desk Technicians
Offshore IT Support: Balancing In-House and Offshore Help Desk Technicians
john823664
 
Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025Kubernetes Cloud Native Indonesia Meetup - May 2025
Kubernetes Cloud Native Indonesia Meetup - May 2025
Prasta Maha
 
TrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy ContractingTrustArc Webinar: Mastering Privacy Contracting
TrustArc Webinar: Mastering Privacy Contracting
TrustArc
 
Securiport - A Border Security Company
Securiport  -  A Border Security CompanySecuriport  -  A Border Security Company
Securiport - A Border Security Company
Securiport
 
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath InsightsUiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPath Community Berlin: Studio Tips & Tricks and UiPath Insights
UiPathCommunity
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevExImproving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 20256th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure ModesCognitive Chasms - A Typology of GenAI Failure Failure Modes
Cognitive Chasms - A Typology of GenAI Failure Failure Modes
Dr. Tathagat Varma
 

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