CHAPTER 10: HTML FORMS

Table of Contents
CHAPTER 10: HTML FORMS ................................................................................................................... 1
10.1 Chapter Overview ............................................................................................................................. 2
10.2 Introduction ....................................................................................................................................... 2
10.3 Input Element(s)................................................................................................................................ 4
10.3.1 Web Forms: Value Attribute ...................................................................................................... 5
10.3.2 Name and ID Attributes ............................................................................................................. 6
10.4 Text Fields ........................................................................................................................................ 6
10.4.1 Text Fields: Size Attribute ......................................................................................................... 7
10.4.2 Text Fields: Maxlength Attribute ............................................................................................... 7
10.5 Password Fields ................................................................................................................................ 8
10.5.1 Password Fields: Attributes ....................................................................................................... 8
10.6 Reset Buttons .................................................................................................................................... 9
10.7 Submit Buttons................................................................................................................................ 10
10.7.1 Form Submission - Action ....................................................................................................... 10
10.8 Checkbox Forms ............................................................................................................................. 11
10.8.1 Checkboxes Selected................................................................................................................ 12
10.9 Radio Buttons.................................................................................................................................. 13
10.9.1 Radio Buttons: The Checked Attribute .................................................................................... 14
10.10 Select Fields .................................................................................................................................. 15
10.10.1 Disabling Selection Fields ..................................................................................................... 15
10.11 Hidden Field.................................................................................................................................. 16
10.12 Upload Field.................................................................................................................................. 17
10.12.1 Max File Size Field ................................................................................................................ 17
10.13 Text Areas ..................................................................................................................................... 17
10.13.1 Text area Wrap ....................................................................................................................... 19
10.13.2 Text Areas: Readonly............................................................................................................. 20
10.13.3 Text Areas: Disabled .............................................................................................................. 20

Page 1 of 21
10.1 Chapter Overview
A large part of developing a web based application involves handling interaction with user via
their web browsers. One of the most common tasks in this area of web development involves
presenting the user with forms to collect information, and then processing that information. Small
wonder, then, that forms are the bedrock of user interaction on an Intranet. The ease with which
HTML forms can be created is one of the technology's big benefits, for users and developers
alike. HTML forms provide a rich set of data input features that emulate those found on common
paper forms. For instance, a form can be used to capture manually-entered information to a
database. A related application is the use of forms to input free text, such as a discussion forum
message.

In this chapter, you learn:

 How to design and build forms using HTML

 What you can do with forms on an Intranet
 How online forms can replace paper flows
 Where Web-based forms don't fit

Upon completion of this chapter, you should be able to

 Design a form
 Create a text entry field
 Add radio buttons
 Add checkboxes
 Create a pull-down menu
 Add a push button

10.2 Introduction
HTML web forms are a composition of buttons, checkboxes, and text input fields embedded inside
of HTML documents with one goal in mind: to capture user input. By doing things such as
providing fields for user data such as names, phone number, and email addresses, web forms give
users the opportunity to interact directly with a webpage.

HTML forms are placed on a web page using the <form> tag. This tag should encapsulate a series
of other form elements, identifying them as a single cohesive web form.

HTML Form Element:

Page 2 of 21
<formg name="myWebForm" action="myServerSideScript.php" method="post"><input
type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>

HTML Web Form:

Checkbox 1

Text Field 1

HTML form elements rely on action and method attributes to identify where to send the form data
for processing (action) and how to process the data (method). In the code above, we've inserted
some make-believe values to represent what a typical HTML form might look like behind the
scenes.

Unfortunately, HTML alone is unable to process form data. A scripting language such as PHP,
PERL, and/or JavaScript must be used with HTML forms to process data captured by HTML form
elements. For the purpose of following along, we can also adjust the action property slightly to
have the form launch an email client instead of processing a make-believe server-side script. This
will provide us with some form interactivity for us as we learn more about HTML forms.

Email Form Element:

<formg name="myWebForm" action="mailto:[email protected]" method="post">

<input type="checkbox" /> Checkbox 1<br />
<input type="text" /> Text Field 1<br />
<input type="submit" value="SUBMIT" />
</form>

HTML Email Form:

Checkbox 1

Text Field 1

SUBMIT

Now when the SUBMIT button is clicked, the user should see their default email client launch.

Page 3 of 21
 HTML forms provide user interaction between visitors and the website while simultaneously
collecting priceless user data from your users. They are a vital tool for any webmaster, and these
days, it is common place to see form elements embedded in every web page.

Tips
 Remember to set the name and value attributes for your forms so the document created
will be neatly organized.
 Remember to place submit buttons with the form tags to submit the document correctly.

Attribute What it does…

ACTION Specifies the URL to which FORM content is to be sent for processing. This is
(required) usually the address of a script or mailto target. Example:

<FORM ACTION="mailto:[email protected]">
METHOD HTTP provides several methods for clients to request service: GET, POST, PUT, HEAD.
By far the most prevalent in GET, which gets an object from the server, and
POST, this posts data to an object on the server.
As a rule of thumb, use POST when passing form data to a program, and GET when
making a request or performing a search.
Examples:

<FORM ACTION="http://www.que.com/cgi-bin/readform" METHOD=POST>

<FORM ACTION=http://www.que.com/cgi-bin/locate?G+Benett METHOD=GET>

10.3 Input Element(s)

HTML input elements are form elements such as text fields, checkboxes, and buttons. The name
comes from the <input> tag, which is the mark-up that identifies web form components. The
<input> tag relies upon a few attributes to classify and name each form item, providing the web
developer with a means to manipulate each element individually.

The type attribute determines what kind of input element to render to the screen. Options here
include: text, checkbox, radio, button, submit, reset, password, and hidden form elements. Each
has its own unique functionality and customizable presentation.

Input Element Code:

Page 4 of 21
<formg name="myWebForm" action="mailto:[email protected]"
method="post"> Check Me: <input type="checkbox" /><br />

Name: <input type="text" /><br />

Yes: <input type="radio" /> No: <input type="radio" /><br

/><input type="submit" value="SUBMIT" /><input
type="reset" value="RESET" />
</form>

Input Element sample output:

Check Me:

Name:

Yes: No:

10.3.1 Web Forms: Value Attribute

The value attribute plays a different role depending on the type of the input field. For example,
when used with an HTML button, the value attribute defines the text inside of the button. When
used with a text field, the value attribute populates the field with a default value.

HTML Input Element Code:

<formg name="myWebForm" action="mailto:[email protected]" method="post">

Check Me: <input type="checkbox" /><br />

Name: <input type="text" value="David" /><br />

Yes: <input type="radio" /> No: <input type="radio" /><br

/><input type="submit" value="Send" /><input type="reset"
value="Clear" />
</form>

HTML Input Elements:

Check Me:

Name: David

Yes: No:

Page 5 of 21
10.3.2 Name and ID Attributes

Setting the name and id attributes inside of form elements is a good habit. The element name and/or
id will later serve as the link between your HTML form and any server-side script that you may
deploy later on to process that data. Perhaps the best approach is to use both attributes in your
code, since varying scripting languages demand one identifying attribute over the other.

Input Element Code:

<formg name="myWebForm" action="mailto:[email protected]" method="post">
Check Me: <input name="" id="" type="checkbox" /><br />
Name: <input name="userName" id="userName" type="text" /><br />
Yes: <input name="radioItem" id="radioItem" type="radio" />
No: <input name="radioItem" id="radioItem" type="radio" /><br />
<input name="submitForm" id="submitForm" type="submit" value="SUBMIT"/>
<input name="resetForm" id="resetForm" type="reset" value="RESET" />
</form>

HTML Input Elements:

Check Me:

Name:

Yes: No:

10.4 Text Fields

Text fields offer a small rectangular box that's always ready to receive information from viewers.
Users will notice that when they click these fields, the cursor will change from the typical arrow
to a pipe character ( | ), allowing for text entries to be typed inside each input field.

A text field is placed on a web page using the <input> tag, with the type attribute set with a value
of "text".

Text Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last:
<input title="Please Enter Your Last Name" id="last" name="last" type="text" />
<input type="submit" value="SUBMIT" />
</form>

Text Field sample output:

Page 6 of 21
First: Last:

Text fields are designed to capture single words or phrases from the user. That information may
then be processed through some kind of client/server side script (PHP, PERL, JavaScript). If you
do plan on processing the data, be sure to include the name and id attributes. A descriptive title is
also a great visual aid for providing a tool-tip display for your web elements.

10.4.1 Text Fields: Size Attribute

To modify the visual presentation of a text field, one needs to pass an integer value to the size
attribute. The value represents how many characters a text field can display within the text field
window.

As the web designer, it is your job to analyze and predict the average length of characters that will
be entered into each field by your users. First and last names may generally vary from 8-24
characters in length, while a typical email address may range from 12-36 digits.

Text Field Size code:

<form name="myWebForm" action="mailto:[email protected]" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
/><br />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18"
/><br />
<input type="submit" value="SUBMIT" />
</form>

Text Field Size sample output:

First:

Last:

If the user happens to enter more digits than the size attribute value, these characters will not be
discarded; it just means that the user will not be able to see all of their input at once. Instead, they
will be forced to scroll to the beginning and end of the input element, which tends to discourage
user interaction.

10.4.2 Text Fields: Maxlength Attribute

Maxlength is an optional attribute that accepts an integer value. It allows the developer to
restrictthe number of characters a user can type in a specific text field.

Page 7 of 21
HTML Text Field Maxlength:
<form name="myWebForm" action="mailto:[email protected]" method="post">

First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="3" value="David" /><br />

Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18"
maxlength="3" value="Smith" /><br />
<input type="submit" value="SUBMIT" />
</form>

HTML Text Field Maxlength:

First: David

Last: Smith

We've also called upon the value attribute to place some text inside the text fields for you!

10.5 Password Fields

HTML password fields are designed to capture user input, but disguise each character with an
asterisk (*) instead of displaying the entered digits. They offer a user on-screen privacy while he
or she is entering a password.

Password fields are placed on a website using the <input> tag and specify a value of "password"
for the type attribute.
Password Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

Password: <input type="password" title="Please Enter Your Password" size="8" /><br />
<input type="submit" value="SUBMIT" />
</form>

Password Fields Sample Output:

Password:

10.5.1 Password Fields: Attributes

Password form fields may be customized using the same attribute as outlined in the HTML Text
Fields.

Page 8 of 21
Password Input Field Code:
<form name="myWebForm" action="mailto:[email protected]" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="12" />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18"
maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8"
/><br />
<input type="submit" value="SUBMIT" />
</form>

Password Input Field sample output:

First: Last:

Password:

Password fields offer a very thin layer of security by visually concealing passwords; they offer no
security whatsoever against maintaining the integrity of the password data. From data is processed
in plain text and can be readily sniffed by a hacker, unless HTTPS is used to encrypt the data.

10.6 Reset Buttons

A reset button allows users to basically clear their web form. It wipes values from all fields by
"resetting" the form to its default appearance.

Set the type attribute of the <input> tag to "reset" to incorporate a reset button into a web form.

HTML Reset Button Code:

<input type="reset" value="Reset" />
<input type="reset" value="Start Over" />

Two HTML Reset Buttons:

Placing a reset button inside of a form tag automatically associates the reset button with each form
element and delivers a useful feature for your viewers.

HTML Code:

Page 9 of 21
<form action="myphp.php" method="post"><input type="text" size="12" maxlength="12"
/><input type="text" size="24" maxlength="24" /><input type="reset" value="Reset"
/></form>

Reset Forms:

Fill out some information in the field boxes and press reset to experience a reset form!

10.7 Submit Buttons

Submit buttons send form data to a back-end process or application. The back-end process then
verifies and processes the data, eventually passing the information into some database application.

Set the type attribute of the <input> tag to "submit" in order to place a submit button on a web
page.

HTML Submit Buttons:

<input type="submit" value="Submit" />
<br /><input type="submit" value="Send" />
<br /><input type="submit" value="Submit Form" /><br />

Three HTML Submit Buttons:

Notice that in the above example, we also changed what was written on our button using the value
attribute. This can be changed to any value you wish.

10.7.1 Form Submission - Action

Submission buttons send form data to whatever action has been designated by the action attribute
of the encapsulating <form> element. We learned about the action attribute earlier in this chapter.

If you've been following along, we've also been using the deprecated mailto action to send form
data to our default email client. This will allow us to get a sense of how form values are transferred
to an action.

HTML Code:
<form method="post" action="mailto:[email protected]">
First:<input type="text" name="First" size="12" maxlength="12" />
Last:<input type="text" name="Last" size="24" maxlength="24"/>
<input type="submit" value="Send Email" />

Page 10 of 21
</form>

Form Action:

First:

Last:

Fill out the above form, and as your mail program opens, you can change the email address to a
personal address and then send the results using the form.

Tips

The HTML Button is probably the second most commonly used Graphical User Interface (GUI)
component when developing HTML forms. There are three types of Button object available. The
type= attribute is used to define which type of button is to be created. The three different typesare:

 type="BUTTON" - The basic button which performs no action by default unless

anevent handler is assigned to it.

 type="SUBMIT" - The submit button. When pressed this button causes the data in theForm
to be sent to the server using the settings defined in the enclosing <Form> tag. If the
onsubmit attribute on the enclosing <form> tag has been specified this will be executed
before the form data is submitted (useful for JavaScript form data validation).

 type="RESET" - The reset button. When pressed causes the fields in the Form to
beeither cleared, or reset to the defaultValue (if one has been specified).

10.8 Checkbox Forms

Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web
page.

Deploy checkbox elements in a situation when the user must check all boxes that apply (or none).
A scripting language such as PHP will easily handle this form element, returning all elements the
user has checked.

HTML Checkbox Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" name="sports" value="soccer" /><br />
Football: <input type="checkbox" name="sports" value="football" /><br />

Page 11 of 21
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" name="sports" value="basketball" />
</form>

HTML Checkbox Form:

Please select every sport that you play.
Soccer:

Football:

Baseball:

Basketball:

Checkboxes are used for instances where a user may wish to select multiple options, such as in
the instance of a "check all that apply" question.

10.8.1 Checkboxes Selected

A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked
attribute with a "yes" value. By doing so, this element will now default to a checkedstatus each
time the HTML page is loaded.

HTML Checkbox Selected Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">
<p>Please select every sport that you play.</p>
Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /><br /> Football:
<input type="checkbox" name="sports" value="football" /><br />
Baseball: <input type="checkbox" name="sports" value="baseball" /><br />
Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" />
</form>

HTML Pre-Selected Checkboxes:

Please select every sport that you play.

Soccer:

Football:

Baseball:

Basketball:

Page 12 of 21
10.9 Radio Buttons
Radio form elements allow the user to "bubble" in their choice and limit each question to only one
selection per radio group.

Place a radio element on to your web page by setting the type attribute of the <input> tag to "radio".

HTML Radio Input Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
</form>

HTML Radio Fields:

Please select your favorite food category.

: Italian

: Greek

: Chinese

By naming each field similarly with a type of cuisine, we have created a relation, or a "grouping,"
of radio elements. This is how we link each element together and assure that the user is able to
select only one answer.

Let's now take a look at how we can group together different sets of radio elements and simulate
capturing two pieces of user data: gender and favorite food.

HTML Multiple Radios:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br />
<input type="radio" name="food" /> : Chinese<br />
<h4>Please select your gender.</h4>
<input type="radio" name="gender" /> : Male<br /><input type="radio" name="gender" /> :
Female<br />

Page 13 of 21
</form>

HTML Multiple Radio Fields:

Please select your favorite food category.

: Italian

: Greek

: Chinese

Please select your gender.

: Male

: Female

Words/values applied to the value attribute is the value or 'answer' passed to any server-side script
language we may have in place to record the results.

10.9.1 Radio Buttons: The Checked Attribute

By using the checked attribute, we adjust the form to load with a value already checked as the
default setting.

HTML Code:
<form name="myWebForm" action="mailto:[email protected]" method="post">
<h4>Please select your favorite food category.</h4>
<input type="radio" name="food" checked="yes" /> : Italian<br />
<input type="radio" name="food" /> : Greek<br /><input type="radio" name="food" /> :
Chinese<br />
</form>

Default Italian:
: Italian
: Greek
: Chinese
Using either/or logic, radios provide a very efficient way to capture very specific data from visitors.
Remember to use radio elements only when you'd like the viewer to select only a single value, just
as you might expect to see when taking a multiple-choice test in school.

Page 14 of 21
10.10 Select Fields
HTML select fields provide essentially the same functionality as HTML Checkbox Fields. They
allow the user to select one or more values from a pre-determined series of options.

Incorporating a select field into a web page is done using the <select> tag. List values are then
added to the field using the <option> tag, similar to how list items <li> are added to ordered list
elements (<ol>).

HTML Drop Down List:

<select name="selectionField">
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

HTML Drop Down List:

By default, select fields, popularly called drop down lists, only allow the user to choose a single
value. This behavior and appearance may be changed by adjusting the multiple and size attributes
as demonstrated below.

HTML Selection Field Code:

<select size="3" name="selectionField" multiple="yes" >
<option value="CA" >California -- CA </option>
<option value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

HTML Selection Element:

With the above settings, the user is now able to select multiple values by pressing and holding the
Control (ctrl) key and clicking each value.

10.10.1 Disabling Selection Fields

Disabling a selection field is achieved by setting the disabled attribute to "yes". But before doing
that, you should set at least one of the values to be selected. Doing so renders a read-only selection
field on the page that can inform your users of their selections without allowing them to alter the
selection.

Page 15 of 21
HTML Read-Only Selection Field:
<select size="3" name="selectionField" multiple="yes" disabled="yes">
<option value="CA" >California -- CA </option>
<option selected value="CO" >Colorado -- CO</option>
<option value="CN" >Connecticut -- CN</option>
</select>

10.11 Hidden Field

Hidden fields allow a coder to pass values to form elements in a subtle manner. An experienced
web developer will utilize these fields to pass temporary, or session-based data, from one form to
another or to store information that has already been entered in by the user.

Place a hidden input field into your web forms using the <input> tag and set the type attribute to
"hidden". This field can be customized using any of the attributes discussed in the HTML Input
and HTML Text Fields.

HTML Hidden Input Field:

<form name="myWebForm" action="mailto:[email protected]" method="post">
First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12"
maxlength="12" />
Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18"
maxlength="24" /><br />
Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8"
/><br /><br />
<input type="hidden" name="orderNumber" id="orderNumber" value="0024" /><br />
<input type="submit" value="SUBMIT" />
<input type="reset" value="RESET" />
</form>

HTML Hidden Fields:

First: Last:

Password:

It is important to note that HTML hidden fields do not offer any data security. Like all HTML
form elements, the data is processed in plain text and is readily accessible by any novice hacker.

Page 16 of 21
10.12 Upload Field
Upload fields provide the interface that allows users to select a local file and upload it to the web
server. An upload field renders as two parts -- an empty text field and a Browse button that opens
up a local window explorer on the user's computer. This allows them to quickly browse to the local
file and automatically fills in the file path inside of the text field.

Setting the type attribute of the <input> to "file" places the upload element on a web page.
HTML Upload Field Code:

<form name="myWebForm" action="mailto:[email protected]" method="post">

<input type="file" name="uploadField" />
</form>

10.12.1 Max File Size Field

File transferring across the internet is a complicated process and should include many layers of
security. HTML alone cannot ensure safe and secure file transferring, but it can offer a first line of
defense. Using a MAX_FILE_SIZE hidden field can limit the size of files that are transferred.

Placing a restraint on an HTML upload field is accomplished by using a hidden input field with
the name attribute set to MAX_FILE_SIZE.

HTML MAX_FILE_SIZE Code:

<form name="myWebForm" action="mailto:[email protected]"

method="post"><input type="hidden" name="MAX_FILE_SIZE" value="500"
/><input type="file" name="uploadField" />
</form>

HTML MAX_FILE_SIZE:

The value attribute specifies the maximum allowable kilobytes (KB) for any file selected by the
user.

10.13 Text Areas

An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from
a user. If you've ever posted on a forum or left feedback on your favorite blog, you probably do so
using an HTML textarea.

Page 17 of 21
Embed textareas in HTML documents using the <textarea> tag. Any text placed between the
opening and closing textarea tags will be rendered inside the textarea element as the "default" text.
This makes for a great way to give users an example or description of how to go about filling out
the text area field. Something like, "Please limit your response to 100 characters," would be an
ideal description.

HTML Textarea Code:

<textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100

characters.</textarea><br />

<textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200

characters.</textarea><br />

<textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500

characters.</textarea><br />

HTML Textarea Form Element:

Please limit your resp

Please limit your response to 200 characte

Please limit your response to 500 characters.

As you may have noticed, the attributes cols (columns) and rows control the rendered size of the
textarea. These constraints only impact how the textarea is rendered visually, and in no way do
they limit the maximum number of characters a user can place inside the textarea. In fact, if you

Page 18 of 21
fill up the fields above with text, the fields will just continue to grow as you type and you will be
able to scroll up and down as you please. Limits must be set with JavaScript and/or a server-side
scripting language such as PHP.

10.13.1 Text area Wrap

The wrap attribute refers to how the user input reacts when it reaches the end of each row in the
text field. Wrapping can be defined using one of three values:

 soft
 hard
 off

"Soft" forces the words to wrap once inside the textarea but once the form is submitted, the words
will no longer appear as such, and line breaks and spacing are not maintained.

"Hard" wraps the words inside the text box and places line breaks at the end of each line so that
when the form is submitted the text will transfer as it appears in the field, including line breaks
and spacing.

"Off" sets a textarea to ignore all wrapping and places the text into one ongoing line.

HTML Text Area Word Wrap Code:

<textarea cols="20" rows="5" wrap="hard">

As you can see many times word wrapping is often the desired look for your textareas. Since it
makes everything nice and easy to read and preserves line breaks. </textarea>

HTML Text Area Word Wrap:

As you can see man

your text areas. Sinc

Here's a textarea with no word wrapping at all!

HTML Text Area No Word Wrap:

<textarea cols="20" rows="5" wrap="off">
As you can see many times word wrapping is often the desired look for your textareas. Since it
makes everything nice and easy to read. </textarea>

Page 19 of 21
HTML Text Area No Word Wrap:

As you can see man

w rapping is often the
everything nice and e

10.13.2 Text Areas: Readonly

Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has
permission to manipulate the text inside the text field.

HTML Readonly Attribute:

<textarea cols="20" rows="5" wrap="hard" readonly="yes">

As you can see many times word wrapping is often the desired look for your text areas. Since it
makes everything nice and easy to read.
</textarea>

HTML Read Only Text Areas:

As you can see

many times w ord w r
Since it makes everyt

This read-only behavior allows a web surfer to see and highlight the text inside the element, but
he or she cannot alter it in any way. When highlighted, the user may also Copy (Ctrl + C on a PC,
Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere he/she pleases.

10.13.3 Text Areas: Disabled

Disabling the textarea altogether prevents the surfer from highlighting, copying, or modifying the
field in any way. To accomplish this, set the disabled property to "yes".

HTML Code:

<textarea cols="20" rows="5" wrap="hard" disabled="yes">

As you can see many times word wrapping is often the desired look for your text areas. Since it
makes everything nice and easy to read.
</textarea>

Page 20 of 21
Disabled Textareas:

As you can see

many times w ord w r
Since it makes everyt

Keep in mind that just because users are unable to copy from the screen directly doesn't prevent
them from taking a screen capture or extracting the data from the source code. Disabling the
textarea offers no security whatsoever.

Page 21 of 21