Edit Article

Two Methods:Sample CodeCreating a Text Input Using HTML

HTML forms are what you need for getting user input. But first, you need to make a text box! Here is a simple tutorial on how to make a text box if you're using Windows.

Ad

Sample Code

Creating a Text Input Using HTML

  1. Create Bold Text With HTML Step 1.jpg
    1
    Create an HTML page. To do that, open up Notepad or any other plain text editor. On Windows, you can access Notepad via the Start Menu, at: "Accessories", then "Notepad". Or, use the Windows key + R, then type notepad and press enter.
    Ad
  2. Create Bold Text With HTML Step 2.jpg
    2
    Put in the code. Write the normal tags (<html><head></head><body></body></html>), and it should look like:
  3. 3
    Now that you have the base code, you're ready to make a form to hold the text box and then make the text box.
  4. Create a Text Input Using HTML Step 4.jpg
    4
    Save the page. Click "File", "Save As", and then save it as test.html. Or, save it as anything.html.
  5. Create a Text Input Using HTML Step 5.jpg
    5
    Open up the window and see your new text box!
    • Using JavaScript, now you could make the text box do something in conjunction with a button!
    • If you want to put some text before the input box to explain what it is, do so before the <input> tag.
    Ad


We could really use your help!

Can you tell us about
cutting hair?
Can you help us
rate articles?
Yes
No
cutting hair
how to cut a man's hair
Can you tell us about
Adobe Photoshop?
Yes
No
Adobe Photoshop
how to use the warp tool in Photoshop
Can you tell us about
Indian cooking?
Yes
No
Indian cooking
how to make chicken korma
Can you tell us about
building muscle?
Yes
No
building muscle
how to build upper body strength
Thanks for helping! Please tell us everything you know about
...
Tell us everything you know here. Remember, more detail is better.
Tips
Provide Details.
Please be as detailed as possible in your explanation. Don't worry about formatting! We'll take care of it. For example:
Don't say: Eat more fats.
Do say: Add fats with some nutritional value to the foods you already eat. Try olive oil, butter, avocado, and mayonnaise.
Submit

Video



 This tutorial shows you a few more tricks with creating the basics of a form.

Tips

  • You also want to include an id. Right after name="whatever", put id="whatever". It is recommended to use the same id as the name for ease of use.
  • You can also use other programs, such as Notepad++, PSPad, JEdit, etc. More complex (and expensive) programs such as Dreamweaver are good too.
  • As the video shows, you can set a maximum amount of characters to the box! Just add the maxlength attribute to the input tag. It would look like: maxlength="10".

Things You'll Need

  • Any text editor
  • Browser

Related wikiHows

How to
Create a Big Block Text Box for an HTML Form

How to
Create a Check Box with HTML

How to
Create HTML Forms

How to
Use Font Color Tags in HTML

How to
Shim Text Around a Table in HTML

How to
Link Within a Page Using HTML

How to
Create a Simple Web Page With HTML

How to
Create a Form in HTML That Can Be Submitted to an Email Address

Article Info

Featured Article

Categories: Featured Articles | HTML

In other languages:

Español: crear una entrada de texto usando HTML, Italiano: Creare un Riquadro di Testo Usando l'HTML, Русский: создать компонент Text Input, используя HTML, Português: Criar um Campo de Texto Utilizando HTML

Thanks to all authors for creating a page that has been read 55,936 times.

Did this article help you?
Yes No

Become
an Author!

Write an Article