PDA

Click to See Complete Forum and Search --> : [RESOLVED] Glowing Buttons HTML and CSS

lawrenceh
09-29-2009, 02:37 PM
Hi

I am trying to code Glowing Buttons that act as Submit and Navigation buttons. A Navigation button is one that just takes the user from one page to another. This code works perfectly for Submit buttons, but I can’t figure out the HTML code for the navigation buttons.

CSS Code

<style type="text/css">

.input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
.button {
border: 1px solid #006;
background: #ccf;
width: 125px;
font-weight:bolder;

}
.button:hover {
border: 1px solid #f00;
background: #ff6;
width: 125px;
font-weight:bolder;
}

br { clear: left; }
</style>

HTML

<input type="submit" value="Submit" class="button" /> //works
<a href="index.html"><input type="submit" value="Next" class="button" /></a> //DOES NOT WORK

Many thanks in advance

Lawrence
ryanbutler
09-29-2009, 04:05 PM
What's not working? I tried the file and it works fine (at least display wise).
lawrenceh
09-29-2009, 04:23 PM
Hi. The button glows but doesn't go to page INDEX.HML. It is the problem with the "<A HREF" part of the button that does not work. Should I use "<A HREF" ?

Many thanks
javawebdog
09-29-2009, 05:01 PM
try changing the type to type="button". type="submit" is specific to forms.
nathandelane
09-29-2009, 10:56 PM
According to the HTML specification, <a> (anchor) tags cannot contain <input> tags. You could use an image if you wanted to in place of your input also.
lawrenceh
09-30-2009, 05:45 AM
Hi

thanks for the replies. I would prefer not to use an image button as I would like to have "glowing" buttons.

With the following code, the text in the button is not displayed and the target page is not shown in the buttom left hand corner of the browser.

<a href="index.html"><button type="button" value="Next" class="button" /></a>

As this is a navigation button, I cannot use the SUBMIT clause.

Any other ideas :) Thanks in advance.
Charles
09-30-2009, 05:56 AM
<form action="index.html"><div><input type="submit"></div></form>
lawrenceh
09-30-2009, 07:23 AM
Many thanks, this seems to work. I am interested when I will have a form statement at around the entire page.

Lawrence
lawrenceh
09-30-2009, 07:45 AM
Sorry, stop.......I am building a monster tread out of something that is probably quite simple.

The last question is then, when I want to use the above code with FP validation, how does the entire page hang togther. Not like this, becuase strange things happen when I press the SUBMIT button.

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>


<title>New Page 1</title>
<style type="text/css">

.input {
border: 1px solid #006;
background: #ffc;
}
.input:hover {
border: 1px solid #f00;
background: #ff6;
}
.button {
border: 1px solid #006;
background: #ccf;
width: 125px;
font-weight:bolder;

}
.button:hover {
border: 1px solid #f00;
background: #ff6;
width: 125px;
font-weight:bolder;
}
}
br { clear: left; }
</style>

</head>
<body>
<form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)">
<p>
&nbsp;</p>
<table border="1" width="100%" id="table1" height="137">
<tr>
<td height="42" width="158">
<label>First Name: </label>
&nbsp;</td>
<td height="42">
<!--webbot bot="Validation" b-value-required="TRUE" --><input type="text" class="input" name="firstname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158">Last Name<label>: </label>
&nbsp;</td>
<td height="42">
<input type="password" class="input" name="lastnamt" size="20" /></td>
</tr>
<tr>
<td width="158" align="left" valign="top">
<form method="POST" action="Membership.asp" language="JavaScript">
<input type="submit" value="Submit" class="button" /></td>
</form>
<td align="left">
<form action="index.html">
<div>
<input type="submit" value="Cancel" class="button" /></div>
</form></td>
</tr>
</table>
</form>
</body>

</html>
javawebdog
09-30-2009, 08:13 AM
Seems to me the problem is you have forms within forms.

* red highlights: outer (main) form
* blue highlights: inner (problematic) forms


<form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)">
<p>
&nbsp;</p>
<table border="1" width="100%" id="table1" height="137">
<tr>
<td height="42" width="158">
<label>First Name: </label>
&nbsp;</td>
<td height="42">
<!--webbot bot="Validation" b-value-required="TRUE" --><input type="text" class="input" name="firstname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158">Last Name<label>: </label>
&nbsp;</td>
<td height="42">
<input type="password" class="input" name="lastnamt" size="20" /></td>
</tr>
<tr>
<td width="158" align="left" valign="top">
<form method="POST" action="Membership.asp" language="JavaScript">
<input type="submit" value="Submit" class="button" /></td>
</form>
<td align="left">
<form action="index.html">
<div>
<input type="submit" value="Cancel" class="button" /></div>
</form>
</td>
</tr>
</table>
</form>

What you need/want is two buttons:
1) one to submit the form
2) one to 'cancel/clear' the form and then redirect to index.html

There are also some missing inputs to match labels (Last Name) and its id should be lastname (not lastnamt).
You also have one unnecessary } in your style block causing the br {clear: left} to be ignored. Remove the } just above that line.

Given that I would re-write as follows:


<form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)">
<p>
&nbsp;</p>
<table border="1" width="100%" id="table1" height="137">
<tr>
<td height="42" width="158">
<label>First Name: </label>
&nbsp;</td>
<td height="42">
<!--webbot bot="Validation" b-value-required="TRUE" --><input type="text" class="input" name="firstname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158"><label>Last Name: </label>
&nbsp;</td>
<td height="42">
<input type="text" class="input" name="lastname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158"><label>Password: </label>
&nbsp;</td>
<td height="42">
<input type="password" class="input" name="password" size="20" /></td>
</tr>

<tr><td>&nbsp;</td>
<td width="158" align="left" valign="top">

<input type="submit" value="Submit" class="button" /></td>

<td align="left">
<input type="submit" value="Cancel" class="button" /></td>
</tr>
</table>
</form>
lawrenceh
09-30-2009, 08:36 AM
Hi,

The problem with the above code is that when the user has filled out all the required textboxes, the SUBMIT button doesn't take the user to membership.asp or when the Cancel button is pressed, to index.html.

The other thing is, when you press Cancel, the user is still prompted for the required textboxes.

Lawrence
javawebdog
10-01-2009, 07:11 AM
I left out the action parameter in the form header and a javascript redirect for the Cancel button. Also changed the Cancel button type to reset, a nifty button the automatically clears all fields.

Updates highlighted in red:

<form name="FrontPage_Form1" language="JavaScript" onsubmit="return FrontPage_Form1_Validator(this)" action="membership.asp">
<p>
&nbsp;</p>
<table border="1" width="100%" id="table1" height="137">
<tr>
<td height="42" width="158">
<label>First Name: </label>
&nbsp;</td>
<td height="42">
<!--webbot bot="Validation" b-value-required="TRUE" --><input type="text" class="input" name="firstname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158"><label>Last Name: </label>
&nbsp;</td>
<td height="42">
<input type="text" class="input" name="lastname" size="20" /></td>
</tr>
<tr>
<td height="42" width="158"><label>Password: </label>
&nbsp;</td>
<td height="42">
<input type="password" class="input" name="password" size="20" /></td>
</tr>

<tr><td>&nbsp;</td>
<td width="158" align="left" valign="top">

<input type="submit" value="Submit" class="button" /></td>

<td align="left">
<input type="reset" value="Cancel" class="button" onclick="location.href='index.html'" /></td>
</tr>
</table>
</form>
lawrenceh
10-01-2009, 07:48 AM
Many thanks, I don't normally get someone to code an entire page, but the work works a treat. I was really going round in circles.

Hopefully I can now start the site with perhaps duller but still glowing buttons.

Lawrence
javawebdog
10-02-2009, 08:28 AM
You're welcome. Was a not so much coding the page as locating and correctly some basic issue regarding how html forms work, what are the restrictions/limitations, and applying some standard techniques.

From a learning perspective I would recommend you go to: http://www.w3schools.com/html/html_forms.asp#, where you can learn a bit more about forms and http://www.w3schools.com/JS/default.asp, to learn a bit more about javascript.

They are both sponsored by w3schools, have a lot of good information, good examples, nice 'try it' pages, and a quiz or two for self evaluation.

Good luck.

One last thing, if your issue is completed to your satisfaction, please go to 'Thread Tools' (top of this page) and mark it 'Resolved' for the benefit of others.
lawrenceh
10-03-2009, 03:25 PM
Thanks for the tips. I have used w3schools a bit and found that their new website is very good.