forms overview, query string, submitting arrays, php & html, input types, redirecting the user...
TRANSCRIPT
![Page 1: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/1.jpg)
FormsOverview, Query string,
Submitti ng arrays, PHP & HTML, Input types, Redirecti ng the user
Mario PeshevTechnical Trainerhttp://peshev.netSoftware Universityhttp://softuni.bg
![Page 2: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/2.jpg)
Table of Contents
1. Quick overview
2. Query string
3. Submitting arrays
4. Combining HTML & PHP
5. Checkboxes
6. Hidden Fields
7. Other input types
2
![Page 3: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/3.jpg)
Table of Contents (2)
8. Specific input attributes
9. Tab Index
10. Redirecting the user
3
![Page 4: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/4.jpg)
Quick overview
![Page 5: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/5.jpg)
Quick overview
Forms are used to work with user input
Request method can be POST or GET
Input is stored in $_POST or $_GET arrays
![Page 6: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/6.jpg)
Query String
![Page 7: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/7.jpg)
What is Query string?
A query string is a part of a URL. Specifically, the part of a URL following a question mark (?)
Commonly used in searches and dynamic pages Stored in $_SERVER['QUERY_STRING']
http://www.site.com/index.php?parameter=softuni
![Page 8: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/8.jpg)
Creating a Query string
Most common way to do it is by using a FORM with GET method You can also use scripts to add to the query string or simply write
your links with the query strings in the href attribute
![Page 9: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/9.jpg)
Query stringLive Demo
![Page 10: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/10.jpg)
Submitting arrays
![Page 11: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/11.jpg)
Submitting arrays
In order for an input to be treated as an array – you must put brackets “[]” in the name attribute:<form method=“post”>
<select name=“people[]" multiple="multiple"> <option value=“Mario">Mario</option> <option value=“Svetlin">Svetlin</option> <option value=“Teodor">Teodor</option> </select> <input type=“submit” value=“submit”/></form>
![Page 12: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/12.jpg)
Submitting arrays (2)
After the form is sent you can access your elements like you are acessing an array
<?php foreach( $_POST['people'] as $person ) { echo $person . '</br>'; }?>
![Page 13: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/13.jpg)
Submitting ArraysLive Demo
![Page 14: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/14.jpg)
Combining HTML and PHP
![Page 15: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/15.jpg)
Combining HTML and PHP
<?php//guessing script implementation...$message = ...;?>
<html> ... <body> <?php echo $message ?> <form method=“POST”> <input type=“text” name=“guess”> <input type=“submit” name=“submit”> </form> </body></html>
You can open PHP tags anywhere in HTML code
![Page 16: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/16.jpg)
Combining HTML and PHP
<?php echo ' <form action=“index.php" method="post"> Name: <input type="text" name="name"><br /> <input type="submit“ name=“submit”> </form>';?>
You can also echo the HTML
![Page 17: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/17.jpg)
Checkboxes
![Page 18: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/18.jpg)
Checkoxes Checkboxes are created by setting an input with
type “checkbox”
A checkbox is only submitted if it's actually checked
<input type="checkbox" name=“rakia-checkbox" />
![Page 19: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/19.jpg)
CheckboxesLive Demo
![Page 20: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/20.jpg)
Hidden fields
![Page 21: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/21.jpg)
Hidden fields
<form action=“input.php“ method="post"> <input type="text" name="user“> <input type="submit" value=“click“ name=“in”> <input type="hidden" name=“hiddenName" value="<?php echo $user ?>"/> </form>
Created by setting the type of input to hidden
Not visible to the user
![Page 22: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/22.jpg)
Hidden fieldsLive Demo
![Page 23: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/23.jpg)
Other input types
![Page 24: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/24.jpg)
Other input types
password – doesn’t visualise the text written in the input
email – some mobile browsers change the on-screen keyboard (added @). Has some in-build email validations
radio - radio buttons are used to select ONLY one of a limited choices. In order for radio buttons to work properly – they must have the same “name” attribute
![Page 25: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/25.jpg)
Other input types (2)
date – used to pick a date (Doesn’t work on Firefox and IE.)
datetime – used to pick date and time (Works only Safari and Opera)
time – used to pick time (Doesn’t work on Firefox and IE.)
![Page 26: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/26.jpg)
Other input types (3)
number – used to pick a number
range – creates a slider that allows you to pick a value from a previously set range
color – creates a palette that allows you to pick a color
![Page 27: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/27.jpg)
Other input typesLive Demo
![Page 28: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/28.jpg)
Specific input attributes
![Page 29: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/29.jpg)
Specific input attributes
autocomplete – browser stores previously typed values and shows them the next time
autofocus – the field becomes focused on page load
required – the field becomes required and the form can not be send without filling/selecting it first
![Page 30: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/30.jpg)
Tab index
![Page 31: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/31.jpg)
Tab Index
The tabindex attribute controls the order in which form fields and links are focused when repeatedly pressing the TAB key
tabindex="0" (zero) – means "natural" order Elements with smaller tabindex are iterated before
elements with bigger tabindex
![Page 32: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/32.jpg)
Tab indexLive Demo
![Page 33: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/33.jpg)
Redirecting the user
![Page 34: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/34.jpg)
Redirecting the user
header(‘Location: http://softuni.bg’);
Done by using the HTTP Location header
$url = ‘http://softuni.bg’); header(‘Location: ‘ . $url);
You can also use a variable to keep the URL
![Page 35: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/35.jpg)
Redirecting the userLive Demo
![Page 36: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/36.jpg)
36
Summary
You must put [] in input’s name attribute in
order to submit an array of information You can easily combine PHP and HTML Checkboxes are sent only if checked Hidden fields are not visible to the user The HTTP Location Header redirects the user
![Page 37: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/37.jpg)
Questions??
??
?
?
??
?
?
https://softuni.bg/trainings/fasttracks/details/1033
PHP & MySQL
![Page 38: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/38.jpg)
License
This course (slides, examples, demos, videos, homework, etc.)is licensed under the "Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International" license
Attribution: this work may contain portions from "PHP Manual" by The PHP Group under CC-BY license
"PHP and MySQL Web Development" course by Telerik Academy under CC-BY-NC-SA license38
![Page 39: Forms Overview, Query string, Submitting arrays, PHP & HTML, Input types, Redirecting the user Mario Peshev Technical Trainer Software](https://reader035.vdocument.in/reader035/viewer/2022062315/5697bfc61a28abf838ca7405/html5/thumbnails/39.jpg)
Free Trainings @ Software University Software University Foundation – softuni.org Software University – High-Quality Education,
Profession and Job for Software Developers softuni.bg
Software University @ Facebook facebook.com/SoftwareUniversity
Software University @ YouTube youtube.com/SoftwareUniversity
Software University Forums – forum.softuni.bg