Simple navigation button [Archive]

Click to See Complete Forum and Search --> : Simple navigation button

crippz

01-17-2005, 04:37 AM

Hi

I'm trying to do a simple navigation button like the one they use on Google. I just need the button to navigate the user to another html page?

Here is my html code but i don't know why it isn't working:

<a href="Membership_form.html">
<input type="button" value="Membership Form">
</a>

many thanks

mark

Pittimann

01-17-2005, 04:51 AM

Hi!

You could use the button's onclick event handler for redirecting but that would only function, if the user has javascript available. To avoid this, put your button into a form:

<form action="Membership_form.html">
<input type="submit" value="Membership Form">
</form>

Cheers - Pit

crippz

01-17-2005, 05:05 AM

hi

i just want the button to take the user to my membership form page?
sorry i didn't mention its not for a form or to submit anything.

many thanks
mark

Pittimann

01-17-2005, 05:18 AM

Originally posted by crippz
hi

i just want the button to take the user to my membership form page?
sorry i didn't mention its not for a form or to submit anything.

many thanks
mark That button in a form tag will not submit any data (because there aren't any, except that a '?' will be added to the url) but it will do, what you want: when it is clicked, the current window's location will become the one specified in the action= part of the form tag.

Cheers - Pit

crippz

01-17-2005, 05:29 AM

hi

sorry thats not what i'm after.
i got the html code from another website.

on my homepage i just want to create a simple button which will take the user to my form page?

many thanks for your help pitt.
mark

Pittimann

01-17-2005, 05:43 AM

Originally posted by crippz
sorry thats not what i'm after.:confused:

But that's what you said! You tried using an anchor tag around the button and - obviously - that does not do the job. If you use a form tag instead, it does what you want: take the user to the page specified in the form's action. What is wrong with that???

If you want to see that it works, click here: http://www.pit-r.de/scripts/buttonToRedirect.htm and then click the button...

Cheers - Pit

crippz

01-17-2005, 06:03 AM

thanks i'll try that

mark

Pittimann

01-17-2005, 06:10 AM

You're welcome. :p

Using a form for that makes the button accessible for users without javascript as well. Any other way using a button for redirect would depend on the availability of js.

That's why I suggested the form. If you do not want that at all, just draw your own button (as an image) and put the image in your anchor tag. That would also do the job.

Cheers - Pit

crippz

01-17-2005, 06:45 AM

I am using frames & i wish to make the button open the webpage in MainFrame.

This is my frame set up html:

<html>
<head>
<title>TAEKWONDO WEBSITE</title>
</head>
<frameset rows="18%,82%" frameborder="0">
<frame name="titleboarder" src="titleboarderSection.html" noresize="noresize" scrolling="no"/>
<frameset cols="25%,75%" frameborder="0">
<frame name="fpgColumn" src="fpgColumn.html" noresize="noresize" scrolling="auto"/>
<frame name="mainsection" src="FirstPgMainSection.html" noresize="noresize" scrolling="no"/>
</frameset>
</html>

using the html code from your last post for button pitt,
<form action="Membership_form.html" name="mainsection.html">
<input type="submit" value="Membership Form">
</form>

i'm now trying to make it open in my mainsection frame but at the moment it appears in fpgcolumn. i don't know how to do this?

hope this makes sense.

mark

Pittimann

01-17-2005, 07:14 AM

Hi!

Depending on the DOCTYPE (which is absent in your code), it is valid to use the target attribute:

<form action="Membership_form.html" target="mainsection">

Cheers - Pit

crippz

01-17-2005, 08:44 AM

cheers it all works fine.
many thanks
mark

Pittimann

01-17-2005, 08:48 AM

You're welcome.

Cheers - Pit

NogDog

01-17-2005, 08:53 AM

Of possible interest, you can make a link look like a button via CSS styling:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
a.button:link, a.button:visited, a.button:hover, a.button:active {
margin: 0;
padding: 0.1em 0.5em;
background-color: #cccccc;
color: black;
border: outset thin;
text-decoration: none;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>

<h1>Lorem Ipsum</h1>
<p><a class=button href="somepage.html">Test Link</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <a href="anotherpage.html">normal link</a>
exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum</p>

</body>
</html>