LebGeeks
You are not logged in.
- Topics: Active • Unanswered
#1 March 29 2014
- nosense
- Member
Html submit button
Hello guys
I'm trying to make a fancy submit button in a webpage so i have it as an image and i am using
<input type="image" src="path/to/image">But this only returns the x and y coordinates where u clicked the button
Any help ?
#2 March 29 2014
- rtp
- Member
Re: Html submit button
First of all you have to understand that HTML is for creating objects like text, buttons, images etc...
While CSS is for styling.
so you can simply use the submit button
<input type="submit" class="imgSubmit" />in the css you can change the background-image: etc...
.imgSubmit
{
border:none;
background-image: url('urlGoesHere');
width: something px;
height: something px;
}something between these lines
Last edited by rtp (March 29 2014)
#3 March 29 2014
- NuclearVision
- Member
Re: Html submit button
Then the problem isn't with the line of code you wrote, I'm assuming you didn't specify the function for the button, so it used the "native" button function, otherwise include in your post the function code.
Good luck!
#4 March 29 2014
- rolf
- Member
Re: Html submit button
I'm not sure what is supposed to happen when you click an image input.
The FORM tag has a "target" (or was it "action"?) attribute (defaults to the same page) which is called when an input of type submit is called. I wonder if the image input should do the same thing than a submit input...
In any case you can also add "onclick" and write some javascript there...
PS: try searching for a reference on the INPUT and the FORM tags, they should indicate clearly how it's supposed to work.
Last edited by rolf (March 29 2014)
#5 March 29 2014
- nosense
- Member
Re: Html submit button
I wasn't so clear in my question I forgot to say i was using javascript to make a login page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
#box {
position:absolute;
border:solid black 5px;
border-width: 2px;
border-color: white;
top:25%;
right:25%;
bottom:25%;
left:25%;
padding:25px;
margin:50px;
color: whitesmoke;
}
#it{
border: solid 0px #000000;
font-size:2;
width:55px;
height:28px;
}
</style>
<script language="javascript">
<!--//
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function passfunc() {
var x=document.getElementById("user").value;
var y=document.getElementById("pass").value;
if (x=="ali") {
if (y=="test") {
location="page2.php"
} else {
alert("Invalid Password")
}
} else { alert("Invalid UserID")
}
}
//-->
</script>
</head>
<body background="s2.jpg">
<?php
?>
<div id="box">
<label>User Name <input type="text" id="user" value=""></br></label></br>
<label> Password <input type="password" id="pass" value=""></label> </br></br>
<input onClick="passfunc()" id="it" type="button" value="Login"> <input id="it" type="Reset">
</div>
</body>
</html>I went with rtp suggestion and it worked perfectly , except my image had round edges and the rectangle outside is still visible , how can I fix that
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
.imgSubmit
{
border:none;
background-image: url(submit.png);
width: 130px;
height: 50px;
}
#box {
position:absolute;
border:solid black 5px;
border-width: 2px;
border-color: white;
top:25%;
right:25%;
bottom:25%;
left:25%;
padding:25px;
margin:50px;
color: whitesmoke;
}
</style>
<script language="javascript">
<!--//
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function passfunc() {
var x=document.getElementById("user").value;
var y=document.getElementById("pass").value;
if (x=="ali") {
if (y=="test") {
location="page2.php"
} else {
alert("Invalid Password")
}
} else { alert("Invalid UserID")
}
}
//-->
</script>
</head>
<body background="s2.jpg">
<?php
?>
<div id="box">
<label>User Name <input type="text" id="user" value=""></br></label></br>
<label> Password <input type="password" id="pass" value=""></label> </br></br>
<input type="submit" onClick="passfunc()" class="imgSubmit" value=""> <input id="it" type="Reset">
</div>
</body>
</html>Last edited by nosense (March 29 2014)
#6 March 29 2014
- rtp
- Member
Re: Html submit button
try
background:none;
border-radius:0;note that background:none should be above background-image, it might overwrite the image if it was below it and we don't want that.
Last edited by rtp (March 29 2014)
#7 March 29 2014
- nosense
- Member
Re: Html submit button
I found Something on my subject Here
You'll always get mouse co-ordinates for a submit button type="image"
You can use a standard submit type button and just apply styles to it to change the look.
<input type="submit" id="search-submit" value="" style="background-image: url(/images/search-button.gif); border: solid 0px #000000; width: WIDTHpx; height: HEIGHTpx;" />
#8 March 29 2014
- rtp
- Member
Re: Html submit button
a note, it is bad practice to use
<br/>Since they are not consistent on different browsers and they will cause you a lot of pain. Use margin and padding instead.
Create a separate file for your css
#9 March 29 2014
- nosense
- Member
Re: Html submit button
try
background:none; border-radius:0;note that background:none should be above background-image, it might overwrite the image if it was below it and we don't want that.
that didn't work while this did
background-color: transparent;
#10 March 29 2014
- nosense
- Member
Re: Html submit button
a note, it is bad practice to use
<br/>Since they are not consistent on different browsers and they will cause you a lot of pain. Use margin and padding instead.
Create a separate file for your css
I knew I would get this comment and I know its bad but I am having some trouble alligning input boxes that's why I used it just temporarly
Thank you for your help
#11 March 29 2014
- rtp
- Member
Re: Html submit button
In design you should try to use float as much as possible because it renders the same across all browsers and screens.
I highly encourage you to learn how float and clear work.
You shouldn't use position absolute unless you really have too.
I would do something like this
HTML
<div id="box">
<div class="loginInputWrapper">
<div class="loginLeft">
User Name
</div>
<div class="loginRight">
<input type="text" id="user" value="">
</div>
</div>
<div class="loginInputWrapper">
<div class="loginLeft">
Password
</div>
<div class="loginRight">
<input type="password" id="pass" value="">
</div>
</div>
<div class="loginInputWrapper">
<input type="submit" onclick="passfunc()" class="imgSubmit" value="">
<input id="it" type="Reset">
</div>
</div>CSS
.loginInputWrapper
{
float: left;
clear: left;
margin: 10px 0 0 0;
}
.loginLeft
{
float: left;
width: 100px;
color: black;
}
.loginRight
{
float: left;
}
#12 March 29 2014
- nosense
- Member
Re: Html submit button
I spent hours yesterday trying to figure this out and got mixed solution and nothing worked perfectly, but this is perfect, easy and organizing I owe u big time and will try to investigate more on float.
Thanks again u helped alot !
#13 March 29 2014
- rtp
- Member
Re: Html submit button
The main trick is the width. That is what is allowing it to align quite nicely.
When you have dynamic content you can't do that but since its a static content you can do that.
.loginLeft
{
...
width: 100px;
}By default, div has a "block" width meaning its width will be 100%.
When you tell it to "float", it will change this "block" display to "inline" and go to the direction of your choosing. When it turns into "inline" it will no longer have a width of 100% but its width will be wrapped to the content of the div.
this is what happened automatically when you use float
divNormal
{
display:block;
width:100%;
}
divWithFloat
{
float:left;
display:inline;
}I encourage you to play around float and design best practices before you try to build something.
hopefully you know the difference between a class and an id
sure thing ^_^
Last edited by rtp (March 29 2014)
#14 March 29 2014
- nosense
- Member
Re: Html submit button
I know Id's are unique and used to specify a single element while class can be used to multiple elements and actually I am taking this web course now with other courses so I am short on time and in 1 course they feed u html,css,javascript and php so I am working on my own and w3schools.com is somehow very helpful
I have a question regarding what u said "You shouldn't use position absolute unless you really have too."
I am trying to place the whole div somewhere on the page so I am using
.mydiv{
position:absolute;
top: 25%;
left: 35%;
}How can this be done in another way ?
#15 March 29 2014
- rtp
- Member
Re: Html submit button
yeah i learned from w3schools mainly as well.
You should mainly use position absolute when you want to take advantage of the z-index. Other than that I wouldn't use it in normal case. I use float and clear as stated before and I simply use the default css of div which is quite nice as well.
instead of top and left, you would use margin
Most websites are centered in the middle, like lebgeeks for example. The content of the website is in center of the page. You can achieve this trick by putting a main div and centering it. However to center a div you need to give it a width, most website content is around 980px to 1000px since most monitors have a width 1024px ( that was an old survey... )
So you have a main div that is centered acting as a holder to the whole contents. Now that you have that centered you can simply float things :)
so if i want to build something like this website the code will look like
HTML
<div id="mainWrapper">
<div class="logoWrapper">
<div class="logoImage">
<img src="..." alt="logo" />
</div>
<div class="logoText">
A community for technology geeks in Lebanon
</div>
</div>
<div class="menuWrapper">
<ul> <!-- menus should be inside ul and li to be parsed properly by search engines, in HTML5 u should use nav instead of div class="menuWrapper" ... -->
<li>Index</li>
<li>Rules</li>
</ul>
</div>
</div>CSS
#mainWrapper
{
margin:0 auto;
width:980px;
}
.logoWrapper
{
float: left;
clear: left;
}
.logoImage
{
float: left;
margin:0 10px 0 0;
}
.logoText
{
float:left;
}
.menuWrapper
{
float: left; /* float left + clear left act like <br> it goes down a line, you can use margin to go lower or higher */
clear: left;
}Last edited by rtp (March 29 2014)
#16 March 29 2014
- nosense
- Member
Re: Html submit button
So the width is set then the browser sets the margin left and margin right to be equal and it should work but I don't know why left and right aren't equal for me
#17 March 29 2014
- nosense
- Member
Re: Html submit button
Or maybe it is ! but my content are on the left true ?
Last edited by nosense (March 29 2014)
#18 March 29 2014
- rtp
- Member
Re: Html submit button
am not sure what you are talking about
#19 March 29 2014
- nosense
- Member
Re: Html submit button
Haha did u see the picture I posted ? I did what u said and I needed this content to be exactly in the middle while it is still to the left
Last edited by nosense (March 29 2014)
#20 March 29 2014
- rtp
- Member
Re: Html submit button
oh ok
show me the code
#21 March 29 2014
- nosense
- Member
Re: Html submit button
Sorry still didn't separate the css
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
.imgSubmit
{
border:none;
background-image: url(login.png);
background-color: transparent;
width: 75px;
height: 30px;
}
.imgReset
{
background-color: transparent;
border:none;
background-image: url(reset.png);
width: 75px;
height: 30px;
}
.mydiv{
margin:0 auto;
width: 1000px;
}
.loginInputWrapper
{
float: left;
clear: left;
margin: 10px 0 0 0;
}
.loginLeft
{
float: left;
width: 100px;
color: white;
}
.loginRight
{
float: left;
}
</style>
<script language="javascript">
<!--//
/*This Script allows people to enter by using a form that asks for a
UserID and Password*/
function passfunc() {
var x=document.getElementById("user").value;
var y=document.getElementById("pass").value;
if (x=="ali") {
if (y=="test") {
location="page2.php"
} else {
alert("Invalid Password")
}
} else { alert("Invalid UserID")
}
}
//-->
</script>
</head>
<body background="s2.jpg">
<div class="mydiv">
<div class="loginInputWrapper">
<div class="loginLeft">
User Name
</div>
<div class="loginRight">
<input type="text" id="user" value="">
</div>
</div>
<div class="loginInputWrapper">
<div class="loginLeft">
Password
</div>
<div class="loginRight">
<input type="password" id="pass" value="">
</div>
</div>
<div class="loginInputWrapper">
<input type="submit" onClick="passfunc()" class="imgSubmit" value=""> <input class="imgReset" type="Reset" value="">
</div>
</div>
</body>
</html>
#22 March 29 2014
- rtp
- Member
Re: Html submit button
it is centered but now you need to center the content.
Create a new div under "mydiv" that holds the all the login content
<div class="mydiv">
<div class="loginWrapper">
....
</div>
</div>give a border for both mydiv and loginWrapper like red or something visible and you should be able to tell what is happening.
#23 March 29 2014
- nosense
- Member
Re: Html submit button
Yeah that's what I thought and now seeing all the borders helps in figuring everything out
Today was a good day
#24 March 29 2014
- rtp
- Member
Re: Html submit button
there are two nice add on for firefox
- web developer tool
- firebug
web developer can show you the border of the divs by going to "outline" => "outline block level elements"
^_^
#25 March 30 2014
- rolf
- Member
Re: Html submit button
Haha did u see the picture I posted ? I did what u said and I needed this content to be exactly in the middle while it is still to the left
You should put your content in a DIV box, with a set width and height... something like that:
.box {
width: 200px;
height: 180px;
position: absolute;
left:0; right:0; bottom:0; top:0;
margin:auto;
}
body {
position:relative;
}I know it's not very clear, but basically when a DIV is position:absolute and left,right,top and bottom set to 0 and margin set to auto it will be in the middle (vertical and horizontal) of the container, but the container must also be position:relative, I think.
Otherwise you can do a table and set vertical-position of the TD to middle.
If you just want to horizontally align, I think margin:auto; should be enough, or even text-align:center.
PS: please, please, please, in the JavaScript, when you have variables, don't call them x and y (except if they're coordinates), call them user and password instead, to avoid confusion.
Last edited by rolf (March 30 2014)