Tip:
Highlight text to annotate it
X
Chapter 4 Section 26: Inserting Form Fields
Text fields collect a single line of information such as a name, email address,
phone number, etc.
Text areas collect multiple lines of information such as a comment,
or a description, or a guestbook entry.
Checkboxes collect either a yes or no response for items.
Radio buttons collect a single choice from a list of options.
Menus allow visitors to choose a single option from a list of items.
File fields allow visitors to upload an attached file upon submission of a form.
And Submit buttons submit
a form content to a server
and
a Reset button will clear the content from the current form without sending it
to the server.
So those are some of the form fields that we're going to look at in Section 26.
Let's begin by creating a text field. Remember that we just inserted a form object,
the second form object on this page,
and I'm clicking my cursor inside that form object
and I'm going to add a new text area. I'm going to do so by going to
Insert,
Form,
and I'm choosing Text Field.
Once I've chosen Text Field,
the ID for this text field will be
Name and I will also label it as Name.
To meet accessibility standards, I'll attach the label
tag using the for attribute
and I'm going to--
Let's see. Yes, do the attach.
I'm going to position the label
before the form item.
I'm going to give this an access key of n for name
and a tab index of 10.
Now let me explain to you what I'm doing here in the accessibility box.
When I give this an access key of n, that means someone who has mobility
issues and can't use a mouse could press an n
to get to the name field.
They can also
press the tab key
and get to this item.
I usually tab these in tens, so the next one I'll go ten, twenty, thirty, and
that way I leave numbers in between should I need to modify the form at a later
date; I'll have numbers available
within the tens that I set originally.
So I'm going to say OK to these accessibility attributes and what's
been placed on my page
is
the word name
and the
visible text box. Now, if I click upon that text box,
I can come down to the property inspector
and you'll notice that the name of this field is Name,
it's character width is the default, but you can specify a character width.
Let's say we want the character width for this to be 40
and the maximum number of characters a user can type could be 60.
That means that 40 characters will display on your screen but the user
will be able to type twenty more characters than that.
If I choose Single line, it will be a text box, or text field.
If I choose Multi line, it will be a text area.
If I choose Password, the content that is typed into the form in this field by the visitor
will appear as asterisks (*******) and won't appear as regular text.
If I want something to appear in the box as an initial value,
I'm going to put 'type your name here' and press Enter.
You see, that's what initial value does. I'm not a big fan of initial value.
I think it's fairly explanatory that if I type Name
then a person is going to place their
name there.
I'm going to delete that. I could also apply a class.
So I've added a text field.
I'm going to click after the text field and press Enter
and I'm going to add another text field by going to Insert,
Form,
Text Field.
This one is going to be Phone.
The label will be Phone.
I'll attach the label using the for attribute - that's best for accessibility.
Position the label before the item.
The access key will be a p for phone.
The tab index
will be 20
and I will say OK.
Now, to make this form look a little bit more attractive, I'm going to select that
text field
and set its character width to 40
and leave everything else alone
that way the box is the same size as the previous.
Clicked after it, and I'm going to add one more field.
That field, I'm going to say Insert,
Form, Text Field,
and this one I'm going to call Email.
Email.
I am going to give it an access key of e
and a tab index of 30.
Press Enter.
Select the text field. Change its character width to 40.
So I have created a form that
asks for the visitor's name,
phone and email address.
Now, I'm going to press Enter
and we're going to
act like this person may be ordering a pizza.
Now, in ordering a pizza, you're going to have different toppings.
Let's say that we have six different toppings that are available.
Some users will want one of those toppings, others will want two, others will want three.
A checkbox becomes an ideal situation for this list of toppings
so we're going to add some checkboxes. We're going to say Insert,
Form,
Checkbox.
And...
The type of
toppings we're going to have--
Let's say that we have
Canadian Bacon.
And the access key for this-- I don't think we've used a c.
The tab index is 40.
And we'll say OK.
And there is our Canadian Bacon item.
If I were to click the check box--
I really should not have spaces in these items
so I'm going to take the space out of the name of the checkbox.
Now I'm going to click after Canadian Bacon
and let's say that one of my other toppings is
um...
Sausage.
So I'll say Insert,
Form,
Text Fi-- Oops!
I chose Text Field, sorry.
Insert, Form,
Checkbox,
and I'm typing Sausage.
Sausage.
I don't believe I've used an s.
The tab index is
50.
Click after that,
and I just continue inserting checkboxes
for all the toppings that I might have.
Um... Onions.
You get the idea here.
Access key - we'll make that o. Tab index - we'll make that 60.
And I believe that's all the toppings that I'll add right now.
Oh, I'll add one more. Insert, Form,
Checkbox.
Gotta have a pepper.
Peppers.
Peppers.
And we're in trouble because we've already used p
for phone
so we'll have to think of something like h for hot
for peppers
and make that a tab index of 70.
So I have added four toppings here,
and I must have added that text box so I'm going to delete that.
I've added four toppings and I could just continue to add those.
Most places that you would eat pizza would have
twelve different toppings, but we're just going to have four on ours.
I'm going to press Enter.
Our person who's ordering this pizza will want to order it in a specific size -
a small, a medium or a large,
so we are going to have to think of a way
to allow them to choose what size pizza they want. In this case, the checkbox is
not the best answer because a checkbox can have multiple responses.
A radio group is the best solution for us so we're going to Insert,
Form,
and rather than choose Radio Button,
we're going to choose Radio Group
because normally there will be a group of items that you will want to add at
the same time. So the name of this group is going to be Size
and I'm going to click under Label and I am going to put Small,
and the value would be small.
And I'm going-- Actually, I'm going to say
the value would be yes. I'll explain this in a moment.
Medium, yes.
And I need to add another.
Large, oops,
got out of that one.
Large, yes.
Now, let's have an Extra Large.
Scroll down.
yes.
So, the label on these, as these responses are--
Actually, these do need to be small, medium and large. Sorry.
small, medium,
large.
Can't get down to that Extra Large--
and I'll put xlarge like that.
So when these-- When this form is submitted, to the server, the response
that would be given
would be
size=small,
size=medium, size=large.
So the value will explain,
to the person who receives this input from the form, what the response to that
question is.
It wants to know if I want to lay out these objects using line breaks
or a table.
Either one is appropriate; I'm going to choose Line breaks to make this simple
and say OK.
And now I have a group of four radio buttons
and those four radio buttons would
allow a user to choose one of them. Only one of the items, where with the checkboxes we can
choose multiple items.