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>
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 know there quite a few people that say to get a multi-line input you need to use a textarea, but I can't because then it wouldn't be part of the form. Here is my code.
<form action="form.php" method="POST">
<input name="field1" type="text" value="type here" />
<input type="submit" name="submit" value="enter">
</form>
You can't. The only HTML form element that's designed to be multi-line is <textarea>
<form action="form.php" method="POST" id="myForm">
Name: <input type="text" name="usrname" />
<input type="submit" name="submit" value="enter">
</form>
<textarea name="comment" form="myForm"></textarea>
The texarea is outside the form, but by adding the ID of the <form> it's still a part of the form.
Is there a reason you can't use:
<form action="form.php" method="post">
<textarea name="field1"></textarea>
<input type="submit" name="submit" value="enter">
</form>
My code is
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
Now I want, if I click on submit1 p1.php should open and I can only access value of text1 and not text2.
Similarly, if I click on submit2 p2.php should open and I can only access value of text2 and not text1.
The pages are openning but I can access both the values ie t1 and t2
I only want to do it with html no js and jquery and I need to make only one form.
NO separate forms allowed.
You can use the attribute formaction on the submit button to change the current action of your form, without using JS. See formaction spec. In case you need to support older browsers like IE9- you can simply use webshim to polyfill it:
<script>
if(!('formAction' in document.createElement('input')){
webshim.polyfill('forms');
}
</script>
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p2.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
hy sam,
Your question look like wrong may be you are asking to submit all form values in different action using two submit button in a single form.
may be this code will help you to submit values in different form action
<form method="post">
<input type="text" name="t1" id="t1">
<input type="text" name="t2" id="t2">
<input type="submit" name="s1" id="s1" value="Submit1" formaction="p1.php">
<input type="submit" name="s2" id="s2" value="Submit2" formaction="p2.php">
</form>
If you do not want to use javascript, the only solution that I can think of is to use two HTML forms.
<form method="post">
<input type="text" name="t1" id="t1">
<input type="submit" name="s1" id="s1" value="Submit1" onclick='this.form.action="p1.php";'>
</form>
<form method="post">
<input type="text" name="t2" id="t2">
<input type="submit" name="s2" id="s2" value="Submit2" onclick='this.form.action="p2.php";'>
</form>
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
So I have a form with two fields, one of these fields needs to have information in to successfully display the next page. How would I disable the submit button until that field has some text in it?
Here's the HTML Code;
<div id="content">
<form action="avatarquery.php" method="POST" id="login-form">
<fieldset>
<p>
<label for="login-username">Server Name:</label>
<input type="text" id="login-username" name="name" class="round full-width-input" autofocus />
</p>
<p>
<label for="login-password">Server IP:</label>
<input type="text" id="login-password" name="ip" class="round full-width-input" />
</p>
<input class="button round blue image-right ic-right-arrow" type="submit" id="register" />
</fieldset>
<br/><div class="information-box round">Please Note: Some servers may not work due to their Configs not having Query Enabled.</div>
</form>
If that has to be done using HTML, then in HTML5, you can use
<input type="text" required />
Otherwise in JavaScript, you can try setting an attribute to the input button.
Until the value is "", you can set the attribute
<input type="submit" disabled />