Passing Variables – HTML Forms – Creating Data with Forms

We can't pass data to another page until we have some data.  The way we  input data in web pages is with forms.  Forms are created with html, more easily created with html then styled in CSS, but that's another article.

Forms are created with the <form> tag, and of course, the form ends with a </form> tag.  Form is a block element.  Any submitting elements between these two tags are processed as being part of the form.

Let's create a form with some input elements as an example of proper html syntax:

Pencil: Notebook: Textbook: Pack:
Cauleflour Brussel Sprouts Black Beans

The above code yields a form that looks like the image below in your browser (click to enlarge image).

You fill in the form on the web page, click the, "Click me when the form is filled out!" button, and the data you entered into the form is sent to the file "../controllers/example_controller.php" which you specified in the action parameter in the opening form tag.

Some notes on the form itself, I included a hidden field not displayed in your browser window.  Now don't get excited about secret codes, or something evil you could pass in to the site, because this is not secure.  All you have to do is View->PageSource in your browser, and you can see the "hidden field" value. It is not used a lot because of this, but it can be used if you want to pass some data to another page when the form is submitted that would not be normally obvious to a user.

You'll notice that each type of input has a "name" tag. The "name" tag is important, it's how you identify the the data that is coming to the next page.  For example, the name of the first input box is "firstname," when I get to the next page, I'm going to ask for "firsname" when I want the contents of that input, Which brings us to the topic at hand, passing data to another page.

We can pass form data to the, "../controllers/example_controller.php" file in one of two ways either "Get," or "Post."  The method we use to send the data is a parameter in the initial form tag, like so, method = "post," or method="get"  We'll cover this in our next article.  For now, in our initial web page we have collected the data, when the user clicks on the submit button, we pass the data to another page or file.  And we'll talk about what the receiver file has to do to catch the data in our next article.

Comments are closed.