HTML forms

You have presumably used a form or two on the Web even if it is only to log in to social networking.  They allow the user to send data to the Web server.  You will learn how to handle the data on the server when you do PHP.

Create a new page (with just the usual elements) and save it as forms.html.

Input

To create a form start with the form tags:

<form>

</form>

Now add an input field:

<form>
    <input type="text">
</form>

Save and view.  There is something missing so add the submit button:

<form>

    <input type="text">
    <input type="submit">

</form>

Save and view.A form

If you try the button nothing much will happen because we have not told the browser what to do when the form is submitted.

Labels

You need to tell the user what to type in the box using a label element just before the input element.  Do that now:

  1. add a blank line just above the first input line
  2. add a label opening and closing tag to make an empty element
  3. between the two label tags put Your user name:

You might want to add an extra indent for the input to show it "belongs" to the label even though that is not really correct.  It just helps to see which label is for which field:

A label and an indented field

Save and try and it might look OK but the browser does not know that this label is connected to that input so:

  1. add an id attribute to the input to identify it uniquely
  2. make the value of the id attribute text1
  3. in the opening label tag add a for attribute and make the value text1 as well

The for attribute tells the browser that this label is attached to the input with the matching id.

Save and view.  If you now click on the label the cursor should appear in the input field ready for you to type.  If not you need to check the for and id attributes.

Action

To tell the browser what to do when the user presses the submit button you need two more attributes.  Add them to the form opening tag.  One is method.  The value is post and it tells the browser how to send the data to the Web server.  The second attribute is action and the value is the name of the page which will handle the data when it reaches the server:

<form method="post" action="http://www.yourwebskills.com/files/examples/process.php">

Save and try the form by filling in some data and pressing the button.  It will not work because there is one thing still missing.

Name

The reason the form is not working is that the data is being sent to the server but not properly.  Any time you have a lump of data on a computer you need a way to identify that data.  In forms you use name.

The name attribute is a different thing to an id so form fields usually have both:

Add a name attribute to your single text input field.  Give it the same value as the id.  That makes it easier to remember.

Now it should work.  The page which handles the data will just repeat it back to you and say you used post.  To use a form you need a page on the server to accept the data and this one is there just to test forms.

You will learn how to handle the data properly when you learn PHP.

More fields

You will learn more about forms later but for now just add another input field:

  1. copy the existing label and text input elements (two lines of code)
  2. paste them on a blank line underneath (but before the submit input element)
  3. change the for, id and name values all to text2 so that the label is related to the correct field and the data is named
  4. change the type to password
  5. change the text inside the element to Type your password here:
  6. save and try by filling in both fields and submitting

You should see both bits of data being displayed back to you.  If not check your code.

Once you change the label text your page should look something like this:

The finished form in a browser

Note that the name does not need to be sensible (almost anything will do) but it is best to use names and IDs which mean something.