How to Build Text Style Inputs for Your HTML5 and CSS3 Based Web Pages

By Andy Harris

Most of the form elements on HTML5 and CSS3 web pages are variations of the same tag. The tag can create single-line text boxes, password boxes, buttons, and even invisible content (such as hidden fields). Most of these objects share the same basic attributes, although the outward appearance can be different.

How to make a standard text field

The most common form of the input element is a plain text field.

To make a basic text input, you need a form and an input element. Adding a label so that the user knows what he’s supposed to enter into the text box is also common. Here’s the code:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>textbox.html</title>
 </head>
 <body>
 <form action = ">
  <p>
  <label>Name</label>
  <input type = "text"
    id = "txtName"
    value = "Jonas"/>
  </p>
 </form>
 </body>
</html>

An input element has three common attributes:

  • type: The type attribute indicates the type of input element this is. This first example sets type to text, creating a standard text box. Other types create passwords, hidden fields, check boxes, and buttons.

  • id: The id attribute creates an identifier for the field. When you use a programming language to extract data from this element, use id to specify which field you’re referring to. An id field often begins with a hint phrase to indicate the type of object it is (for instance, txt indicates a text box).

    image0.jpg

  • value: This attribute determines the default value of the text box. If you leave this attribute out, the text field begins empty.

Text fields can also have other attributes, which aren’t used as often, such as

  • size: This attribute determines the number of characters that are displayed.

  • maxlength: Use this attribute to set the largest number of characters that are allowed.

There is no tag. Input tags are a holdover from the days when many tags did not have ending tags. You just end the original tag with a slash character, as shown in the preceding sample code.

You might wonder why the tag was added if it doesn’t have any effect on the appearance or behavior of the form. In this particular example, the tag doesn’t have an effect, but like everything else in HTML, you can do amazing style things with it in CSS. Even though labels don’t typically have a default style, they are still useful.

How to build a password field

Passwords are just like text boxes, except the text isn’t displayed. Instead, a series of asterisks appears.

The following code reveals that passwords are almost identical to ordinary text fields:

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>password.html</title>
 </head>
 <body>
 <form action = ">
  <fieldset>
  <legend>Enter a password</legend>
  <p>
   <label>Type password here</label>
   <input type = "password"
     id = "pwd"
     value = "secret" />
  </p>
  </fieldset>
 </form>
 </body>
</html>

In this example, a password field was created with the ID . The default value of this field is . The term secret won’t actually appear in the field; it will be replaced with six asterisk characters.

image1.jpg

The password field offers virtually no meaningful security. It protects the user from spy satellites glancing over his shoulder to read a password, but that’s about it. The open standards of HTML and the programming languages mean passwords are often passed in the open. There are solutions — such as the SSL technology — but for now, just be aware that the password field isn’t suitable for protecting your secrets.

This example doesn’t really do anything with the password, but you’ll use other technologies for that.

How to make multi-line text input

The single-line text field is a powerful feature, but sometimes, you want something with a bit more space. The program demonstrates how you might create a page for an essay question.

The star of this program is a new tag — :

<!DOCTYPE html>
<html lang = "en-US">
 <head>
 <meta charset = "UTF-8">
 <title>essay.html</title>
 </head>
 <body>
 <form action = ">
  <fieldset>
  <legend>Quiz</legend>
  <p>
   <label>Name</label>
   <input type = "text"
     id = "txtName" />
  </p>
  <p>
   <label>
   Please enter the sum total of
   Western thought. Be brief.
   </label>
  </p>
  <p>
   <textarea id = "txtAnswer"
     rows = "10"
     cols = "40"></textarea>
  </p>
  </fieldset>
 </form>
 </body>
</html>

Here are a few things to keep in mind when using the tag:

  • It needs anattribute, just like an input element.

  • You can specify the size withandattributes.

  • The content goes between the tags. The text area can contain a lot more information than the ordinary tags, so rather than placing the data in the attribute, the content of the text goes between the and tags.

Anything placed between and in the code ends up in the output, too. This includes spaces and carriage returns. If you don’t want any blank spaces in the text area, place the ending tag right next to the beginning tag.

image2.jpg