Restyle Anchor

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

shapper - 25 Jun 2008 00:01 GMT

Hello,

On a bottom of a form I have 2 buttons: Submit and Cancel.

Submit is an input and submits the form.
Cancel should just redirect the user to a new page without
submitting the form.

I need the Cancel button to look the same as the Submit button.
If I use an input of type button as Cancel button I am able to do that
but then I need to rely on "onclick" to redirect the user ... I think
would be better to use an anchor.

However, I am having a problem in styling the anchor to make it look
the same as the Submit input.

Could someone tell me how to style the anchor and if using an anchor
is better then using the button?

My code:
http://www.27lamps.com/Labs/Buttons/Buttons.html

Thanks,
Miguel

Reply to this Message

Jonathan N. Little - 25 Jun 2008 00:50 GMT

> Hello,
>
[quoted text clipped - 8 lines]
> but then I need to rely on "onclick" to redirect the user ... I think
> would be better to use an anchor.

Or you can have the "cancel" button in another form that submits
"nothing" to that other page

<form action="scriptThatDoesDomething.php">
...
<input type="submit" value="Submit Form">
</form>

<form action="theOtherPage.php">
<input type="submit" value="Cancel">
</form>

Signature

Take care,

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

Reply to this Message

shapper - 25 Jun 2008 01:52 GMT

> > Hello,
>
[quoted text clipped - 27 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Is this usually done? Having a form just redirecting to a page?
However, I have a problem: I need to place both buttons side by side
and in that case I think it will not be possible.

Finally, could I place a input of type button inside an anchor? What
do you think?

Thanks,
Miguel

Reply to this Message

Jonathan N. Little - 25 Jun 2008 14:14 GMT

>>> Hello,
>>> On a bottom of a form I have 2 buttons: Submit and Cancel.
[quoted text clipped - 16 lines]
>> <input type="submit" value="Cancel">
>> </form>

> Is this usually done? Having a form just redirecting to a page?
> However, I have a problem: I need to place both buttons side by side
> and in that case I think it will not be possible.

Sure you can, careful markup style as you need to...

> Finally, could I place a input of type button inside an anchor?

What good would that do?

Signature

Take care,

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

Reply to this Message

Jonathan N. Little - 25 Jun 2008 14:42 GMT

> Is this usually done? Having a form just redirecting to a page?

Why not, works with no JavaScript. If there are no form inputs there is
not data and the form action works like a link. The action can be a
static HTML document

> However, I have a problem: I need to place both buttons side by side
> and in that case I think it will not be possible.

I'll take pity on you and show you one example... One extra DIV and two
CSS rules.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>One Way</title>

<style type="text/css">
div.wrapper { position: relative; min-width: 15em; }
div.wrapper form.nogo { position: absolute; right: 0; bottom: 0;}
</style>
</head>
<body>

<div class="wrapper">
<form action="someScript.php">
<fieldset>
<label for="foo">FOO: </label>
<input type="text" name="foo" id="foo" size="30">
</fieldset>
<fieldset>
<label for="bar">BAR: </label>
<input type="text" name="bar" id="bar" size="30">
</fieldset>
<fieldset>
<label for="bar">BAZ: </label>
<input type="text" name="baz" id="baz" size="30">
</fieldset>
<div>
<input type="submit">
</div>
</form>

<form action="someOtherPage" class="nogo">
<div>
<input type="submit" value="Cancel...">
</div>
</form>
</div>
</body>
</html>

Signature

Take care,

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

Reply to this Message

Jonathan N. Little - 25 Jun 2008 15:15 GMT

Oops, always double check in IE! IE has a default bottom margin on
forms, so add a third rule to line up buttons

> <style type="text/css">
> div.wrapper { position: relative; min-width: 15em; }
> div.wrapper form.nogo { position: absolute; right: 0; bottom: 0;}

div.wrapper form { margin: 0; }

Signature

Take care,

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

Reply to this Message

shapper - 25 Jun 2008 22:21 GMT

> Oops, always double check in IE! IE has a default bottom margin on
> forms, so add a third rule to line up buttons
[quoted text clipped - 11 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Hmmm, thank you for the help, but it does not work.
I need the two buttons to be side by side ... even if I set a right
margin to cancel button they will overlap on text resizing.

I will keep trying ...

Thanks,
Miguel

Reply to this Message

Jonathan N. Little - 26 Jun 2008 00:45 GMT

>> Oops, always double check in IE! IE has a default bottom margin on
>> forms, so add a third rule to line up buttons
[quoted text clipped - 3 lines]
>>> div.wrapper form.nogo { position: absolute; right: 0; bottom: 0;}
>> div.wrapper form { margin: 0; }

> Hmmm, thank you for the help, but it does not work.
> I need the two buttons to be side by side ... even if I set a right
> margin to cancel button they will overlap on text resizing.
>
> I will keep trying ...

How narrow is your form??? Or how wide is your buttons???

The buttons here are side by side.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>One Way</title>

<style type="text/css">
div.wrapper { position: relative; min-width: 15em; }
form.nogo { position: absolute; right: 0; bottom: 0; }
div.wrapper form { margin: 0; }
</style>
</head>
<body>

<div class="wrapper">

<form action="someScript.php">
<fieldset>
<label for="foo">FOO: </label>
<input type="text" name="foo" id="foo" size="30">
</fieldset>
<fieldset>
<label for="bar">BAR: </label>
<input type="text" name="bar" id="bar" size="30">
</fieldset>
<fieldset>
<label for="bar">BAZ: </label>
<input type="text" name="baz" id="baz" size="30">
</fieldset>
<div>
<input type="submit">
</div>
</form>

<form action="someOtherPage" class="nogo">
<div>
<input type="submit" value="Cancel...">
</div>
</form>

</div>
</body>
</html>

But then again, if your button were arranged vertically would that be a
crisis?

Signature

Take care,

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

Reply to this Message

shapper - 26 Jun 2008 07:44 GMT

> >> Oops, always double check in IE! IE has a default bottom margin on
> >> forms, so add a third rule to line up buttons
[quoted text clipped - 72 lines]
> -------------------
> LITTLE WORKS STUDIOhttp://www.LittleWorksStudio.com

Hi,

they are side by side but one aligned right and the other left ...
I used margin on the input but in pixels. I think it will be hard to
be sure that they do not overlap if the button text is defined in em.
At the same time, this web site has localization and the inputs width
might differ according to the language.

I would prefer having them on the top of each other.
Anyway, maybe I will use a button with type="button" even if I need to
get dependent on javascript to redirect to a new url.

This is what I tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>One Way</title>
<style type="text/css">
div.wrapper { position: relative; min-width: 15em; width: 800px;}
form.nogo { position: absolute; right: 0; bottom: 0; }
form.nogo input { margin-left: -690px; }
div.wrapper form { margin: 0; }
</style>
</head>
<body>

<div class="wrapper">
<form action="someScript.php">
<fieldset>
<label for="foo">FOO: </label>
<input type="text" name="foo" id="foo" size="30">
</fieldset>
<fieldset>
<label for="bar">BAR: </label>
<input type="text" name="bar" id="bar" size="30">
</fieldset>
<fieldset>
<label for="bar">BAZ: </label>
<input type="text" name="baz" id="baz" size="30">
</fieldset>
<div>
<input type="submit">
</div>
</form>
<form action="someOtherPage" class="nogo">
<div>
<input type="submit" value="Cancel...">
</div>
</form>
</div>
</body>
</html>

Thanks,
Miguel

Reply to this Message

Jonathan N. Little - 26 Jun 2008 14:08 GMT

>>>> Oops, always double check in IE! IE has a default bottom margin on
>>>> forms, so add a third rule to line up buttons
[quoted text clipped - 61 lines]
>> But then again, if your button were arranged vertically would that be a
>> crisis?

> they are side by side but one aligned right and the other left ...
> I used margin on the input but in pixels. I think it will be hard to
> be sure that they do not overlap if the button text is defined in em.
> At the same time, this web site has localization and the inputs width
> might differ according to the language.

Well there is where you problem is. Pixels lock the design so if
anything changes, including the font, you have a problem. Also if you
compare my layout above with yours below, mine uses a wrapper div that
is relative position so it will define the dimensions of first form.
Then the canceling form it positioned absolutely from the *lower right
hand* corner of that rectangle. It does not matter what the font size or
even if you add or remove controls, cancel will always be in the lower
right hand corner of the first form.

Now with yours you are locating the canceling form with a absolute
*offset* in PIXELS! Change anything and now your cancel button is in the
wrong place. Is that that important that the cancel but be just to the
right of the submit? Having the submit align with the left of the form
and cancel to the right looks good and symmetrical.

If you really MUST have cancel the just of submit then position the
canceling form offset from the *lower left hand corner* of the first
form. But you must know with width of the width of the submit button
first hand and in ems not pxs for this to work.

This submit button is about 6.25em so if I add 1em for the gap I get
7.25em which I will use for the 'left' property. But by doing it this
way if you change the submit button's text you have to recalculate your
offset! I think lining it up with the right of the form is more
flexible, looks good, and being lazy much easier to maintain.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;
charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>One Way</title>
<style type="text/css">
div.wrapper { position: relative; min-width: 15em; width: 800px;}

/* left offset 6.25em for submit + 1em for gap */
form.nogo { position: absolute; bottom: 0; left: 7.25em; }
div.wrapper form { margin: 0; }
</style>
</head>
<body>

<div class="wrapper">
<form action="someScript.php">
<fieldset>
<label for="foo">FOO: </label>
<input type="text" name="foo" id="foo" size="30">
</fieldset>
<fieldset>
<label for="bar">BAR: </label>
<input type="text" name="bar" id="bar" size="30">
</fieldset>
<fieldset>
<label for="bar">BAZ: </label>
<input type="text" name="baz" id="baz" size="30">
</fieldset>
<div>
<input type="submit">
</div>
</form>
<form action="someOtherPage" class="nogo">
<div>
<input type="submit" value="Cancel...">
</div>
</form>
</div>
</body>
</html>

> I would prefer having them on the top of each other.

On top of each other? You mean on above the other, not overlaid right?

[SUMMIT]
[CANCEL]

Sure don't do any positioning of the canceling for and you will get that
layout.

> Anyway, maybe I will use a button with type="button" even if I need to
> get dependent on javascript to redirect to a new url.

But that is a problem. About 10% of users have JavaScript disable and
that would make your form JavaScript *dependent*. If JavaScript is
disable then when the users tries to cancel the form is going to falsely
submit! Don't do it!

Signature

Take care,

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

Reply to this Message

Jukka K. Korpela - 26 Jun 2008 20:29 GMT

Scripsit shapper:

> On a bottom of a form I have 2 buttons: Submit and Cancel.

Wrong design. The "Cancel" button is really a "destroy whatever the user
has done" button.

> Submit is an input and submits the form.
> Cancel should just redirect the user to a new page without
> submitting the form.

Pointless. No need to style it. Redesign it.

Signature

Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / June 2008

Restyle Anchor