Auto complete in HTML doesn't really work - html

I'm just testing with a simple log-in page. Here are 3 text-forms.
Username, EmailAddress, Password.
When I put the value in there, hit the submit,and auto-complete works for only 2 of them. And the form (EmailAddress) is not filled at all.
I just couldn't figure out why auto-complete is not working at EmailAddress.
<!DOCTYPE html>
<html>
<head>
<title>Log in Page</title>
</head>
<body>
<form action="login.php" method='post'>
<p><strong>Login Page </strong></p>
<p>Username:<input name="username" type="text" ></p>
<p>EmailAddress:<input name="email" type="text" ></p>
<p>Password:<input name="password" type="password""></p>
<p><input type="submit" name="Submit" value="Login"></p>
</form>
</body>
</html>

Try setting the autocomplete value. It should default to on, but I'd try adding it.
It's also possible your browser has already recorded the data for the autocomplete (as it seems by the image at least), which could mean the browser no longer tries to find anything. Try renaming all the fields and the form (just to test it out, of course) and see if your browser inquires you to save the form data upon submission.
<!DOCTYPE html>
<html>
<head>
<title>Log in Page</title>
</head>
<body>
<form action="login.php" method='post'>
<p><strong>Login Page </strong></p>
<p>Username:<input name="username" type="text" ></p>
<p>EmailAddress:<input name="email" type="text" autocomplete="on"></p>
<p>Password:<input name="password" type="password""></p>
<p><input type="submit" name="Submit" value="Login"></p>
</form>
</body>
</html>

Related

Browser Extension - How do I stop autofocus from going to the address bar?

I have a browser extension which replaces the new tab page with a page that has a nice background and a search bar. Using the search bar takes the user to google and searches for the query (in the same tab). For some reason, when using the extension version, the autofocus doesn't go into my search form and instead goes into the address bar. I can't for the life of me figure out why. Did I muck this up someplace? This is my search form:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search</title>
<link rel="stylesheet" type="text/css" href="popup.css" />
</head>
<body>
<div id="searchContainer">
<form action="http://google.ca/search" method="GET" >
<input id="field" type="search" name="q" size="20" placeholder="Google Search" autofocus />
<input id="submit" name="submit" type="submit" value="Search" />
</form>
</div>
</body>
</html>
Thank you!
This is hard-coded in Chrome to match behavior of the built-in newtab.
It can't be changed but an official workaround is to redirect via location to another URL. The address bar will show a full chrome-extension:// URL though.
manifest.json:
"chrome_url_overrides": {
"newtab": "focus.html"
},
focus.html:
<script src=focus.js></script>
focus.js:
location = 'start-focused.html';
start-focused.html will have the actual contents of your newtab UI.

How to create html form that directly goes to specific search on a website?

I know that the code below will go to the result page of google when the user types some texts and the submit button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<title>
Hello!
</title>
</head>
<body>
<form action="https://www.google.com/search" method="get">
<input name="q" type="text">
<input type="submit" value="Submit Form">
</form>
</body>
</html>
But I try this with https://www.jitta.com/. It does not seem to have the same structure as google.
When searching on this website the url will be https://www.jitta.com/stock/bkk:ptt where "ptt" is the word that I want to search. Unlike google, if I want to search "ptt" the url will be https://www.google.com/search?q=ptt.
Can it be only HTML code? no other parts involved (like Javascript,...)
Appreciate anyone who answers this.

Accept only one or more files in html form

I use these codes for creating a form which accept one or more files. not zero files.
<form id="uploader">
<input type="file">
<button type="submit"></button>
</form>
but it's not working. How can I do that?
Use required and multiple attributes in your input field.
<input type="file" required multiple>
Example:
<form id="uploader">
<input type="file" required multiple>
<button type="submit">Submit</button>
</form>
To select multiple files, hold down the CTRL or SHIFT key while selecting.
use multiple attribute.
<html>
<head>
<meta charset="utf-8">
<title>Problem</title>
</head>
<body>
<!-- Insert form here -->
<form id="uploader">
<input type="file" multiple>
<button type="submit"></button>
</form>
</body>
</html>

Building a login page

Does anyone have a good start for a simple front end html login? I am pretty new with html and coding in general. Also how do I connect the login with my other work such as the database?
<html>
<head>
<title>
Login page
</title>
</head>
<body>
<form name="login">
Username<input type="text" name="userid"/>
Password<input type="password" name="pswrd"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
</body>
</html>
that is just a pretty simple login form with no css to it, but I would just go to bootstrap and use their login form at http://getbootstrap.com/examples/signin/

IE9 form= attribute not working

I have multiple forms on a complex page with fields separated by considerable intervening HTML. In firefox and chrome, I can declare a form and close it, then put a form="xxx" attribute in the fields to be associated with the form. This does not appear to work in IE9.
Here is a simplified example:
<?php
if (isset($_POST["field1"])) echo "Field1: " . $_POST["field1"] . "<br>";
if (isset($_POST["Btn1"])) echo "Btn1: " . $_POST["Btn1"] . "<br>";
if (isset($_POST["Btn2"])) echo "Btn2: " . $_POST["Btn2"] . "<br>";
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<link rel="stylesheet" href="css/normalize.css" media="all">
<!--[if lt IE 9]>
<script src="js/html5shiv-printshiv.js" media="all"></script>
<![endif]-->
</head>
<body>
<form id="form1" action="Test.php" method="POST"></form>
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</body>
</html>
I have tried adding
< meta http-equiv="X-UA-Compatible" content="IE=9" >
... no change.
... anybody else run across this "feature" and how do I fix it?
There does not seem to be any information about support to the form attribute in Microsoft’s info on support to HTML5 forms. A quick test suggests that even IE 10 does not support it.
So consider simplifying the structure. Intervening HTML should not be a problem, as long as your are not trying to overlap or nest forms.
The form attribute is an HTML5 addition. It won't work in browsers too old to support HTML5.
You need to close the form tag after the fields, it should look like this:
<form id="form1" action="Test.php" method="POST">
<input type="text" form="form1" id="field1" name="field1" value="text input">
<button type="submit" form="form1" id="Btn1" name="Btn1" value="Btn1" title="Btn1">
Btn1</button>
<input type="submit" form="form1" id="Btn2" name="Btn2" value="Btn2" title="Btn2">
</form>
Add also labels to each field to make the form accessible.