I have a URL looks like this
site.com/dir/?id=xxx
is it possible to create an HTML form that allows the user to enter the value of id and opens the page in other tab?
thank you.
This is the very basic HTML code to do it :
<!DOCTYPE HTML>
<HTML>
<body>
<h1>The input element</h1>
<form action="https://www.google.com/dir/" target="_blank">
<label for="id">Enter value of ID:</label>
<input type="text" id="fname" name="id"><br><be>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button to open page in new tab.</p>
</body>
</html>
Related
when I enter data into the respective fields and click submit button the form is submitted and when i click on reload button it displays the following message "The page that you're looking for used information that you entered. Returning to that page might cause any action you took to be repeated. Do you want to continue?" how to prevent this form re-submission because on clicking the reload button I want to refresh the page. Here is HTML form.
<!DOCTYPE html>
<html>
<head>
<title> Sample Page </title>
</head>
<body>
<form id="login-form" method="post">
<input type="text" id="user-name" name="Username" placeholder="USERNAME" maxlength="15" autocomplete="off"> <br> <br>
<input type="password" id="pass-word" name="Password" placeholder="PASSWORD" maxlength="10" autocomplete="off"> <br> <br>
<button id="login-button" name="login_button" type="submit"> Login </button>
</form>
</body>
</html>
I found a good website here that explains it, but basically you need to send the data to another page, using <form action="file.html">, then in that file, you have this element:
<meta http-equiv="refresh" content="0; URL='original-file.html'" />
This will redirect you to the original page, the one with the form on it, after 0 seconds, and the page can be refreshed without that issue.
This question already has answers here:
When submitting a GET form, the query string is removed from the action URL
(13 answers)
Closed 1 year ago.
I have this form:
<!DOCTYPE html>
<html>
<body>
<form action="draft.html?test=1">
<button type="submit">Valid</button>
</form>
</body>
</html>
But when I click on valid it doesn't redirect to draft.html?test=1 but to draft.html. What am I doing wrong?
Thank you for your help.
EDIT: I know that I should favour <input type="hidden"> but I want to use it for a POST form.
EDIT 2: This is a stupid question, as soon as I change the method of the form to POST, the problem is resolved.
If you absolutely need to put it on action attribute you can use method="POST".
<!DOCTYPE html>
<html>
<body>
<form action="draft.html?test=1" method="POST">
<button type="submit">Valid</button>
</form>
</body>
</html>
Otherwise if you want to send your data trough GET use
<!DOCTYPE html>
<html>
<body>
<form action="draft.html" method="GET">
<input type="hidden" name="test" value="1">
<button type="submit">Valid</button>
</form>
</body>
</html>
When you submit a form with method="GET" (the default), the query string of the action is replaced with the data in the form.
Don't put the data in the action attribute. Put it in hidden input elements instead.
<form action=draft.html>
<input type=hidden name=test value=1>
<button>Valid</button>
</form>
Is this what you want?
<form action="draft.html">
<input type="hidden" name="test" value="1">
<button type="submit">Valid</button>
</form>
I have a simple HTML form.
<!DOCTYPE>
<html>
<body>
<center>
<form action="MYLINK" method="POST">
Tell your device what to do!<br>
<br>
<input type="radio" name="args" value="on">Turn the Light on.
<br>
<input type="radio" name="args" value="off">Turn the Light off.
<br>
<input type="submit" value="Do it!">
</form>
</center>
</body>
</html>
When the submit is clicked, the page redirects and Server's JSON reply is shown. I dont want that.
I added an IFRAME in the page and then added it as the form's target
<form action="MYLINK" method="POST" target="hidden-form">
...
</form>
<IFRAME style="display:none" name="hidden-form"></IFRAME>
Now the reply from server is not visible.
I have this piece of code:
<div>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<br />
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
</div>
When I render the above the "profileForm" does not appear (although the profileBtn DOES appear).
the seconed form has no problems, which is weird because they are both similar.
It's probably an easy question but I have no idea what's the problem.
This just happened to me using Chrome -- it was because I had a form within a form. It looks like Chrome just stripped out the <form> open and close tag because my form was within another form. When I moved one form outside of the other, then both <form> tags were rendered in the html as intended.
Crackermann was getting at this in his answer too.
It's hard to give a direct solution without seeing your full html, but I'm guessing this is your problem - you need to make sure your form is not within another form. Really simple example to illustrate this:
Form within another form, notice if you run this code in Chrome and inspect <form id="form2"> is not rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form within a form</div>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</form>
</body>
</html>
If you move form2 outside of form1, run the code in Chrome and inspect, then <form id="form2"> is rendered:
<html>
<head></head>
<body>
<form id="form1">
<div>form2 moved outside of form1</div>
</form>
<form id="form2">
<input type="text" placeholder="name" /><br/>
<input type="text" placeholder="title" />
</form>
</body>
</html>
well then somehow there was a weird problem with the forms, the button didn't show up because when i ran the website the the 'profileForm' just disappeared somehow (and didn't show up in the console).
what i did was adding a third Form before 'profileForm' which somehow solved this.
There is an unclosed HTML TAG like < form > in your code before these lines ,
Find and close that form
OR
just put </form> before your code.
Just put a empty form on top of your form.
Then all forms will be appear with form id
<form></form>
<form name='profileForm' id='profileForm' action='' method='get'>
<input type='submit' name='ProfileBtn' id='ProfileBtn' class='buttonC' value='My Profile' />
</form>
<form name='logoutForm' id='logoutForm' action='' method='get'>
<input type='submit' name='LogOutBtn' id='LogOutBtn' class='buttonC' value='Logout' />
</form>
Check that you don't an unclosed form element before your next form open.
If you do, browsers will generate the source without displaying the subsequent form open and form close pair.
Try viewing your Page Source
For Mac users
Option + Command + U
For Windows users
Ctrl + U
Then check for any unclosed <form> tag above your specified <form> tag and close it.
It works for me, hope it works for you too
Hi I am using this form code to enter get the text field. in that text field i will enter some string for search and i press submit button.when i click on submit button it show the search results in google search engine how to do this.
<!DOCTYPE html>
<html>
<body>
<form name="input" action="index.html" method="get">
Search:<input type="text" name="user">
<input type="submit" value="Submit">
</form>
</body>
</html>
Can anyone help me? Thanks In advance......
Simply imitate how Google does it. The key items are the action attribute and the use of the name q for the string:
<!doctype html>
<meta charset=utf-8>
<title>Google search</title>
<form action="http://www.google.com/search">
<label for=q>Keyword(s):</label>
<input type=text name=q size="32" id=q>
<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="oe" value="utf-8">
<input type="submit" value="Search">
</form>
You can use the Google Custom Search API for this.