In this lecture, we will be creating an html form.
This is a sample of the form we will be creating. It's an employment application form. It asks the user for some personal information. The form consists of text fields, select-menus, check boxes, radio buttons, text areas and a submit and reset button. The form inputs and input labels are organized into a table.
So let's get started. You will need to open the form.html file in the downloads folder, corresponding to this lecture.
With the form.html file open, you will notice that the basic page structure is already setup. The html code also contains a table with 2 columns and 9 rows in the body. We will use this table for our form fields.
We will preview the file just to make sure our table is visible and there are no errors in our code.
The first thing we need to do is create
<form> </form> tags. These tags will contain all the html code pertaining to our form fields, such as text inputs, select menus, submission buttons, and other form elements.
It is very important to create the form tags first, otherwise the form will not work. The form tags must encompass the entire table, because all our form fields will be contained within the table.
The form tag also has important attributes that we must define.
First, it's a good practice to name the form, so that if you create multiple forms on the same page, each can be distinguished from one another. We will name this form: employment.
<form name="employment" action="send.php" method="post">
Next we need to instruct our browser on where to send this form data upon submission. This is known as the form action. In our case we will be sending the data to a PHP script which will instruct our web server on how the data should be processed.
For the action, let's type
action="send.php". We will create send.php in the PHP section of this course.
In addition to the action attribute, we must also specify a method of data transmission. A form method tells the browser to submit the data via the
GET method. For now we will define the method as