How to Put Text Boxes in an HTML5 Form - dummies

How to Put Text Boxes in an HTML5 Form

By Andy Harris

Many of the form elements HTML5 uses are based on the input tag. This web-page-building workhorse is a general-purpose tag used to make a number of interesting input objects, but it isn’t the only type of text box at your disposal. You can also create password fields and multiline text boxes, as shown in the top part of this form demo.


The code for the text boxes in this figure looks like this:

<html lang = "en">
    <meta charset = "UTF-8" />
    <h1>Form Demo</h1>
        <legend>Text input</legend>
          <label>Text box</label>
          <input type = "text"
                 id = "myText"
                 value = "text here" />
          <input> type = "password"
                  id = "myPwd"
                  value = "secret" />
          <label>Text Area</label>
          <textarea> id = "myTextArea"
                  rows = "3"
                  cols = "80">Your text here</textarea>

A basic text box

Building a basic text box is straightforward:

  1. Create an input element.

    The <input> tag creates the general structure of the element.

  2. Set the type to text to indicate that you’re building a standard text element, not something more elaborate.

  3. Add an id attribute to name the element.

    This becomes very important when you add JavaScript to the page because your JavaScript code will use the ID to extract data from the form.

  4. Add default data.

    You can add default data if you want, using the value attribute. Any text you place in the value will become the default value of the form.

The text element places a small box on the screen. When a visitor to your web page selects the box, the cursor will change to an I-beam, and your visitor will be able to type text into the box.

A password field

The password field, shown in the figure, looks similar to the ordinary text field, but it has one primary difference: When the user types data into the password field, the content of the field is replaced by asterisks.

A password field uses the same input tag as a basic text field. The only difference is that you set the id attribute to “password”.

The replacement asterisks may prevent an evil onlooker from discovering your password, but a password field offers no real security — especially if you use JavaScript, which makes the retrieval code freely available to the browser. JavaScript is not the language to use if you want to keep a lot of secrets.

A multi-line text box

Sometimes you want to give visitors to your web page the ability to enter several lines of text. The HTML5 textarea element is perfect for this situation. Here’s how to make your own text area:

  1. Begin with the <textarea> tag to indicate the beginning of a multi-line text box.

    Use the <label> tag to give your text area a name if you like.

  2. Specify the number of rows.

    Indicate the number of rows (or lines) of text you want the text area to contain. Larger boxes accommodate more text but require more room on the screen.

  3. Indicate the number of columns.

    The number of columns shows how wide (in characters) the text box should be. A page-width form is generally 80 characters.

  4. Add the </textarea> closing tag.