Some HTML forms pass data from one page to another without the use of database. You can use php to enhance your HTML forms by making sure that these forms are processed properly. For example if you want some condition to be fulfilled before processing the form then it is possible to do so with php. In this tutorial we’re going to process out data from one form to another static page by using php.
In this tutorial we’re going to create a page that passes two variables to another page via forms. Variables “toys” and “game” are the ones we’re going to pass.We’re going to add these in the form of attributes in the form. These two variables will be displaying a value that user selects in first page. Let’s create a simple HTML form with some options –
<html> <body> <h3>Select an Option</h4> <form action="toys.php" method="post"> <select name="game"> <option>kite</option> <option>yo yo</option> <option>beyblade</option> </select> How many : <input name="toys" type="text"/> <input type="submit"/> </form> </body> </html>
If you read the code carefully then you’ll notice that field name “game” and “toys” are going to be important here. As they’re the items that we’re going to pass to other page.
Code toys.php
<html> <body> <?php $toys=$_post['toys']; $game=$_post['game']; echo "You want".toys." ".$game."; </body> </html>
You can upload these two files on your web-server and execute it to see if they’re showing you the right output. You can test this on your own if you have xampp server on your desktop.
HTML Forms and User Input
Forms are the means by which webmasters take input from users and manipulate the web page. Forms can be used in any web development language like php, asp, ruby, python to interact with database or other web pages. Forms usually consist of text field, radio buttons, check box, buttons,label and list control items. Depending on what you want to do with the user input the elements that come with forms will vary. In this tutorial we’ll see how to take user input with the help of form elements.
In order to create form inside HTML page we have to use < form > and < / form > tags. In between these two tags all the form elements are supposed to be placed.
Code
<form> </form>
In this tutorial we’re going to review input elements – text field, password field, radio button and checkbox. Let’s start with input and text field element on our form.
Code
<form method="post" action="mailto:yourname@email.com"> Subject :<input type="text" size="20" maxlength="60" name="subject"><br/> Message:<input type="text" size="100" maxlength="150" name="message"><br/> </form>
In this program we’ve included few attributes of < input > field. Let’s see what each does –
Type : In our program we’re dealing with text input, so we’ve set it like that.
Size : It declares the size of text field.
Maxlength : It declares the maximum characters that you can input into text field.
Name: Assigns a name so that you can call it later using langauge of your choice.
When you compile the above code it shows two text fields with label subject and message.
Password Field and Forms
In case of login and authentication we deal with the password field in the forms. Let’s see how we can use the password field in our form.
Code
<form> <input type="password" name="pwd"> </form>
By executing this form on browser you’ll see that it gives you masked password field on form.
Radio Button
When you want user to make a choice between variety of options available to them then radio button is the field to use.
Code
<form> <input type="radio" name="first" value="one">One<br/> <input type="radio" name="second" value="two">Two<br/> </form>
Checkbox
Allowing users to select multiple options is possible with checkboxes. You can add checkboxes by setting input type to checkbox.
<form> <input type="checkbox" name="first" value="one">One<br/> <input type="checkbox" name="second" value="two">Two<br/> </form>
Submit Button
In case of submit button we want a certain action to take place when use clicks on button. In some cases we want user to redirect to another page. In another case we want their data to be processed in database and have them redirected to confirmation page or specific page after that. In order to accomplish this we have to use action attribute in input type.
<form name="input" action="nextpage.html" method="get"> Name: <input type="text" name="name"> <input type="submit" value"submit"> </form>
Few things to note –
- Make sure you don’t use unencrypted password field if you’re working on e-commerce or big site.
- Learn to use name and value attribute pairs in your program as it makes form more organized.
- Make sure buttons are redirecting to the right page or doing exactly what they’re supposed to do or else you have to manage error pages too.
