Servage Magazine

Text entry controls
One of the most common tasks in a web form is to enter text information. Which element you use depends on whether users are asked to enter a single line of text (input) or multiple lines (textarea).
Single-line text field

<input type="text">
Single-line text entry control

One of the most straightforward form input types is the text entry field used for entering a single word or line of text. In fact, it is the default input type, which means it is what you’ll get if you forget to include the type attribute or include an unrecognized value.

<li><label>City <input type=”text” name=”city” id=”form-city”

value=”Your Hometown” maxlength=”50″></label></li>
Multiline text entry field

<textarea>...</textarea>
Multiline text entry control

At times, you’ll want your users to be able enter more than just one line of text. For these instances, use the textarea element that is replaced by a multiline, scrollable text entry box when displayed by the browser. Unlike the empty input element, you can put content between the opening and closing tags in the textarea element. The content of the textarea element will show up in the text box when the form is displayed in the browser.

It will also get sent to the server when the form is submitted, so carefully consider what goes there. It is not uncommon for developers to put nothing between the opening and closing tags, and provide a hint of what should go there with a title or placeholder attribute instead. The new HTML5 placeholder attribute can be used with textarea and other text-based input types and is used to provide a short hint of how to fill in the field.
Password entry field

<input type="password">

Password text control

A password field works just like a text entry field, except the characters are obscured from view using asterisk (*) or bullet (•) characters, or another character determined by the browser.

It’s important to note that although the characters entered in the password field are not visible to casual onlookers, the form does not encrypt the information, so it should not be considered a real security measure.

Here is an example of the markup for a password field. It shows how it might look after the user enters a password in the field.

<li><label for="form-pswd">Log in:</label><br>
<input type="password" name="pswd" maxlength="8" id="form-pswd"></li>

The output is shown below.

Submit and reset buttons
<input type=”submit”>

Submits the form data to the server

<input type=”reset”>

Resets the form controls to their default settings

There are several different kinds of buttons that can be added to web forms. The most fundamental is the submit button. When clicked or tapped, the submit button immediately sends the collected form data to the server for processing. A reset button returns the form controls to the state they were in when the form initially loaded. In other words, resetting the form doesn’t simply clear all the fields.

Both submit and reset buttons are added using the input element. As mentioned earlier, because these buttons have specific functions that do not include the entry of data, they are the only form control elements that do not require the name attribute, although it is OK to add one if you need it.

Submit and reset buttons are straightforward to use. Just place them in the appropriate place in the form, which in most cases is at the very end. By default, the submit button displays with the label “Submit” or “Submit Query” and the reset button is labeled “Reset.”

Resources for further reading

HTML Dog

HTML Doctor