I have an HTML form with 3 simple inputs and a submit button like this:
<form action="foo.php" method="post" id="form" name="form" target="_blank" autocomplete="on">
<input type="text" value="" name="firstname" id="firstname" placeholder="First Name" autocomplete="firstname" />
<input type="text" value="" name="lastname" id="lastname" placeholder="Last Name" autocomplete="lastname" />
<input type="email" value="" name="email" id="email" placeholder="Email Address" autocomplete="email" />
<input type="submit" value="Submit" name="send" />
</form>
When I click on the First Name input though and select the First Name to auto-complete, the browser doesn't complete the rest of the form (Last Name and Email). Using the Latest Chrome build: 90.0.44
Is that an expected behavior? How can I make the browser to autofill the whole form?
There is a description of autocomplete attributes here. MDN web docs - autocomplete.
"given-name"
The given (or "first") name.
"family-name"
The family (or "last") name.
email is the correct identifier for it tho. try correcting the others and see if that works for you.
Related
Im working on one of my 5 projects in the freecodecamp Responsive Web Design course (the survey project) and I am trying to use the built in required function in html5 in my email input but it isn't working, when I click enter rather than giving the little popup asking for a valid email address with an # in it, nothing happens at all. Im a very new developer so humor me if im asking a dumb question but I can't seem to figure it out on my own.
HTML:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" required>
</form>
Normally validation doesn't run unless you try to submit the form.
Add a submit button after your input element and try the same code. The end result could be something like this:
<form id="survey-form">
<label for="name">Full Name</label>
<input type="text" class="form-inputs" id="name" name="firstname" placeholder="Enter Name Here">
<label for="email">Email</label>
<input type="email" class="form-inputs" id="email" placeholder="Enter A Valid Email Adress" name="email" required>
<button type="submit">Submit Me</button>
</form>
If you require to send the form to a specific file to do the submission process you could add an action attribute to the form tag but from what you are saying that's outside of what you're currently studying.
EDIT based on Tieson T.'s comment
I added the name="email" to the email input in the code example.
This is login form
<form method="post">
<input name="username" type="text" />
<input name="password" type="password" />
</form>
After login and save password by Browser, i go to users manage page
<form method="post">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="password" type="password" />
</form>
This page, browser show password and username by default to name and password
How fix it ?
https://i.stack.imgur.com/uniJY.jpg
https://i.stack.imgur.com/7ZbTJ.jpg
Use different names in input tag
How do you disable browser Autocomplete on web form field / input tag?
Used autocomplete attribute of tag.
read this link:https://www.w3schools.com/tags/att_form_autocomplete.asp
Autocomplete. autocomplete="off|on".
"When autocomplete is on, the browser automatically complete values based on values that the user has entered before." link
<form method="post" autocomplete="on">
<input name="email" type="text" />
<input name="name" type="text" />
<input name="psw" type="password" />
</form>
You shouls also use different input names.
I have this form in html5:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required/>
<input id="lname" name="lname" type="text" value="" required/>
<input id="submit" name="submit" type="submit" value="" />
</form>
Sometimes i receive empty fields. Can you tell me why?
It is best practice to include the aria-required attribute too:
<form method="post" action="form.php" >
<input id="fname" name="fname" type="text" value="" required aria-required=”true” />
<input id="lname" name="lname" type="text" value="" required aria-required=”true” />
</form>
Note that older browsers may not support support these attributes. On any browser that doesn't support these attributes, front-end form validation could still be achieved through javascript. You can learn more about javascript form validation here.
Remember it is important to validate input on the server too.
You can't make yours constraints only on the client side. Anyone can send a POST request to your server without using your form easily.
It's possible with all recent browsers to edit the DOM and remove the required part too.
HTML5 Validations are great for helping users but it's not for security/checking.
Sometimes in my web application even I declare form autocomplete is off sometimes its not working and it autocomplete I typed in my inputs.
Can anyone know how to solved this kind of problem.I use chrome by the way.
sample of my code: sometimes its autocompleting my inputs even I declare turn off already..
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name">
<input autocomplete="off" type="text" name="age">
<input type="submit" >
</form>
<form autocomplete="off" method="post">
<input autocomplete="off" type="text" name="name" value="">
<input autocomplete="off" type="text" name="age" value="">
<input type="submit" >
</form>
The solution is simple and working perfectly in all browsers.
Add disabled and autocomplete="off" attribute to the form fields( name, age, etc.)
<form method="post">
<input disabled="disabled" autocomplete="off" type="text" class="name" name="name">
<input disabled="disabled" autocomplete="off" type="text" class="age" name="age">
<input type="submit" >
</form>
On Page Load enable the fields after few miliseconds.
use the below JS CODE
function getRidOffAutocomplete(){
var timer = window.setTimeout( function(){
$('.name, .age').prop('disabled',false);
clearTimeout(timer);
}, 800);
}
// Invoke the function
getRidOffAutocomplete();
This isn't a bug - autocomplete isn't supported by Chrome any more. It's a design decision by their developers and you should design for it rather than attempting to work around it. See my answer to this very similar question.
My form is attached below, and I have tried many things I've found in other forums, but to no avail. I cant get the browser to prompt a 'Save Password'. Where am I going wrong. Hope someone can help. Thanks.
<form id="frmlogin" action="/index" method="post" enctype="application/x-www-form-urlencoded" autocomplete="on">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="landing_username" name="username" type="text" value="" name="username" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="landing_password" name="password" type="password" value="" name="password" />
<submit id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn">Login</submit>
</form>
Try to clean the HTML a bit, maybe it helps:
<form id="frmlogin" action="/index" method="post">
<label id="landing_username" class="required" for="username">Username/Email</label>
<input id="username" name="username" type="text" />
<label id="landing_password" class="required" for="password">Password</label>
<input id="password" name="password" type="password" />
<input id="loginbtn" onclick="LoginFun()" type="submit" name="loginbtn" value="Login" />
</form>
the form attribute enctype is by default application/x-www-form-urlencoded so you don't need to specify it
the labels for attribute should contain the id, not the name of the associated input
element IDs should be unique
the attribute name is defined twice for both password and username
the attribute autocomplete is by default on
the input value is not required, so you don't need to add it to the inputs with an empty string
the submit button should be an input of type submit
Some of these changes are only optimizations and the code could work fine without them, but others, such as ensuring the unique id of each tag, are fixes and they are strongly recommended even if the browser displays the form properly.