|
| |
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
 |
submit buttons that glow - 9/18/2009 13:00:50
Hi
I have been using glowing buttons in FP2003 for a website development. The problem now is, I need a SUBMIT button. Is it possible to have nice looking SUBMIT buttons? The applet code in FP2003 is
<applet code="fphover.class" codebase="./" width="120" height="20">
<param name="color" value="#000080">
<param name="hovercolor" value="#0000FF">
<param name="textcolor" value="#FFFFFF">
<param name="effect" value="fill">
<param name="text" value="Cancel">
<param name="url" valuetype="ref" value="EventLogger/index.asp">
</applet>
Regards
Lawrence
|
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/20/2009 17:37:01
Thanks for your replies. I will now look at the CSS option.
Many thanks
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/21/2009 15:55:06
Hi
I have now looked at various web sites regarding CSS buttons. This code is a mixture of various sites and works okay with Firefox, but not with IE8. The pages on the websites themselves also work okay with both Firefox ad IE8. I cannot see what is wrong.
Many thanks in advance.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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;
}
.button:hover {
border: 1px solid #f00;
background: #eef;
}
}
br { clear: left; }
</style>
</head>
<body>
<form action="">
<label>Name: </label> <input type="text" class="input" />
<p><label>Password: </label> <input type="password" class="input" /></p>
<p> <input type="submit" value="Submit" class="button" />
</p>
</form> </body></html>
| |
|
|
|
swoosh
Posts: 1535
Joined: 5/18/2002
From: Beaver Falls, PA
Status: offline
|
RE: submit buttons that glow - 9/21/2009 16:48:16
This certainly isn't a solution to the problem. But, it is a temporary fix until one can be found. That's if IE7 is rendering your CSS properly.
There is a meta tag which can be used to force IE8 to "display" a site in IE7 mode:
Turn the mode to IE7:
<meta http-equiv="X-UA-Compatible" content="IE=7">
Make sure IE8 emulate IE7:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
_____________________________
Swoooosh
Just Do It!
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/22/2009 3:33:23
Hi Swoosh, that works a treat. I am not sure I understand how something in IE v7 seems to work okay and then not in IE v8.
Many thanks
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/22/2009 15:17:45
I hope this will the last question on this subject. I made a bad assumption that I could use the code below to make both SUBMIT and NORMAL buttons. The SUBMIT now works, but not the normal button.
<html> <head>
<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;
}
.button:hover {
border: 1px solid #f00;
background: #eef;
}
br { clear: left; }
</style>
</head>
<body>
<form action="">
<input type="submit" value="Submit" class="button" /> (THIS WORKS)
<a href="xxx.asp"><input type="button" value="Not Submitr" class="button" /> (THIS NOT)
</form> </body></html>
I have tried TAB BUTTON and used CLASS BUTTON in an <A HREF> tag, but what I really would like to use are NOMAL and SUBMIT buttons which look/act the same.
Thanks in advance,
Lawrence
| |
|
|
|
womble
Posts: 6007
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: submit buttons that glow - 9/23/2009 11:23:01
I think the problem's with your HTML code rather than the CSS (the CSS, if you use a class rather than an ID will let you style any number of page elements with the same class on the same page.)
I presume the "normal" button you mention is a reset button? (i.e. to clear the data from the form and not submit it).
Your problem is that "not submit" only displays "not submit" on the actual button - it doesn't affect the action of the button at all. Check out this tutorial for information on the different types of input elements. If you check out the "button" section of the tutorial (here), you'll see there are three common specific types of buttons - 'submit', 'reset' and 'button'. The submit and reset ones are self-explanatory, but if you use the "button" type button, you have to provide the script for it to do whatever it is you want it to do (i.e. if you want the button to do something other than submit or clear the form, you'd need to either use javascript to get the button to do some action, as some of the examples in the tutorials do, or specify a script that does whatever you want the button to do in the "action" attribute of the <form> element. As I'm guessing what you're wanting is for the user to press a button not to submit and clear the form, it's the reset type you want.
W3Schools also have tutorials on all the HTML elements, including the <input> and <button> ones, and have a table showing the optional attributes and values that can be used with them - here for the <input> tag, and here for the <button> tag.
I think what you need is either:
<button type="reset" value="Not Submit" class="button" />
or
<input type="reset" value="Not submit" class="button" />
< Message edited by womble -- 9/23/2009 12:15:47 >
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/23/2009 15:07:55
Hi Womble, thanks for your reply. When I use the BUTTON tag, the text in the button disappears. The TYPE="RESET" doesn't work either. When I place the cursor over the button, I do not see the target page in the buttom left hand corner of the browser. It is the "<A HREF" part of the button that is not working.
I have also looked at the links in your reply, but can't find any further help.
Just to say, I have tried <a class="button" href=...., but then the button looks like a link.
Many thanks in advance
| |
|
|
|
womble
Posts: 6007
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: submit buttons that glow - 9/23/2009 18:12:53
You'd be best using the <input> tag IMHO. You don't need to use <a href=..." at all = that will give you is a link. The only reason you'd need a link, a "src" attribute, is if you were using an image for a button, to reference the location of the image.
I've tried out your code in a browser, and as expected I got two buttons. The 'submit' one when hovered over or pressed shows the URL of the target page on the taskbar, as expected, and as there's no "action" specified in the <form> element, it references the page it's on.
I'm in the process of developing a database application, and I've got a number of forms that add records to the database, update records, and perform other functions. For all of them for the 'submit' buttons I use:
<input type="submit" name="submitButton" value="Add" />
(obviously that's the XHTML format - for HTML you'd use <input type="submit" name="submitButton" value="Add"></input>), and all work fine. All of them are styled using CSS. A submit button will only work though if the form has an action - the "action" attribute in the <form> element that tells the browser what to do. With a reset button, there won't be a URL displayed by the browser, because all the button does is clear data already inputted in the form. Even with the submit button, there won't necessarily be the URL of the "action" page displaying in the browser - on all of my forms the URL of the 'action' page with the scripting doesn't display, but the forms still work.
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/24/2009 16:34:01
Hi Womble,
thanks for your full reply. You say "You'd be best using the <input> tag IMHO.". What is the <input> tag IMHO.". The reason for the non SUBMIT buttons is to go to another web page. I am trying to aviod doing anything complicated.
| |
|
|
|
womble
Posts: 6007
Joined: 3/14/2005
From: Living on the edge
Status: offline
|
RE: submit buttons that glow - 9/24/2009 19:29:56
If you're simply wanting to direct the user the to another web page, then all you need is a normal link (a href=... etc.), but with CSS you can style a link to look like for example a CSS styled button if you want.
As for the difference between the <BUTTON> element and the <INPUT> element...
Personally, I'd use the <INPUT> element rather than <BUTTON> partly because that's the way I was taught to do it, and partly because I think it looks neater when the rest of the form's made up of <input> elements (yeah, I'm a bit like Tailslide with things like that  ).
However, the technical difference between the <input type="button" /> and <input type="submit" /> is that the <input type="button" /> won't submit a form - it doesn't do anything by default, and usually it's used with Javascript or AJAX, or ASP or PHP on the server side to process a form.
Meanwhile the <input type="submit" /> button will submit the form it's in when the user clicks on it, unless you specify otherwise, but of course you need to tell it where it's submitting to.
The <BUTTON> element meanwhile's rather buggy - or rather the action of it's slightly different in different browsers. Without an "action" attribute in the <form> though, the form's going to do very little.
What exactly are you trying to do with this form? Without knowing what you're trying to do with the form and seeing the full code for it (preferably a live link) it's difficult to advise further. With you saying that the non submit button would go to a different page, are you trying to direct the user to a specific page dependent on their response in the form (say to a radio button or something)? If so, if I remember rightly I used to have a code snippet for sending users to different pages dependant on what they selected in the form (in that case it was a form where they selected which membership level they wanted to join for a voluntary organisation, and depending on what they selected in the form, they got sent to different pages.
I've got the code around here somewhere, but it's past my bedtime now, so I'll have to have a look for it tomorrow. 
_____________________________
~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~
| |
|
|
|
LawrenceH
Posts: 113
Joined: 8/29/2004
From: Saarbrücken, Germany
Status: offline
|
RE: submit buttons that glow - 9/25/2009 16:07:53
Hi
I have in mind to start a new web project soon. In the meanwhile, my Mum who is now 78 has started to use a laptop and to explore the www. Starting from absolute scratch, my Mum has found it much easier to navigate websites where it is clear where the mouse is. A bit of background info.
At yet, I have no on-line website. I was in the process of exploring the possibilities of glowing buttons, which look the same whether they are SUBMIT buttons or navigation buttons to take the user to another webpage. I also would like to use CSS.
In summary I am looking to use glowing SUBMIT and navigation buttons using CSS code. By the way, what is the <input> tag IMHO?
Lawrence
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
