f



How to make "this" form look like "that" button?

I would like to adapt, as much as possible, the appearance and color red
of the 
font in this button:

<P><CENTER><BUTTON VALUE="SUBMIT"><A
HREF="http://www.familytreedna.com/surname_join.asp?code=Q17978"
STYLE="TEXT-DECORATION: NONE;">
<FONT COLOR="RED" FACE="COPPERPLATE GOTHIC BOLD">Right
Here</FONT></A></BUTTON></CENTER></P>

to this form:

<form
action="http://www.familytreedna.com/surname_join.asp?code=Q17978"><div
align="center"><center>
<p><input type="submit" value="Right Here"></p></center></div></form>

What would I add to the second to accomplish this? I know that the above
are no doubt slap-dash looking,
but I know little about html, etc.

Thanks very much.

Dale Bricker
0
Hodad
12/24/2003 11:02:12 PM
comp.authoring.html 7078 articles. 0 followers. Post Follow

3 Replies
260 Views

Similar Articles

[PageSpeed] 31

Hodad <zit@nospam.com> wrote:

> I would like to adapt, as much as possible, the appearance and
> color red of the 
> font in this button:
> 
> <P><CENTER><BUTTON VALUE="SUBMIT"><A
> HREF="http://www.familytreedna.com/surname_join.asp?code=Q17978"
> STYLE="TEXT-DECORATION: NONE;">
> <FONT COLOR="RED" FACE="COPPERPLATE GOTHIC BOLD">Right
> Here</FONT></A></BUTTON></CENTER></P>
> 
> to this form:
> 
> <form
> action="http://www.familytreedna.com/surname_join.asp?code=Q17978"><
> div align="center"><center>
> <p><input type="submit" value="Right
> Here"></p></center></div></form> 

It seems that you are trying to convert the use of a <button> element 
to the use of <input type="submit">, which is a good idea, since the 
latter is better supported by browsers.

When using <input>, you don't set visual properties in HTML but use 
CSS. At the same time, you might move all the presentational issues 
into CSS. I have also fixed the form to use the post method (since the 
effect of submitting a form is apparently the act of joining something, 
not just information retrieval) and to contain a meaningful text in the 
button:

<form method="post"
action="http://www.familytreedna.com/surname_join.asp?code=Q17978">
<div><input type="submit" value="Join the project"></div></form>

And you could style it by putting the following into the <head> part of 
your document (assuming that this is the only <input> field - if there 
are several of them, a little more is needed):

<style type="text/css">
form div { text-align: center; }
input    { color: red;
           background: #ccc;
           font-family: "Copperplate Gothic Bold"; }
</style>

The color #ccc is close to the default gray color of buttons in several 
browsers. Personally I would use something lighter.

Beware that Copperplate Gothic Bold is not very widely available.
The page
http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml
estimates that 44 % of Windows systems have it, and on other systems 
the coverage is even smaller. Maybe selecting a list of some more 
common fonts for font-family and setting font-variant: small-caps
would give roughly the appearance you're looking for.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

0
Jukka
12/25/2003 2:39:36 PM
On Thu, 25 Dec 2003 14:39:36 +0000, Jukka K. Korpela wrote:

> <form method="post"
> action="http://www.familytreedna.com/surname_join.asp?code=Q17978">
                                                       ^^^^^^^^^^^^
> <div><input type="submit" value="Join the project"></div></form>

Shirley you meant to put that in a hidden input?  If not, why not?

-- 
Some say the Wired doesn't have political borders like the real world,
but there are far too many nonsense-spouting anarchists or idiots who
think that pranks are a revolution. 

0
Owen
1/5/2004 12:41:54 PM
Owen Jacobson <angstrom@lionsanctuary.net> wrote:

> On Thu, 25 Dec 2003 14:39:36 +0000, Jukka K. Korpela wrote:
> 
>> <form method="post"
>> action="http://www.familytreedna.com/surname_join.asp?code=Q17978">
>> ^^^^^^^^^^^^ <div><input type="submit" value="Join the
>> project"></div></form> 
> 
> Shirley you meant to put that in a hidden input?  If not, why not?

I did, but a cow flew by. Or maybe it was a delayed reindeer.

Naturally I meant

<form method="post"
action="http://www.familytreedna.com/surname_join.asp">
<div><input type="hidden" name="code" value="Q17978">
<input type="submit" value="Join the project"></div></form>

But on the other hand, although a query part is not correct in an 
action attribute when method="get" (the default) is used, wouldn't it 
be acceptable to have it when method="post". After all, the reason for 
not using it is that when method="get", then, by HTML specifications, a 
question mark "?" will be appended to the URL (to be followed by form 
data fields, if any), making it violate URL specifications since "?" is 
a reserved character in the query part. For method="post", that 
shouldn't happen.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

0
Jukka
1/5/2004 2:03:28 PM
Reply: