Guidance portal

World of Guidance and Education

Input Fields

In this chapter we will learn what is input field and why it is used? Input Field as the name suggest is a rectangular box where you can write (input) the text. Input Field canbe used for various purposes e.g. to write text, email address, passwords and to search (inputting the data to be searched by engines).

As usual, first of all, we must learn the syntax of "Input Field"(different colors shows the different segments of syntax. Each segment is further explained below).

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

input type="text" (red): here you set the field type i.e. either "text" (text will be written) or "password" (text written will be hidden and only dots shown)

size="30" (green): here you set the length of field i.e. how long the field is required.

name="textfield" (blue): This is internal in programming will not be shown on webpage. Here you set the name of the text field so that browser can understand what text field is this. This is handy when you are inserting more than one input field on your webpage since different names will allow you to differtiate the input fields from each other.

id="textfield" (pink): This is also internal and will not be shown on webpage. Here you set the id of the text field so that the programmer can understand what the purpose of this field is.            

Now lets see how it looks like in browser

    <!DOCTYPE HTML>
    <html>
    <head>

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

    <body>
    <input type="text" size="30" name="textfield" id="textfield">
    </body>
    </html>


    Browser view


In upcoming chapters we will further learn about input fields like:

  • First name input field.
  • Last name input field.
  • Email input field .
  • Password input field.

 

comments powered by Disqus