By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,918 Members | 1,923 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,918 IT Pros & Developers. It's quick & easy.

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

P: n/a

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
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Hodad <zi*@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-fa...sResults.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

Jul 20 '05 #2

P: n/a
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.

Jul 20 '05 #3

P: n/a
Owen Jacobson <an******@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

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.