I've got this super simple search form on my home page:
<form method="get" action="https://google.ca">
<input type="text" placeholder="" name="q" autofocus>
</form>
When I type into it and press enter, it takes me to Google like I want, but then it just hangs on this white page. Happens in Chrome, Firefox, and Edge.
How can I make a form that successfully searches Google?
you have entered a incorrect URL Address https://www.google.co.in/?q=bacon
You can try this this one:
<form method="get" action="https://www.google.ca/search?">
<input type="text" placeholder="" name="q" autofocus>
</form>
Related
Trying to make Google Image Search Clone using HTML form where after entering text in the search field it will take you directly to Google Image search results page.
Here is the code that I am using:
<body>
<form action="https://google.com/search">
<input type="text" name="q">
<input type="submit" value="Google Search">
</form>
</body>
It will take to normal google search, how do I change it to google image search result page?
You have to change the action, as such:
<form method="get" action="http://images.google.com/images">
<input type="text" name="q" />
<input type="submit" value="Google Search" />
</form>
Google image search link is of the following format
https://www.google.com/search?q=```query```&tbm=isch
Each of the parameters, q and tbm, requires an input tag but tbm does not require any user input.
'GET_parameter_name=value' for every input tag before submit button is appended by '&'.
<form action="https://www.google.com/search">
<input type="text" name="q" id="box">
<input type="hidden" name="tbm" value="isch">
<input type="submit" value="Image Search" >
</form>
Source:
https://stenevang.wordpress.com/2013/02/22/google-advanced-power-search-url-request-parameters/
https://www.xul.fr/javascript/parameters.php
I maintain a login form that is reused across a variety of organizations. Each organization has a different set of required credentials. In some cases, only a single identifier is required. Essentially it's a user name or number, with no password. I realize this fact may strike many as odd, but let's leave that aside. It's a quirk of the domain I work in.
When the login form only contains a single input field I would still like browser's password management features to kick in and offer to save the entered value. I have tried setting autocomplete="username" on the input element as described here, but that does not seem to work.
Can this be done? Do any browsers support it? I can't find a clear answer in the documentation for Chrome, Firefox, or Safari. I can always implement it myself using a cookie and a "remember me" checkbox, but I would strongly prefer not to.
Include a hidden password input inside your form and set a non-empty value attribute such as "NULL" in the below example. Then the browser asks you for saving your credentials.
<form action="#" method="POST">
<input type="text" name="username" required>
<input type="password" name="password" value="NULL" hidden>
<input type="submit">
</form>
This is what I use:
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
You could try this make sure your code is some what similar...
I made some tests and figured out that it's possible to use the browser's login autocomplete also for a user only field.
You may use this code for the form and set the position for the password field only if you need to show only the username field (read more at the end of the post, it's needed for Firefox):
<?php
$passwordFieldPositionAway = '';
$hidePasswordField = false; // change this accordingly with your needs, e.g. for Firefox set it to true
if($hidePasswordField)
{
$passwordFieldPositionAway = " style='position:absolute;top:-1000px;'";
}
?>
<html>
<head>
</head>
<body>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name="username" autocomplete="username" placeholder="Username">
<input name="userPassword" type="password" <?= $passwordFieldPositionAway; ?> placeholder="password" autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
Tests I done
First, I modified the form suggested here.
index.php:
<html>
<head>
</head>
<body>
<form id="login" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' style='visibility: hidden; display:none;' type="password" placeholder='password' autocomplete="current-password">
<input type="submit" value="Sign In!">
</form>
</body>
</html>
login.php:
<?php
echo "<pre>";
print_r($_POST);
echo "</pre>";
?>
Chronium
Here are the steps I done with the Chronium browser:
At the first time I open the form, I insert my credentials:
The browser prompt the dialog to save the credentials:
The PHP page receives these values:
When I reopen the login page, the browser autofill both fields:
I make a login with different credentials:
When reopen the login page, Chronium auto-fills both fields with the latest login data:
About the second form, which have the password field hidden, the browser's behavior is the same as the first form:
and it prompt to save the login also for that form.
Firefox
Firefox behaves differently:
it prompt to save the login only if the password field:
isn't hidden (with no visibility:hidden nor display:none)
the password field contains at least 2 chars
It will auto-fill the field if there is only one login saved (in my case I had more logins), otherwise it leaves the selection to the user.
Therefore, to make the user-only login works on Firefox, you may show the password field and prefill it with any string you want. To hide it in Firefox you must position it outside of the user's visible area in the page:
<form id="loginOnlyUsername" action="login.php" method="post">
<input type="text" name='username' autocomplete="username" placeholder='Username'>
<input name='userPassword' type="password" style='position:absolute;top:-1000px;' placeholder='password' autocomplete="current-password" value="anyString">
<input type="submit" value="Sign In!">
</form>
Some info:
Chronium version: 77.0.3865.90 (Official Build) snap (a 64 bit)
Firefox version: 68.0.2 (64-bit)
Operative system: Ubuntu 18.04
I can find a lot of references even on StackOverflow that Chrome Auto-fill functionality should work if autocomplete="on".
However that does not seem to be the case with the latest Chrome I have here (60.0.3112.90). To be precise - default browser autocomplete works fine , but Auto-fill will ignore the field completely.
The code below won't work with Chrome Auto-fill:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="on" />
<input type="text" name="email" autocomplete="on" />
</form>
However, this will work without issues:
<form method="post" name="checkout" url="/">
<input type="text" name="given-name" autocomplete="given-name" />
<input type="text" name="email" autocomplete="email" />
</form>
You can easily test it here: https://jsfiddle.net/kw4yjpz4/
Screenshots:
Does it mean that all input fields now have to have autocomplete="[NAME]" for auto-fill to work? Is this a bug in the newest Chrome or intended behaviour?
I stumbled across this same issue and searching led me here... I moved on not finding an answer and finally stumbled across the answer to my cause of the issue, so I came back in case someone like me wanders through with the same issue (likely myself in 2 years when I've forgotten about it - hi, me!).
Turns out if the site does not have a valid SSL cert, Chrome Autofill does not work.
Try the following:
<!DOCTYPE html>
<html>
<body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
The above works as I want in Chrome when the site has a valid SSL cert. Saving locally and opening the .html results in Autofill not working.
Autocomplete allows the browser to predict the value. When a user starts to type in a field, the browser should display options to fill in the field, based on earlier typed values.
The autocomplete attribute works with the following types: text, search, url, tel, email, password, datepickers, range, and color.
And It contains only on|off Value for 'autocomplete' attribute.
In some browsers you may need to activate an autocomplete function for this to work (Look under "Preferences" in the browser's menu)
autocomplete works once you submit the data see
https://jsfiddle.net/0x31Loo1/#&togetherjs=CtJMLzM7AP
<form method="post" name="checkout" url="/" autocomplete="on">
<input type="text" name="given-name" />
<input type="text" name="email" />
<input type="submit">
</form>
I am trying to make a login form. But the text and password field of that form is not working properly. I have tested the code in all major browsers but different browser's giving different output. Firefox shows my password field is already filled, chrome shows both of the input fields are filled but IE shows it perfectly. I have already used "autocomplete" attribute. But it didn't change anything. Can anyone help me to get rid of this annoying problem? My html code-
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20">
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"><br><br>
<input type="submit" name="submit">
</form>
screen shots:- [firefox,chrome,IE]
In terms of chrome:
You've saved the username and password. It's prepopullated by chrome. That's why its showing that way.
Regarding firefox
I guess you've saved password here again. Because i've tested it in firefox and it's rendering properly. Else you've set the value attribute.
From settings, remove saved password for your page and try.
The HTML you have written is invalid and has unclosed elemens, your input fields should end with \> making your code look as follows:
<form method="POST">
User Name : <input class="form" type="text" name="text" id="username" maxlength="100" size="20"/>
Password : <input class="form" name="password" type="password" id="password" maxlength="16" size="20"/><br><br>
<input type="submit" name="submit"/>
</form>
Since you were not closing the input fields, your browser would automatically close them on your behalf, I would imagine that it has closed them after the <br> tags and therefore rendering them as the value of the input field.
As the title states, I'm trying to incorporate many searches into one search bar. More specifically, Google and Amazon. I have setup a radio option to set which site to search when one is selected.
This is the code I currently have:
<form method="get" action="http://www.google.com/search">
<div align="center" style="font-size:75%">
<input type="text" name="q" size="25" maxlength="255" value="" />
<input type="submit" value="Google or Amazon Search" /></br>
<input type="radio" name="sitesearch" value="" />The Web
<input type="radio" name="sitesearch" value="yoursite.com" checked />This Site
</div>
</form>
I have this form for Amazon, but I'm just unsure how to code it into the one search bar.
<form action="http://amazon.com/s/ref=nb_sb_noss" method="get" target="_blank">
<input type="text" id="twotabsearchtextbox" name="field-keywords">
<input type="submit" value="Search" class="nav-submit-input">
</form>
Use JavaScript to change the actual form action in page's DOM (and other parameters, if needed), depending on the user selection (use onclick event on radio to montior for change for example). Simple as that. You won't be able to do that in pure HTML without using some kind of proxy server to redirect the requests and return the results appropriately.
document.your-form.action = (google_selected) ? "http://www.google.com/search" : "http://amazon.com/s/ref=nb_sb_noss";
etc.