INPUT IMAGE - RESET ?

[PW]

Hi,

I have the following two lines in my form.

<INPUT TYPE=IMAGE SRC="images/i_ok.gif"ALT="Ok" ALIGN=ABSMIDDLE>
<INPUT TYPE=IMAGE SRC="images/i_clear.gif"ALT="Clear" ALIGN=ABSMIDDLE>

Unfortunately the second line is acting as a submit, rather than a reset.
How can I make the second line act like a reset ?

Thanks,
PW

 

[Sam Hughes]

Hi,

I have the following two lines in my form.

<INPUT TYPE=IMAGE SRC="images/i_ok.gif"ALT="Ok" ALIGN=ABSMIDDLE>
<INPUT TYPE=IMAGE SRC="images/i_clear.gif"ALT="Clear" ALIGN=ABSMIDDLE>

Input elements do not have any sort of align attribute.

Unfortunately the second line is acting as a submit, rather than a reset.
How can I make the second line act like a reset ?

Make it a reset button:
<input type=reset value="Reset the form!" [...]>

 

[PW]

Make it a reset button:
<input type=reset value="Reset the form!" [...]>

If I make it a reset button, then it displays as a button, and not with my
image on it.

 

[Sam Hughes]

Make it a reset button:
<input type=reset value="Reset the form!" [...]>

If I make it a reset button, then it displays as a button, and not
with my image on it.

Well, how about that. Perhaps CSS could "help," though I bet its use would
most likely only hurt the situation.

 

[Nik Coughin]

Hi,

I have the following two lines in my form.

<INPUT TYPE=IMAGE SRC="images/i_ok.gif"ALT="Ok" ALIGN=ABSMIDDLE>
<INPUT TYPE=IMAGE SRC="images/i_clear.gif"ALT="Clear" ALIGN=ABSMIDDLE>

Unfortunately the second line is acting as a submit, rather than a
reset. How can I make the second line act like a reset ?

Thanks,
PW

This is the first thing that Google returns if you search for
html+form+image+reset:

http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html

 

[PW]

This is the first thing that Google returns if you search for
html+form+image+reset:
http://www.cs.tut.fi/~jkorpela/forms/imagebutton.html

That had the answer. thanks.

<td><INPUT TYPE=IMAGE SRC="images/i_ok.gif" ALT="Ok"></td>
<td><a onclick="document.myform.reset();return false;"><img
src="images/i_clear.gif" alt="Clear"></a><td>

 

[Jukka K. Korpela]

That had the answer. thanks.

<td><INPUT TYPE=IMAGE SRC="images/i_ok.gif" ALT="Ok"></td>
<td><a onclick="document.myform.reset();return false;"><img
src="images/i_clear.gif" alt="Clear"></a><td>

Apparently you didn't read the document well enough.

The most important thing is that reset buttons hurt _far_ more often than
they do any good.

By making a reset button non-functional*), you remove part of the
problem, but it's still all in vain or worse, and the user may get very
confused if he, by miracle, really wants to discard his carefully typed
input.
*) Except for the souls that browse around with JavaScript enabled.

 

[Toby Inkster]

How can I make the second line act like a reset ?

More to the point: why?

Reset buttons are rarely used, and when they are used it's usually by
mistake.

 

[PW]

Apparently you didn't read the document well enough.

I feel I read it well enough for my use.

The most important thing is that reset buttons hurt _far_ more often than

they do any good.

I think the reset button is just another convenient option for the user. No
ones forcing them to use it.

By making a reset button non-functional*), you remove part of the
problem, but it's still all in vain or worse, and the user may get very
confused if he, by miracle, really wants to discard his carefully typed

input.

The image I have used is a big red "X", so I tend to consider my users as
reasonably intelligent enough to make the right choice.

 

[Jukka K. Korpela]

I think the reset button is just another convenient option for the
user.

Then you think wrong. Even simply _thinking_ about the matter should
reveal this in less than a minute: what possible use could it have? when
did _you_ last use anything like that? Then think about the damage caused
by accidentally clicking on a reset button.

Of course, such things can be studied as well. Do you base your opinion
on some factual studies on user behavior _or_ what users say they like
(which are two different things, though probably not here)?

Authors don't put reset buttons on their pages because they would have
given a thought to their users. They use them because they copy something
that they regard as cool on other people's pages, and perhaps even try to
make it look cooler by making it look Different.

But check what Nielsen, the useability guru, writes about reset buttons,
if you still think they are "convenient".

 

[PW]

Then you think wrong.

No, I dont think wrong. A prime example of where a reset button is
"required" is if a user clicks an item in a listbox. Perhaps they changed
their mind and dont want to select something from that listbox. Their only
alternative without a rest button is to exit the page, and come back. It
more "convenient" to click the reset button.

 

[Chris Morris]

No, I dont think wrong. A prime example of where a reset button is
"required" is if a user clicks an item in a listbox. Perhaps they changed
their mind and dont want to select something from that listbox. Their only
alternative without a rest button is to exit the page, and come back. It
more "convenient" to click the reset button.

What's a listbox?

If you mean <select multiple ...> then it's possible to unselect
things that are selected in those quite easily.

If you mean a set of radio buttons, it's always worth having a 'no
selection' (worded appropriately) one that starts checked. Not least
because some browsers may select the first radio button even if none
are marked as checked.

Likewise if you mean <select> without multiple, except that it's far
more common for browsers to select the first <option> by default there
and so a 'no selection' becomes even more important.

If you mean any other sort of form input it's easy for a user to
unselect.

And what if there's four listboxes (whatever they are) on the page and
they only want to clear one of them? The reset button won't do that.

 

[Jukka K. Korpela]

What's a listbox?

Normally "listbox" means (in HTML context) a <select> menu with a size
attribute greater than 1.

Including a reset button to allow reset of a listbox is misguided.
The first reason to this is that a reset button, by definition, resets
all fields to their initial state. All. Not just a list box. Now if the
user did not know this but tried to use the "convenient" reset button
which is there right on the side of the listbox, guess what happens?

If you mean <select multiple ...> then it's possible to unselect
things that are selected in those quite easily.

Well, <select multiple ...> is never quite easy to an ordinary user.
But that's a different issue, and the method of unselection depends on
the browser - and on the user's knowledge about it.

Likewise if you mean <select> without multiple, except that it's far
more common for browsers to select the first <option> by default
there and so a 'no selection' becomes even more important.

I think that's the situation that "PW" meant: (s)he has a <select> menu
with no "dummy" selection.

In that case, this analysis reveals another problem in the form design.
Contrary to what "PW" seems to be thinking (we need to conjecture, since
no URL was specified for illustration), resetting a form with a reset
button does _not_ guarantee that the form will behave as if no choice had
been made from a listbox.

This is a long story, explained in some detail at
http://www.cs.tut.fi/~jkorpela/forms/choices.html
but I will just summarize thusly: Any <select> element without the
"multiple" attribute must have a "dummy" option preselected (with the
"selected" attribute) in order to guarantee any consistent operation
across browsers and across users. And when this necessary precaution has
been taken, usually by including such an option as the first one, the
choice of an option can be undone by selecting the dummy option - without
wiping out the text you had written and without using any extra element.

 

[Jan Clemens Faerber]

Then you think wrong. Even simply _thinking_ about the matter should
reveal this in less than a minute: what possible use could it have? when
did _you_ last use anything like that? Then think about the damage caused
by accidentally clicking on a reset button.

Then think about the damage caused by accidentally clicking on a submit
button! I give you an example:

In Ireland many people have been very poor so you have this way of thinking:

A: "Do you want another cup of tea?"
B: "No, thank you!"
A: "Are you sure?"
B: "Yes, thanks a lot! I am fine."

So, this convention of conversation came up because some people don´t have
so much tea. So it is a good manner for 'B' to first
answer "No" and on the other hand side if 'A' still
has some tea left to ask a second time. Then 'B' can _finally_ decide of
having another cup of tea or not. It is not a good manner to say
alway "Yes, yes, yes, please!".
It is also very useful to include such steps in forms where you
order e.g. very expensive software. So money is not the problem.
It can also be something without any costs to get by a form.

Of course, such things can be studied as well. Do you base your opinion
on some factual studies on user behavior _or_ what users say they like
(which are two different things, though probably not here)?

The problem is if they are able to hit the right button
and what happens after hitting any button. You can implement
alert messages before the action defined by hitting a button is finally
proceeded.

Authors don't put reset buttons on their pages because they would have
given a thought to their users. They use them because they copy something
that they regard as cool on other people's pages, and perhaps even try to
make it look cooler by making it look Different.

There are many things that are not put on pages that would be very good.
That is true. But a reset button is very useful if you fill in a form
and in the end you notice that you typed in the number of your expired
credit card and you want to correct it.

But check what Nielsen, the useability guru, writes about reset buttons,
if you still think they are "convenient".

http://www.useit.com/papers/heuristic/heuristic_list.html
<quot>
User control and freedom
Users often choose system functions by mistake and will need a clearly
marked "emergency exit" to leave the unwanted state without having to go
through an extended dialogue. Support undo and redo.
</quot>
Nielsen says a lot of things based on this paragraph what seems to me
the very opposite! I can agree that this thing is bad:
"Often, there is no way for the user to select a "nothing" option, once he
or she has selected one of the choices."
I very often miss an option that is not listed!!! You can choose a lie
or you forget about the form. That is not good.

"it's Back button time." - a great expression! hahahahaha!

It is a very good topic anyway and I would like to continue on this level.

 

[Jan Clemens Faerber]

What's a listbox?

If you mean <select multiple ...> then it's possible to unselect
things that are selected in those quite easily.

That´s nonsense.
If the structure is like this:
<option>fish</option>
<opiton>fruit</option>
<option>apple</option>
<option>banana</option>

.... and you select 'fish', 'fruit' and 'banana' and you unselect 'apple'
then 'fruit' has implied 'apple'. Than it is a bad structure of options.

If you mean a set of radio buttons, it's always worth having a 'no
selection' (worded appropriately) one that starts checked. Not least
because some browsers may select the first radio button even if none
are marked as checked.

It is a problem of the browser not of a reset button.

Likewise if you mean <select> without multiple, except that it's far
more common for browsers to select the first <option> by default there
and so a 'no selection' becomes even more important.

The same here: Two people sit infront of a pc, one started to fill
in a form, then the other one wants to continue e.g. to submit an order.
He simply clicks on 'reset' and starts again.

If you mean any other sort of form input it's easy for a user to
unselect.

He can do that anyway.
Are you looking for an 'fill-in-form'-expert?
A genius who masters the use of a 'reset'-button in advance?

And what if there's four listboxes (whatever they are) on the page and
they only want to clear one of them? The reset button won't do that.

Use javascript - if you can.
You can even combine the reset button with a check box
to avoid deleting data by mistake.

 

[Jukka K. Korpela]

Then think about the damage caused by accidentally clicking on a
submit button!

You digress a bit, don't you? The strategy of designing form
functionality so that it has well-defined steps and checks is rather
different from the reset button monstrosity.

It is also very useful to include such steps in forms where you
order e.g. very expensive software.

Useful to whom? Well, maybe inside the EU, where the customer who
buys from a network shop has an unconditional 14 days time to return the
product, no explanations asked, and get his money back, with postage to
be paid by the seller. In that case, it is useful for the seller to
reduce the number of people who would buy the product by mistake and
return it.

End of digression.

There are many things that are not put on pages that would be very
good. That is true. But a reset button is very useful if you fill in
a form and in the end you notice that you typed in the number of your
expired credit card and you want to correct it.

Your irony is _cold_ as fluid air!

Oh wait, did someone say it was _not_ irony? Would someone really prefer,
in the situation described, to wipe out all the data that had been
entered, then retype it (and this time write your card number wrong, for
example), instead of, say, hitting Home and using the tab key to get to
the field with the incorrect data (or click on that field to get there),
then change that data?

http://www.useit.com/papers/heuristic/heuristic_list.html

Actually, what Nielsen writes about reset buttons is summarized (by him)
as follows:
The Web would be a happier place if virtually all Reset buttons were
removed. This button almost never helps users, but often hurts them.
http://www.useit.com/alertbox/20000416.html

<quot>
User control and freedom
Users often choose system functions by mistake and will need a
clearly marked "emergency exit" to leave the unwanted state without
having to go through an extended dialogue. Support undo and redo.
</quot>

When filling out a form, you can correct errors by replacing wrong data
by correct data. Have _you_ actually ever found yourself in a position
where _all_ of the data you entered is wrong? Or even so that there is
wrong data more than correct data? Maybe it happens sometimes - and you
realize it's a _wrong form_.

 

[Jan Clemens Faerber]

Make it a reset button:
<input type=reset value="Reset the form!" [...]>

If I make it a reset button, then it displays as a button, and not
with my image on it.

Well, how about that. Perhaps CSS could "help," though I bet its use
would most likely only hurt the situation.

Yes - it is not so easy:

html transitional is deprecated:
<input> attribute: align - top | middle | bottom | left | center | right

On the other hand side <img > sould be allowed in strict as a child element
of <button> but that won´t work in any browser:

<button name="resetButton" type="button">
<p><img onClick="document.myform.reset()"
src="images/clear.gif"></p></button>

 

[Jukka K. Korpela]

That´s nonsense.
If the structure is like this:
<option>fish</option>
<opiton>fruit</option>
<option>apple</option>
<option>banana</option>

... and you select 'fish', 'fruit' and 'banana' and you unselect
'apple' then 'fruit' has implied 'apple'. Than it is a bad structure
of options.

It might be nonsense, but it was you who suggested such a structure.

The same here: Two people sit infront of a pc, one started to fill
in a form, then the other one wants to continue e.g. to submit an
order. He simply clicks on 'reset' and starts again.

While this comes close to a scenario where a reset button might
exceptionally be useful (as I describe on my page), it does not come
close enough.

It would be a serious security threat for more reasons that I am willing
to explain now. Just think about the possibility of seeing a browser
autofill the other person's personal data.

(Besides, for such scenarios the reset button should of course be _first_
item in a form. The fact that you never see it placed that way is that
authors who include a reset button never consider the actual _use_ of
reset buttons.)

 

[PW]

Guys, I should tell you that this particular website is for internal use in
a corporation, not for the world wide web. There is a standard environment
and only one flavour of browser. The audience is a technically skilled
audience, and therefore I dont need to make things totally idiot-proof.

On with the show ...

I think that's the situation that "PW" meant: (s)he has a <select> menu
with no "dummy" selection.

Oh my God!, you guys are soooooo pedantic! YES, a listbox is a <select>
menu. Its called a listbox in other languages such as Centura which I have
worked with over the years. And yes, the listbox on the particular page in
question is multiple select.


Really ? How ?

Any <select> element without the
"multiple" attribute must have a "dummy" option preselected (with the
"selected" attribute) in order to guarantee any consistent operation
across browsers and across users. And when this necessary precaution has
been taken, usually by including such an option as the first one, the
choice of an option can be undone by selecting the dummy option - without
wiping out the text you had written and without using any extra element.

Yeah, thats a good idea. Thanks, I'll incorporate it.


But you havent mentioned anything about the basic purpose of the reset.
That is, to clear the entire form. What if the user fills in the form with
details he has absent-mindedly already entered before ? Now he has to
manually highlight and delete all the information on the form. Would be
much easier to just click the ole reset button wouldn't it ???

 

[Jan Clemens Faerber]

It might be nonsense, but it was you who suggested such a structure.

While this comes close to a scenario where a reset button might
exceptionally be useful (as I describe on my page), it does not come
close enough.

You can keep it to the user how close it is to click a 'reset' button or
not.

It would be a serious security threat for more reasons that I am willing
to explain now. Just think about the possibility of seeing a browser
autofill the other person's personal data.

"Data has to be protected."

(Besides, for such scenarios the reset button should of course be _first_
item in a form. The fact that you never see it placed that way is that
authors who include a reset button never consider the actual _use_ of
reset buttons.)

I don´t want to decrease the importance of "functioning economical forms".