Forms

• IT Service delivery
• Further Education (Key Stage 5)

You will understand Forms

1. The tags related to Forms

2. Attributes that are related to the tags

3. The meaning of "Id" 

4. The meaning of "name"

5. How to create your own forms.

Example of a form

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" value="John"><br>

  <label for="lname">Last name:</label><br>

  <input type="text" id="lname" name="lname" value="Doe"><br><br>

  <input type="submit" value="Submit">

</form> 

The Form Tag 

<form action="/action_page.php"> 

</form> 

"Here the form tag has one attribute called "actions"

This is what happens to the form when it is submitted".

The form gets saved in a file "action_page.php"

Exercise one

Complete the exercise on the next slide to save the form to 

test\ex1.php

onlinegdb.com

Input Text box

<form action="/action_page.php">

  <input type="text" id="fname" name="fname" value="John"><br>

</form> 

"Here the form works with an input tag."

Inspect the different attributes  associated with the "Input" tag.

Run the code in the next slide 

Input Text box

<form action="/action_page.php">

  <input type="text" id="fname" name="fname" value="John"><br>

</form> 

"Here the form works with an input tag."

Inspect the different attributes  associated with the "Input" tag.

Run the code in the next slide 

onlinegdb.com

<input type="text" id="fname" name="fname" value="John"><br>

How many attributes are there in the "input" tag?

1. 1
2. 4
3. 2
4. 5

<input type="text" id="fname" name="fname" value="John"><br>

The attributes in the input text box

The Type ---- Type of input tag i.e "text"

id---- This associates the "Text" box with a label

Name------ the name given value that is passed from the text box

Value---- this is the value that is  pre-populated in the text box

Create a second text box  with the folllowing:

Create second input box with the following:

type  text

id= lname

name=lname

value=Hamza

onlinegdb.com

  <input type="submit" value="Submit">

The input type is "Submit"

This has two attributes

1. type

2. value

The Label 

<form action="/action_page.php">

  <label for="fname">First name:</label><br>

  <input type="text" id="fname" name="fname" value="John"><br>

  <input type="submit" value="Submit">

</form> 

Here the label is assiociated the input  type by id

onlinegdb.com

Have go at forms now

What you must do!

Create a form for your clients interested in either a web site or employment.

Suggestion is do the form in a div tag below your existing code and use the "id" to link it from your menu.

Thank you

Thank you for learning with us.

Keep practising 

The End