Image submit button and remove x, y parameter


#1

I have the code above at http://form.kr/test/imageForm.html
if I click the button it shows not only key parameter but also x,y parameter.
How can I remove the both x and y parameters at url?


#2

Simple - don’t use input type=“image”. :rofl:

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">

body {
    background-color: #f9f9f9;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

input[type="submit"] {
    width: 2em;
    height: 2em;
    border :0;
    background-color: transparent;
    background-image: url( http://form.kr/don/i03search_black.png );
    background-size: cover;
    cursor: pointer;
 }
</style>

</head>
<body> 

 <form action="#">
  <input type="text" name="key">
  <input type="submit" value="">
 </form>

</body>
</html>

Of course, the only problem with this is that the
button disappears with image failure. :winky:

I would suggest that you stop worrying about
the x and y. and stay with the type=“image”

Also add an alt attribute to the element for
good accessibility.

coothead


#3

Thank you, coothead.

I made a page at http://form.kr/test/imageForm2.html with your code.
it is succesfully removed the x and y parameter. but I cannot see the image in the submit button at the page although the internet address of the image is correct.


#4

Hi there joon,

in your CSS you have used

input<type="submit"> {

It should be…

input[type="submit"] {

Also read the comments that I added
at the end of my previous post.

coothead


#5

oops…
Now it works. Thank you very much