Text input tag

Till this point you should be clear about the HTML <form> tag and how to create a submit button which sends the data collected in the form to the server. From this tutorial onwards you will learn about different input tags using which the user can enter data into the webpage. The first tag we will talk about is the text input tag. This tag is used to display a textbox to the user so that he/she can enter text data into the form.

When you are creating a text tag it is important to set the value of following attributes of the input tag

  1. Type – Its value should be set to text in order to create a textbox
  2. Name – Its value should be set to the name you want to give to this textbox
  3. Value – This should be set to the text you want to display inside the text box by default.

It is important that you give a different name to each of the input elements you have in your form. This is important because otherwise it will become difficult for the server side code to understand the input data sent by the form. For example, if there are 10 textboxes in the form then from the name of each text box the server side code will come to know the meaning of the data entered by the user in that text box.

Look at the HTML mark-up below

<html>      
    <head>      
    </head>      

    <body>          
        <form action="http://abc.com/index.html" method="POST">
            First name: <input type="text" name="firstName" value="" />              
            Last name: <input type="text" name="lastName" value="" />              
            Roll number: <input type="text" name="rollNumber" value="" />              
            <input type="submit" value="Click me to submit form" />          
        </form>      
    </body>  
</html>

 

This is how the browser will display this HTML mark-up

Image 

In this webpage we have created three textboxes and a submit button. See how we have given a meaningful name to each textbox. We have not set the value attribute to anything because we want to keep these textboxes empty. When you click the submit button the data you enter in these textboxes will get submitted to the server and can be processed by the server side code.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp