Guidance portal

World of Guidance and Education

Insert Fields Text/Passward

In the previous chapter we learn how to insert the text fields but 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 can be used for various purposes e.g. to write text, email address, passwords and to search (inputting the data to be searched by engines).

This chapter consist of two topics.

  • Insert passward field
  • Insert text field

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).

Passward field

It is very easy to insert the passward field on your web page just remember the syntax of passward field .The syntax of passward field along with explanation is shown below. Carefully read the syntax.

     <input type="password" name="passward" id="passward">

input type="passward" (brown): 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)

name="passward" (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" (passward): 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 we insert the passward field and then view this on the browser how its looks like.

    <!DOCTYPE HTML>
    <html>
    <head>

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

    <body>
    <input type="password" name="passward" id="passward">
    </body>
    </html>

    browser view

Text field

Text field is not to much diffrent from passward fields, Syntax of text field is litly change but explanation is disscussed above.

Note

Remember the syntax of text field because all type of text field is design with same syntax like

first name ,last name ,etc

See the syntax code carefully to make your experiance better and guess what changes made.Its like your test.

    <!DOCTYPE HTML>
    <html>
    <head>

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

    <body>
    <strong>your name </strong>
    <input type="text" name="text" id="text">
    </body>
    </html>

    browser view

 

comments powered by Disqus