Basic text field

Here’s the simplest text field:

Figure 1. Simple text field

You can try it.

Here’s some code:

...
$(document).ready(function() {
  $("#test").click(function() {
    var weight = $("#weight").val();
    alert("You entered: " + weight);
  });
});
...
<p>
  Weight <input id="weight" type="text">
</p>
<p>
  <button id="test">Test</button>
</p>
...

Figure 2. Code for simple text field

Line 10 creates the input field. Give it an id and set the type to text.

I added some test code, tied to the button on line 13. When the user clicks the button, this runs:

   var weight = $("#weight").val();

$("#weight") says “Find the element with an id of weight.” val() says “Get the contents of the field.” Then the value is put into the variable weight for processing.

Full text field

The example above works, but isn’t very good. Weight of what? What unit? Pounds? Kilos? Grams?

When I create text fields, they look more like this:

Figure 3. Full text field

You can try it.

This field will probably be one of several on the page (first name, last name, date of birth, ...). Making the label bold (*Weight*) makes it easier for users to scan the page and find the fields.

The unit (pounds) is given.

The field is narrower. This is a hint to users, that the weight is only a few characters.

There’s a little help text in smaller font below the field. It includes an example. Examples help people know the format of the data they should enter.

There’s one other difference. Here are the two screenshots again:

Figure 1 (again). Simple text field

Figure 3 (again). Full text field

In the second one, the cursor is in the input field when the page loads. The user can just start typing. With the simple version, the user has to click on the field before entering data.

Here’s some code:

...
.form-field-group {
  margin: 20px 0 20px 0;
}
.form-field-name {
  margin: 3px 0 3px 0;
  font-weight: bold;
}
.form-text-field {
  margin: 3px 0 3px 0;
}
.form-help {
  font-size: 12px;
  margin: 3px 0 3px 0;
}
...
$(document).ready(function() {
  //Set the focus on the input field.
  $("#weight").focus();
  $("#test").click(function() {
    var weight = $("#weight").val();
    alert("You entered: " + weight);
  });
});
...
<div class="form-field-group">
  <p class="form-field-name">Weight</p>
  <p class="form-text-field">
    <input id="weight" type="text" size="4"> pounds
  </p>
  <p class="form-help">How much do you weigh? E. g., 190.</p>
</div>
<p>
  <button id="test">Test</button>
</p>
...

Figure 4. Code for full text field

The classes set appropriate bolding, font size, and so on. The size property (line 29) limits the size of the text field.

The JavaScript is the same, except for this line:

   $("#weight").focus();

It puts the keyboard cursor into the text field. This line is in the ready event, so it happens just after the page loads.