Text Fields

These tutorials are about XHTML, the Extensible Hypertext Markup Language.

Text Fields

The text fields that you can use in a form are as follows:

• <input type="text" />
• <input type="password" />
• <input type="file" />
• <textarea>

Three of them are types of <input> tags, while the last is a separate tag used for creating multi-line text boxes.

<input type="text" />

Normal text fields are the most common type of entry box in forms. A text field is an empty field that is one line high and of a given length that accepts a single line of input from a user.

You can specify the width of the box with the size attribute. The maximum amount of text that can be entered with the maxlength attribute. Both attributes are measured in number of characters.

The maxlength can be larger than the size, in which case the field will scroll to show new text as it is entered. It is recommended that you set these values yourself rather than just accepting the defaults, since the defaults are different for each browser. The size should be small enough to fit on the screen with its label. The maxlength should be as large as the largest expected value for the field.

You can also use the value attribute to assign an initial or default value to the field, which will show when the field is displayed.

A warning about text fields is that HTML has no way in and of itself to control what is entered in those fields. People can put any value they want in it, such as their name in the zip code field. This, of course, won't work when the data gets to the server which tries to process it. Two things can be done to help solve this problem. One is to make sure that your directions for the form are clear and concise. The second is to write client-side or server-side programs to test the data before sending it to the program that is supposed to process it.

<input 
  type="text" 
  name="sample1" />

<input 
  type="text" 
  name="sample2" 
  size="10" 
  maxlength="30" /> 

<input 
  type="text" 
  name="sample3" 
  size="30" 
  maxlength="10" /> 

<input 
  type="text" 
  name="sample4" 
  size="20" 
  value="Lemon Curry"
  maxlength="20"/> 

<input type="password" />

The password input type is used to designate a masked field, which is a field where what the user types does not display on the screen. Instead it is masked by some masking character, such as an asterisk. This is useful for entering passwords and other sensitive information where no one else should be allowed to see what the user entered.

Be aware of the fact that the password type only secures the information from prying eyes, it does not secure it from prying programs. The data written into the field is still stored as a string of plain text and is still transmitted unencrypted unless a secure transmission method is used.

<input 
  type="password" 
  name="sample1" 
  size="20" 
  maxlength="20" /> 

<input type="file" />

The file input type allows the user to select a file to be sent back to the server. The file name is included as a text string which the browser uses to retrieve the document. It displays with both a text entry box and a browse button that allows you to browse yor directories for the file.

In order to use this type of data field, you must set your method to post.

The file input type also allows the use of the accept attribute, which is used to specify which type of files will be accepted. If it is not specified, then any file type will be valid. The attribute takes a valid MIME type and does accept wildcards. For instance, accept="text/*" will accept any valid text file type (e.g., text/plain, text/html, text/css, etc.)

<input 
  type="file" 
  name="sample1" 
  size="50" /> 

<textarea>

The <textarea> tag allows for multi-line input fields. Unlike the <input> tag, the <textarea> tag has an end tag. If you include content for the tag, it must be text only, and it will be included as the default content for the field.

The <textarea> tag has two attributes to determine its size, the rows attribute and the cols attribute. Each row is one character high and each column is one character wide, so rows and columns are really the number of lines up and down and the number of characters across.

There is also the wrap attribute, which determines whether or not the field will wrap text when it reaches the right margin. The default in older browsers is to not wrap text unless the user hits the enter key. The default for newer browsers is to wrap the text. The values for wrap are:

off

Text is not wrapped. Carriage returns must be manually entered with the enter key.

virtual

Text is wrapped for display in the text box, but no carriage returns are inserted into the data when it is transmitted.>

physical

Text is wrapped. At the end of every line the browser inserts a carriage return, which is transmitted to the server as the string %0D%0A.

wrap is not part of the XHTML standard, and does not work in many newer browsers, but if you want backward compatibility of your forms, it is probably a good idea to still use it.

<textarea 
  name="sample1" 
  cols="30"
  rows="10"
  wrap="off"> 
Input Text Here
</textarea>

<textarea 
  name="sample2" 
  cols="25"
  rows="5"
  wrap="virtual"> 
Input Text Here
</textarea>

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated August 2003