I have made this simple search box and want to use an svg image as the submit button, how could I do that without any javascript?
here's the form:
<form method="post" action="#">
<input type="text" name="rechercher" id="rechercher" placeholder="Rechercher"/>
<input type="submit" value="none" onerror="this.onerror=null; this.src='images/loupe.png'"/>
</form>
You can use an image button on the button
<input type=image src=PATH_TO_YOUR_IMAGE alt="Submit Me">
or set submit button background to an image using css
input[type=submit] {
background:url(BACKGROUND_IMAGE_PATH_HERE);
border:0;
display:block;
height:Change_TO_backgroundimageheight;
width: Change_To_backgroundimageWidth;
}
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
<input type="image" src="submit.gif" alt="Submit">
</form>
The long and short is input type image will also submit the form
Related
so I don't know if I'm doing it right, but I wanted to make a button with a link in the submit input, but I don't know how to do that, the code is like this
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="submit" name="" value="Login">`in this part`
I tried to make a link with href and ul, I tried to create the button with div button, but it didn't stay in the position it was when I use the input.
i am new contributor to, i hope to help answer your question, actually I'm not sure what you mean by "a button with a link in the submit input", maybe like this, you can change the type to button
<form class="box" action="index.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<input type="button" name="" value="Login" onclick="functionHere()">`in this part`
source : Html input type="button" - W3Schools
I would remove the submit element entirely then. With a little bit of JavaScript, you can get anything to submit the form. It's not the most conventional way to go about things but it does exactly what you need it to do. If you wanted to pass any other data through the submit element, you can simply add invisible elements.
<form class="box" action="index.html" method="post" id="form">
<h1>Login</h1>
<input type="text" name="" placeholder="Usuario">
<input type="password" name="" placeholder="Insira Sua Senha">
<div class="submit-button" onclick="document.getElementById("form").submit()">
<p>Login</p>
Link
</div>
</form>
I want to use an image as a submit button for a form:
<!DOCTYPE html>
<html>
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok">
<input type="image" src="/images/button.png">
</form>
</body>
</html>
The HTML above will result in a clickable image, but also a regular submit button right next to the image with the text http://127.0.0.1:80/cgi-bin/script.cgi.
I only want the image the be shown. What am I doing wrong?
EDIT:
This will work if CSS is enabled: https://stackoverflow.com/a/1193338/5185801
Close <input> tags properly like
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="/images/button.png" />
</form>
I don't see any problem.
Check out this fiddle.
Here is the snippet.
<body>
<form action="/cgi-bin/script.cgi" method="GET">
<input type="hidden" name="status" value="ok" />
<input type="image" src="http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=6cd6089ee7f6" />
</form>
</body>
I have a search form that has a image as the button which is great, but i can't get the image to look the same as other text, i would like to remove this image and just use it as text instead then style it accordingly, if someone could give me some advice on doing this the simplest way possible that would be appreciated.
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off">
<input type="image" src="Search.gif" class="Button">
</form>
Many thanks.
You can replace the image with a submit button and remove the borders and background with css. That should show just plain text
<form action=".php" method="get" onsubmit="return check_small_search_form()">
<label for="search_query"></label>
<input type="text" name="search_query" id="search_query" class="Textbox" value="Search" autocomplete="off" />
<input type="submit" value="The text you want" class="Button" />
</form>
I have a simple HTML form with multiple submit buttons and I want my application to act differently on whichever submit button I click.
Example:
<form method="POST">
<input type="submit" value="test" name="test" />
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="text" name="search_query2" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search2" />
<input type="submit" value="GO" name="next" />
</form>
This works for me, and I know how to distinguish which button I clicked. The problem I have is that if I push Enter while editing the text-field then the first submit button gets clicked (the one named test). Is this possible to let the browser know (with HTML only - the whole point of this is to make it work with NO JavaScript) that I pushed Enter and it should send search with POST, not test?
So is there some kind of binding of text field to the submit button?
A solution to this problem would be to have multiple form elements, including your different submit buttons and the corresponding textfields.
I can't think of a solution with just one formular but no Javascript in use.
You could move the one you want to be submitted to first in that list, like so:
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some text">
<input type="submit" value="Search" name="search" />
<input type="submit" value="test" name="test" />
<input type="submit" value="GO" name="next" />
</form>
But it seems that your HTML is just poorly formed, I'd recommend Merguez's answer
Since your edit, there is no way to do this without Javascript/jQuery.
This would not be hard to do with PHP.
First: Change your buttons to actual controls:
becomes
<form method="POST">
<input type="text" name="search_query" style="width: 300px; padding: 5px" value="some
text" />
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Search">Search</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Test">Test</button>
<button type="submit" name="actionB" onclick="javascript:checkBtn();" value="Go">Go</button>
</form>
Now, when the form is submitted, check the returned value of actionB. If it's "Search", then piece together your search URL using the returned value of search_query.
There is NO way to read variables using only HTML. JavaScript is required if you're not going to use a scripting language to do this. You can totally do this in native JavaScript. JQuery is NOT required for this relatively simple function.
<script language="JavaScript">
function checkBtn() {
var btnX=document.getElementById("actionB").value;
if (btnX=="Search") {
// compose your new URL here
}
// repeat for each of the possible buttons
</script>
Hope that helps somewhat!
Steve
ttI know this is a lame question but in order to do it right i need your help.
this is my html code
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
</form>
<div style="width:100%; font-size:14px;text-align:center;">Click here to subscribe
</div>
<div class="subscribe">
</div>
and here is the fiddle
http://jsfiddle.net/V8RB2/
how can i associate the "Click here to subscribe" text and the button with this form?
If i understood you correctly, you want to submit the form when the link is clicked. To do this, you'll have to use JavaScript.
A quick way of doing it is by telling the form to submit itself in the onclick attribute of the link.
<a onclick="form1.submit()" href="#">Click here to subscribe</a>
What happens is, that when the link is clicked, you trap its onclick event and then you tell form1 to submit itself.
The easiest way would make this a button within the form and use CSS to style it however you want.
<input type="submit" id="button1" class="button1" name="subscribe" value="Click here to subscribe!" />
Then to style:
form input.button1 {
style here
}
The below will work.
<form name="form1" class="form1">
<fieldset>
<legend>Subscription</legend>
<label for="subname">Name</label>
<input type="text" name="subname" />
<label style="padding-left:20px;" for="subemail">Your Email</label>
<input type="text" name="subemail" />
</fieldset>
Click here to subscribe
</form>
Change your link's href to:
href="javascript:document.forms['form1'].submit()"
Or add that as an onClick attribute.
Updating with a technique to route around disabled javascript.
<script>document.write('Click here to subscribe</div><div class="subscribe">');</script><noscript><input type="submit" value="submit"></noscript>