customized button in HTML form
Moderator: General Moderators
- orangeapple
- Forum Commoner
- Posts: 70
- Joined: Tue Jan 06, 2004 1:24 pm
- Location: Geneva / Switzerland
customized button in HTML form
Hi !
I would like to use a customized "submit" button in a HTML form which calls an php file.
i would like this :
<a href="(Empty Reference!)"><img src="../media/bouton_submit1.jpg" width="80" height="25" border="0"></a>
with the fonction of this :
<input type="submit" value="submit" width="80" height="25" border="0">
Who can help ?
I would like to use a customized "submit" button in a HTML form which calls an php file.
i would like this :
<a href="(Empty Reference!)"><img src="../media/bouton_submit1.jpg" width="80" height="25" border="0"></a>
with the fonction of this :
<input type="submit" value="submit" width="80" height="25" border="0">
Who can help ?
- orangeapple
- Forum Commoner
- Posts: 70
- Joined: Tue Jan 06, 2004 1:24 pm
- Location: Geneva / Switzerland
css ;)
it is a better idea, to use css.
since it is easy to modify or to change,
i think you have more options in using css.
1) Create a css file and link it from your php files.
2) In css create such a class :
3) assign this class to your submit button.
Dont forget the buttonface.gif
If you need i ll send you some proper gifs.
Using css is a better way, try
since it is easy to modify or to change,
i think you have more options in using css.
1) Create a css file and link it from your php files.
2) In css create such a class :
Code: Select all
.xinput {
BORDER-RIGHT: #5c6ba2 1px solid;
PADDING-RIGHT: 0px;
BORDER-TOP: #8ca5b5 1px solid;
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
BACKGROUND-IMAGE: url(images/buttonface.gif);
VERTICAL-ALIGN: middle;
BORDER-LEFT: #8ca5b5 1px solid;
CURSOR: hand;
COLOR: #5c6ba2;
LINE-HEIGHT: 16px;
BORDER-BOTTOM: #5c6ba2 1px solid;
BACKGROUND-REPEAT: repeat-x;
FONT-FAMILY: Arial, Helvetica, sans-serif;
TEXT-ALIGN: center;
TEXT-DECORATION: none
}Dont forget the buttonface.gif
Using css is a better way, try
You could always create two button styles, one for UP and one for OVER etc, and then use JS to flip the styles.
CSS
HTML
There are loads of cool things which can be done with this... you could also create a button DOWN style so that when the button is pressed it greys-out.
I normally use a JS function() though for this sort of stuff.
CSS
Code: Select all
input.buttonStyleOne { balbalabl }
input.buttonStyleTwo { blablabalablabal }Code: Select all
<input class="buttonStyleOne" type="submit" value="submit" onmouseover="this.className='buttonStyleTwo'" onmouseout="this.className='buttonStyleOne'" />I normally use a JS function() though for this sort of stuff.
does that actually work?????Gen-ik wrote:You could always create two button styles, one for UP and one for OVER etc, and then use JS to flip the styles.
CSSHTMLCode: Select all
input.buttonStyleOne { balbalabl } input.buttonStyleTwo { blablabalablabal }There are loads of cool things which can be done with this... you could also create a button DOWN style so that when the button is pressed it greys-out.Code: Select all
<input class="buttonStyleOne" type="submit" value="submit" onmouseover="this.className='buttonStyleTwo'" onmouseout="this.className='buttonStyleOne'" />
I normally use a JS function() though for this sort of stuff.
i have one part of my navigation bar that's a button submit for a form that i cannot get to switch. i was told elsewhere it's not possible
i used onlmouseover/onmouseout and onfocus/onblur and a few others. none woorked
Yeah it should work... you need to replace the "blababla" stuff though 
Here's a little example...
...that should work but I haven't tested it (just typed it with the reply).
Here's a little example...
Code: Select all
<head>
<script type="text/javascript">
clicked = new Array();
// Should prevent button class changing if it has already been clicked.
function FC(obj,class)
{
for(var i=0; i<clicked.length; i++)
{
if(clickedїi] == obj) return false;
}
obj.className = class;
if(class == "buttonDown")
{
clickedїclicked.length] == obj;
}
}
</script>
<style type="text/css" rel="stylehsheet">
input.buttonUp { background-color:#ffffff; color:#000000; cursor:pointer; }
input.buttonOver { background-color:#ffffff; color:#ff0000; cursor:pointer; }
input.buttonDown { background-color:#e0e0e0; color:#a0a0a0; pointer:default; }
</style>
</head>
<body>
<input type="button" class="buttonUp" value="A Button" onmouseover="FC(this,'buttonOver')" onmouseout="FC(this,'buttonUp')" onclick="FC(this,'buttonDown')" />
</body>
</html>try going to http://24.91.157.113/findyourdesire/index.php
then save the page and buttons and uncomment the find user part. see if you can get that to work... that should be a fun little test for it
then save the page and buttons and uncomment the find user part. see if you can get that to work... that should be a fun little test for it
since
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>
looks kinda ugly, and also, uneeded, i thought that it maybe was possible to write a JS-function which gets the forms name, replaces myForm with the name, and then submits it.
I've seen this before, a function like <a href='javascript:process()'>submit</a>, so it is possible. But since I don't now any Javascript at all, i can't do it.
So, i'm asking IF someone could write this function for me (
).
I would be very grateful
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>
looks kinda ugly, and also, uneeded, i thought that it maybe was possible to write a JS-function which gets the forms name, replaces myForm with the name, and then submits it.
I've seen this before, a function like <a href='javascript:process()'>submit</a>, so it is possible. But since I don't now any Javascript at all, i can't do it.
So, i'm asking IF someone could write this function for me (
I would be very grateful
You will still need to tell JavaScript what form it needs to submit... unless you only have one form on the page.vigge89 wrote:since
<a href="javascript:document.forms.myForm.submit()">Submit Form</a>
looks kinda ugly, and also, uneeded.
A simple 'form sending' function would be something like this...
Code: Select all
<script type="text/javascript">
function SF(nameOfForm)
{
var f = eval("document.forms." + nameOfForm);
f.submit();
}
</script>