HTML Tutorial
HTML Attributes
- html-global-attributes
- html-event-attributes
HTML Tags List
HTML5 Advance
HTML API
HTML Color Names
- html-color-names
HTML Misc
MCQ
- html-mcq
Interview Questions
- html-interview-questions

How to Create Text Box in Html

If we want to create the text box in Html document for inserting the characters by the user on the web page then we have to follow the steps which are given below. Using these steps, any user can easily create a text box.

Step 1: Firstly, we have to type the Html code in any text editor or open the existing Html file in the text editor in which we want to create the text box.

<!Doctype Html>
<Html>
<Head>
<Title>
Create the Text Box
</Title>
</Head>
<Body>
Hello User! <br>
</Body>
</Html>

Step 2: For creating the text box, firstly we have to define the

, if not defined in the code. Now, we have to place the cursor at that point in the

tag where we want to create the text box. And, then we have to type the tag at that point.

<form>
Student Name:
<input >
<br> <br>
Course:
<input >
</form>

Step 3: After writing the tag, we have to use its attribute whose name is type. This attribute specifies what type of data is to be entered. So, to create the text box we have to give the value "text" in the type attribute.

<form>
Student Name:
<input type="text" name="Name">
<br> <br>
Course:
<input type="text" name="Course">
</form>

Step 4: If we want to define the width of the text box, then we can define it with the help of the size attribute.

<form>
Student Name:
<input type="text" name="Name" size="20">
<br> <br>
Course:
<input type="text" name="Course" size="15">
</form>

Step 5: And, at last, we have to save the Html file and then run the file in the browser.

<!Doctype Html>
<Html>   
<Head>    
<Title>   
Create the Text Box
</Title>
</Head>
<Body> 
Hello User! <br> 
<form>
Student Name:
<input type="text" name="Name" size="20">
<br> <br>
Course:
<input type="text" name="Course" size="15">
</form>
</Body> 
</Html>

Test it Now

The output of above Html code is shown in the following screenshot: