IST 210 1 HTML FORM AND PHP IST
- Slides: 23
IST 210 1 HTML FORM AND PHP IST 210: Organization of Data
IST 210 Review of P 3 Part of our previous lab exercise <html> <body> <h 1> Lottery Game 2</h 1> <? php $lastname = array('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); // code to show the table is not shown $v = rand(0, 4); echo "<font color=red size=6>Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]. "</font> "; ? > </body> 2
IST 210 Today’s Objectives • http: //my. up. ist. psu. edu/duw 24/lottery. Form. php • Learn interaction with users using HTML Form 3
IST 210 4 Input Parameter Using Form <html> <form method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['student. ID'])){ $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; } ? > </html>
IST 210 5 Input Parameter Using Form <html> <form method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['student. ID'])){ $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; } ? > </html> Generate the form
IST 210 Input Parameter Using Form 6 <html> <form method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['student. ID'])){ $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; } ? > </html> The value input into the textbox will be assigned to variable student. ID and will be stored in POST container, called $_POST In PHP segment, we can retrieve the value this variable using $_POST[‘student. ID’]. Note, the variable name should be exactly the same (case sensitive)!
IST 210 7 Input Parameter Using Form <html> <form method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['student. ID'])){ $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; } ? > </html> We retrieve the value and assign to variable $v. Finally, output the student name with index as $v.
IST 210 8 Overview of the whole process Request: http: //my. up. ist. psu. edu/zul 17/lottery. Form. php date_form. php User Webspace Form submitted to: http: //my. up. ist. psu. edu/zul 17/lottery. Form. php Date_form. php
IST 210 9 A More General Case http: //my. up. ist. psu. edu/duw 24/lottery 4. php Input form in one page; PHP response in another page
lottery. Form. php IST 210 10 <html> <form method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); if (!empty($_POST['student. ID'])){ $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; } ? > </html> Separate into a form page and a process page lottery 4. php process_lottery 4. php <html> <? php <form action="process_lottery 4. php" method ="post" $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> </html> ? >
IST 210 11 Overview of the whole process Request: http: //my. up. ist. psu. edu/zul 17/lottery 4. php date_form. php User Webspace Form submission to: http: //my. up. ist. psu. edu/zul 17/process_lottery 4. php Together with data Date_form. php
IST 210 So what happens if I directly visit http: //my. up. ist. psu. edu/duw 24/process_lottery 4. php The variables do not have values 12
IST 210 13 Why Are Forms Important to You? • Database query will be sent through forms • Keyword • A set of possible values • Database query conditions will be specified through forms • Including or excluding a condition
IST 210 14 Forms • Forms enable server-user interaction • • • Allow users to input data User inputs sent to a server program The server program processes the query • Examples: • • User login User registration Search Usually three steps • • • Input page, visual part of the form, coded in HTML Form validation, a program to check the data before it enters the server (often Java. Script) Form processing, a program that accepts and processes the input
IST 210 15 Forms • Formal definition • A form is an area that can contain data input elements • • Text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc Defined with the <form> tag and a set of attributes • • • name: the name of the form action: the program that will processes the form method: how this form will be submitted <form name=“form/phpexample” action="process_input. php" method="post">
IST 210 16 Form Definition <form name=“form/phpexample” action=" process_lottery 4. php" method="post"> • This line says: • • • The form will be processed by “process_lottery 4. php” By clicking “go”, a user sends an HTTP request to “process_lottery 4. php” All the form data is attached to the HTTP request via “post” method • • You can also use “get” method For difference between “post” and “get”, see http: //www. w 3 schools. com/tags/att_form_method. asp
IST 210 17 Form Elements • The most used form element tag is the <input> tag • The type of input is specified with the type attribute • • Text, Dropdown List, Radio, Checkbox , Submit The name attribute is usually used by validation or processing code to retrieve the input data. • In most cases, it has nothing to do with displaying the element <input type="radio" name=“student. ID" value="0"> 0 <input type="submit" value ="go" /> <input type = "text" name="username" value = ""/>
IST 210 18 Form Elements: Text Fields • Text fields are used when you want the user to type letters, numbers, etc. in a form • Use value attribute to preset some text in the field <input type="text" name="student. ID" value= ""/> <input type="text" name="student. ID" value= "Your ID here"/>
IST 210 19 Form Elements: Submit Button • Submit button • When the user clicks the "Submit" button, the content of the form is sent to another file, which is defined by action attribute of the <form> tag <input type="submit" value = "go"/>
IST 210 20 Form Elements: Radio Buttons • Radio Buttons are used when you want the user to select one of a limited number of choices http: //my. up. ist. psu. edu/duw 24/lottery 4_button. php <html> <form action="process_lottery 4. php" method ="post" > Pick a student (0 -4)! <input type="radio" name="student. ID" value="0"> 0 <input type="radio" name="student. ID" value="1"> 1 <input type="radio" name="student. ID" value="2"> 2 <input type="radio" name="student. ID" value="3"> 3 <input type="radio" name="student. ID" value="4"> 4 <input type="submit" value = "go"/> </form> </html> Value that will be passed to the process page Value show on the page
IST 210 21 Form Elements: Checkboxes • Checkboxes are used when you want the user to select one or more options of a limited number of choices. http: //my. up. ist. psu. edu/duw 24/lottery 4_check. php <html> <form action="process_lottery 4. php" method ="post" > Pick a student (0 -4)! <input type="checkbox" name="student. ID" value="0"> 0 <input type="checkbox" name="student. ID" value="1"> 1 <input type="checkbox" name="student. ID" value="2"> 2 <input type="checkbox" name="student. ID" value="3"> 3 <input type="checkbox" name="student. ID" value="4"> 4 <input type="submit" value = "go"/> </form> </html>
IST 210 22 Form Elements: Dropdown List • Let the user choose from a set of given options. http: //my. up. ist. psu. edu/duw 24/lottery 4_dropdown. php <html> <form action="process_lottery 4. php" method ="post" > Pick a student (0 -4)! <select name="student. ID"> <option value="0"> 0 </option> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> </select> <input type="submit" value = "go"/> </form> </html>
IST 210 In-Class Exercise: Lottery 4. php lottery 4. php http: //my. up. ist. psu. edu/Your. PSUID/lottery 4. php <html> <form action="process_lottery 4. php" method ="post" > Pick a student (0 -4)! <input type="text" name="student. ID" /> <input type="submit" value = "go"/> </form> </html> process_lottery 4. php <? php $lastname = array ('Smith', 'Kim', 'Davis', 'Miller', 'Taylor'); $firstname = array('John', 'Anthony', 'Richard', 'Thomas', 'Jessica'); $v = $_POST['student. ID']; echo "Today's Winner is: ". $firstname[$v]. " ". $lastname[$v]; ? > 23
210 210 210
Ist 210
Ist 210
Ist 210
Ist 210
Ist 210
Ist 210
Ist 210
Ist 210 penn state
Web.facebook.com.php
Php php://input
Doctype php
Formulario html php
Echo html code
Doctype html html head
Slidetodoc.com
12.html?action=
Doctype html html head
Doctype html html head
Was ist html
Winter kommt winter kommt flocken fallen nieder lied
Es war eine mutter
Klassendienst
Es ist herbst bunte blätter fliegen
