Re: Make submit look like a text link

#1

Lars Eighner wrote:

Quote:

This is crossposted because if what I want to can be done, I don't know
whether it would be done with INPUT or BUTTON.

Yes.

Quote:

What I want to do is to make a submit form control look like a text link.

Of course with something simple, you can phony-up a GET string on
an actual text link. But I need to use POST, and I don't want a button.

But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*.
Time for an analogy...

Imagine how frustrating it would be for visitors to your home where the
round door knob on the front door was only ornamental and did nothing,
and twisting the doorbell was what was required to open the door!

So as the wise and often ornery Yucca would say, "Stop wanting it"

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#2

Jonathan N. Little wrote:

Quote:

Lars Eighner wrote:
This is crossposted because if what I want to can be done, I don't know
whether it would be done with INPUT or BUTTON.

Yes.

What I want to do is to make a submit form control look like a text link.

Of course with something simple, you can phony-up a GET string on an
actual text link. But I need to use POST, and I don't want a button.

But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*.
Time for an analogy...

No doubt Jonathan is right on this.

However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

Use an <input type="image"> and make that look like a link.

<a href="javascript: document.forms['name_of_form'].submit()">submit if
js enabled</a>

The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

Jeff

Quote:

Imagine how frustrating it would be for visitors to your home where the
round door knob on the front door was only ornamental and did nothing,
and twisting the doorbell was what was required to open the door!

So as the wise and often ornery Yucca would say, "Stop wanting it"

#3

On Jan 4, 3:49*pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:

Quote:

Jonathan N. Little wrote:
Lars Eighner wrote:
This is crossposted because if what I want to can be done, I don't know
whether it would be done with INPUT or BUTTON.

Yes.

What I want to do is to make a submit form control look like a text link.

Of course with something simple, you can phony-up a GET string on an
actual text link. *But I need to use POST, and I don't want a button..

But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*.
Time for an analogy...

* *No doubt Jonathan is right on this.

* *However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

* Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submit if
js enabled</a

* *The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip

That is probably one of the worst suggestions I have read all day. For
one thing, what happens if JS is disabled *nothing*.
The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php
--
Regards Chad. http://freewebdesignonline.org

#4

Chaddy2222 wrote:

Quote:

On Jan 4, 3:49 pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:
Jonathan N. Little wrote:
Lars Eighner wrote:
This is crossposted because if what I want to can be done, I don't know
whether it would be done with INPUT or BUTTON.
Yes.
What I want to do is to make a submit form control look like a text link.
Of course with something simple, you can phony-up a GET string on an
actual text link. But I need to use POST, and I don't want a button.
But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*.
Time for an analogy...
No doubt Jonathan is right on this.

However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submit if
js enabled</a

The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip
That is probably one of the worst suggestions I have read all day. For
one thing, what happens if JS is disabled *nothing*.

Well nothing. I did mention that.

Quote:

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

Hmm, didn't know you could do that, apparently the border is the key,
it does not seem to work without it.

<input type="submit" style="background-color: #fff;border: solid
0px;text-decoration: underline">

Has it's limits though.

Jeff

Quote:

--
Regards Chad. http://freewebdesignonline.org

#5

On Jan 4, 4:28*pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:

Quote:

Chaddy2222 wrote:
On Jan 4, 3:49 pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:
Jonathan N. Little wrote:
Lars Eighner wrote:
This is crossposted because if what I want to can be done, I don't know
whether it would be done with INPUT or BUTTON.
Yes.
What I want to do is to make a submit form control look like a text link.
Of course with something simple, you can phony-up a GET string on an
actual text link. *But I need to use POST, and I don't want a button.
But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*..
Time for an analogy...
* *No doubt Jonathan is right on this.

* *However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

* Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submitif
js enabled</a

* *The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip
That is probably one of the worst suggestions I have read all day. For
one thing, what happens if JS is disabled *nothing*.

Well nothing. I did mention that.

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

* *Hmm, didn't know you could do that, apparently the border is the key,
it does not seem to work without it.

input type="submit" style="background-color: #fff;border: solid
0px;text-decoration: underline"

* *Has it's limits though.

* *Jeff

Not at all. This is untested. But if you set "display non on the

border and display inline on the button then you should be able to get
it looking like a text link in no time. I could knock up an example if
you want.
--
Regards Chad. http://freewebdesignonline.org

#6

On Jan 4, 4:51*pm, Chaddy2222 <spamlovermailbox-sicur... (AT) yahoo (DOT) com.au>
wrote:

Quote:

On Jan 4, 4:28*pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:

Chaddy2222 wrote:
On Jan 4, 3:49 pm, Jeff <dont_bug... (AT) all (DOT) uk> wrote:
Jonathan N. Little wrote:
Lars Eighner wrote:
This is crossposted because if what I want to can be done, I don'tknow
whether it would be done with INPUT or BUTTON.
Yes.
What I want to do is to make a submit form control look like a text link.
Of course with something simple, you can phony-up a GET string on an
actual text link. *But I need to use POST, and I don't want a button.
But why? Links want to be links and submit buttons want to be submit
buttons. Don't confuse your users, there is a reason for *convention*.
Time for an analogy...
* *No doubt Jonathan is right on this.

* *However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

* Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submit if
js enabled</a

* *The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip
That is probably one of the worst suggestions I have read all day. For
one thing, what happens if JS is disabled *nothing*.

Well nothing. I did mention that.

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

* *Hmm, didn't know you could do that, apparently the border is thekey,
it does not seem to work without it.

input type="submit" style="background-color: #fff;border: solid
0px;text-decoration: underline"

* *Has it's limits though.

* *Jeff

Not at all. This is untested. But if you set "display non on the
border and display inline on the button then you should be able to get
it looking like a text link in no time. I could knock up an example if
you want.
Too late. I have made an example of how this can be done. Do not try

this at home as it is a bit of a useability nightmare. I did this on
my own website and I would not do it on a clients site.
http://rockradio.freewebdesignonline.org/request.php
That is the HTML, or in this case the XHTML as it is an older site.
The CSS for the button is:
#button {
border-style: none;
border-color: #ffff99;
color: white;
display: inline;
text-decoration: underline;
float: right;
background-color: black;
}
..footertext a:link, a:hover, a:visited, a:active {
color: #ffff66;
}

If you really want to do this, don't as I said. Main reason being, it
does not look like a normal link. If you really want to do this, add
some extra CSS to control how the link looks. But I would not suggest
doing that.
--
Regards Chad. http://freewebdesignonline.org

#7

On 2009-01-04, Lars Eighner <usenet (AT) larseighner (DOT) com> wrote:

Quote:

In our last episode,
2f7589ad-3024-4f95-9af1-db397f63c966...oglegroups.com>, the
lovely and talented Chaddy2222 broadcast on
comp.infosystems.www.authoring.stylesheets:

Lars Eighner wrote:

This is crossposted because if what I want to can be done, I don't
know whether it would be done with INPUT or BUTTON.

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

This is exactly right. INPUT works fine. I expect BUTTON can be made to.
What I never knew or had forgotten is that you can style the button away.
Set border: 0; to flatten it, match the background color and the font, 0 the
padding and margins of the FORM element, etc. For a little extra snazz, you
can rebutton it on hover in browsers that honor hover for this element.

I don't know if anyone already said this, but you are much better to
restyle BUTTON than INPUT.

INPUT is a replaced element, and any CSS supported on it "should be
regarded as experimental" (words of the W3C).

BUTTON is not replaced-- it gets its grey colour, outset border etc.,
from the browser default stylesheet. It can be restyled just like
anything else.

#8

Chaddy2222 wrote:

Quote:

However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submit
if js enabled</a

The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip
That is probably one of the worst suggestions I have read all day.

Which suggestion? Using pseudo-markup like <snip> is no substitute for
adequately indicating what you are commenting on. If you wanted to comment
on the JavaScript-based approach, then you should have quoted that part only
or at least specified that it is what you are commenting on (instead of the
last paragraph quoted, for example).

Quote:

For
one thing, what happens if JS is disabled *nothing*.

It depends on the browser. Since javascript: URLs are nonstandard, anything
may happen.

Moreover, you could generate the <a> element dynamically with JavaScript and
use <noscript> containing whatever fallback you prefer, and then your "one
thing" would not apply. Was there some other thing?

Quote:

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

I don't see a link. You are modifying the appearance of a submit button in
different ways, but you are surely not making it look like a link, which was
the OP's request.

It takes many rounds of CSS styling to turn a submit button to something
that almost looks like a link, and even if you do everything possible, it
may still fail - the usual CSS Caveats apply to an especially high degree.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#9

Lars Eighner wrote:

Quote:

Anyway, the rationale for doing this is the form consists only of
control to go the login/logout form.

It does not sound rational. If it's supposed to only "go to" a form, then
why isn't it a link? Then you might have the opposite problem, which makes
much more sense: can I style a link so that it looks like a button, to
distinguish an "action link" from normal links?

Quote:

I want to put in a menu box,
similar to boxes for various links.

Why? And why no URL? Incidentally, a URL would be needed even for the
technical question of making a button look like links, since only the URL
would reveal what you regard as "looking like a link". (By default in most
browsers, a link is underlined and has varying colors as per its
visited/unvisited/hover state and often has a 1px dotted outline when
clicked on. But authors often have wild ideas of how this should be messed
up.)

Quote:

So far as the user is concerned,
it acts link, so I'd like it to look like the link.

So why isn't it a link?

Quote:

And now, thanks, it does.

I don't think so. You are not taking a close enough look. I could have
explained this in specific terms if you had posted a URL.

Quote:

I am in sympathy with the thought that the submit on a form
in which you have entered your mother's maiden name should look like
every other submit on the web so no one is misled into submitting
data without meaning to. But that is not what I am doing here.

You haven't told us what you are doing.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

#10

On Jan 4, 10:16*pm, "Jukka K. Korpela" <jkorp... (AT) cs (DOT) tut.fi> wrote:

Quote:

Chaddy2222 wrote:
However, I won't judge your crazy idea and give you a couple of
options, neither of which involves CSS (where I'm reading).

Use an <input type="image"> and make that look like a link.

a href="javascript: document.forms['name_of_form'].submit()">submit
if js enabled</a

The conventional wisdom is that if you don't know how to do some
trick, you don't know the reasons why not to either, and shouldn't.

snip
That is probably one of the worst suggestions I have read all day.

Which suggestion? Using pseudo-markup like <snip> is no substitute for
adequately indicating what you are commenting on. If you wanted to comment
on the JavaScript-based approach, then you should have quoted that part only
or at least specified that it is what you are commenting on (instead of the
last paragraph quoted, for example).

For
one thing, what happens if JS is disabled *nothing*.

It depends on the browser. Since javascript: URLs are nonstandard, anything
may happen.

Moreover, you could generate the <a> element dynamically with JavaScript and
use <noscript> containing whatever fallback you prefer, and then your "one
thing" would not apply. Was there some other thing?

No, although as usual you were correct with this statement.

I was going to write my reply above the snipped content, but did not
do so in the end.

Quote:

The OP's best bet is to have a normal submit button and style that
useing CSS. As I did here:
http://rockradio.freewebdesignonline.org/request.php

I don't see a link. You are modifying the appearance of a submit button in
different ways, but you are surely not making it look like a link, which was
the OP's request.

I did modify the CSS code for that page and placed them, (the style

for the button), in a follow-up post to Jeff.

Quote:

It takes many rounds of CSS styling to turn a submit button to something
that almost looks like a link, and even if you do everything possible, it
may still fail - the usual CSS Caveats apply to an especially high degree..

I do not disagree with this, which is why I suggested in that follow

up post that this particular thing (changeing the look of the submit
button to appear like an ordinary text link was not a good idea.
--
Regards Chad. http://freewebdesignonline.org