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

Steps

Sample Code

Doc:HTML Text Input

Creating a Text Input Using HTML

  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.
  2. Put in the code. Write the normal tags (<html><head></head><body></body></html>), and it should look like:
  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.
    • Between the two body tags, (<body> and </body>), type: <form name="test">.
    • Next the actual input element, type: <input type="text" name="textie">.
    • Finally, close the form tag, type: </form>.
  4. Save the page. Click "File", "Save As", and then save it as test.html. Or, save it as anything.html.
  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.



Tips

  • As the video shows, you can set a maximum amount of characters to the box! Just add the maximum length attribute to the input tag. It would look like: maxlength="10".
  • 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.

Things You'll Need

  • Any text editor
  • Browser

Related Articles

Retrieved from "https://kipkis.com/index.php?title=Create_a_Text_Input_Using_HTML&oldid=353326"