Guidance portal

World of Guidance and Education

Insert Form

In the contact page you may insert the feedback or conctact form to contact. For inserting feed back form, we must learn the following :

  • Name Field
  • Email Field
  • Text Area
  • A button to submit form

A detailed explanation of inserting the above mentioned has already been provided in previous lessons. Here only syntax with short description is given.

Name Field:

You have already learned how to insert fields in Chapter 10: Input Fields and Chapter 17: Text/Password Field. The syntax of inseting field is given below.

     <input name="text" type="text field" id="name text">

Email Field:

Email Field is same as Name Field. Read the syntax given below carefully.

     <input type="text" name="textfield" id="textfield">

Text Area :

Text Area as the name suggests is the area of webpage where you write message to be submitted. Syntax of inserting Text Area is given below.

     <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>


Note

If some text of your choice is required to be shown by default in text field use "Value Tag" after the "ID Tag" e.g. value ="your text".

Lets insert this form and see how it works on the browser.

    <!DOCTYPE HTML>
    <html>
    <head profile="hammas">

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body>
    <form name="form1" method="post" action="your required action">
    <strong>YOUR NAME</strong>&nbsp;&nbsp;&nbsp;&nbsp;
    <input name="text" type="text field" id="name text">
    <br>
    <br>
    <strong>YOUR EMAIL ADRESS&nbsp;&nbsp; </strong>
    <input type="text" name="textfield" id="textfield">
    <br>
    <br>
    <br>
    <strong>YOUR FEED BACK<br>
    <br>
    </strong>
    <label for="textarea"></label>
    <textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
    <br>
    <br>
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" name="Submit" id="button" value="Submit">
    &nbsp;&nbsp;&nbsp;
    <input type="reset" name="reset" id="reset" value="Reset">
    <br>
    </form>
    </body>
    </html>

    Browser view

 

comments powered by Disqus