In most HTML forms when I start typing something (say birth date) navigators propose to sit with previous similar entries. For instance on html form submit the second visit offers me the first visit entries.
However, when using a bootstrap modal containing a form, the same does not happen, for instance: with a form inside.
I do not want to use jquery autocomplete since I do not have a list of potential answers, I just want to have the same behavior in and outside modals.
Thanks.
Browser autofills are notoriously unpredictable - they make educated guesses about the data based on the name attribute of inputs. It's unlikely you'll be able to get this behavior consistently cross-browser.
can you try this :
add the attribute autocomplete = "on" on your form,
maybe it will do the job.
<form action="demo_form.asp" 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>
source: http://www.w3schools.com/tags/att_input_autocomplete.asp
Read through this article it should help get things working for you.
Example:
<input type="text" id="name" name="name" autocomplete="name">
<input type="tel" id="tel" name="tel" autocomplete="home tel">
Related
I have a very basic form where I ask user's name, mobile, email. I have enabled autocomplete provision in these fields using the following code:
<label for="frmNameA">Name</label>
<input name="name" id="frmNameA" placeholder="Full name" required autocomplete="name">
<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA" placeholder="+1-650-450-1212" required autocomplete="tel">
Here is the fiddle. Currently, the user has to focus on these elements and then it displays the suggestions. Is there any way by which we can prefill this data once the form is loaded? We want to prefill the 1st suggestion that comes in the autocomplete and not some hard coded value.
Also, I saw websites like facebook, twitter etc. using only autocomplete and not prefilling the data - is there any specific reason to not prefill the things?
The autocomplete attribute specifies whether a form should have autocomplete on or off.
When autocomplete is on, the browser automatically complete values based on values that the user has entered before.
<form action="/action_page.php" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
You can store user values into the localStorage at completion, then load this values on page load.
This way, no need to hardcode datas, neither store server side.
// Store
localStorage.setItem("userconfig",mail.value)
// Fill data
onload = (function(){
mail.value = localStorage.getItem("userconfig")
})
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 prevent the browser giving me recommendations when I type into an input box. For example, if I type 'a' it will give me a list of items beginning with'a' that I have typed into an input box in my browser in the past.
I have tried autocomplete="false" but this doesnt work as far as I can tell. Autocomplete must be different to what I am looking for.
Perhaps it is a browser setting that cannot be controlled by the developer. Does anyone know if there is a way to do this?
It is working for me on this codepen link. It doesn't display prediction for email field, but it does show prediction for first name and last name field.
If it doesn't work for you then it must be your system software causing this. I'm using Chrome on Linux.
<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>
http://codepen.io/piyushpatel2005/pen/aJQaNN
I am trying to use multiple patterns for an input-field in HTML5.
<input type="text" pattern="\d*.{5,10}" name="plz">
My current input field does not work. Only the second pattern .{5,10} is relevant for the submit. The first attribute \d* hast no effects.
Try the below:
<input type="text" placeholder="" class="form-control" pattern="([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{4})([0-9]{1})">
and just accept AESE640526HOCCNL05...
Hope this can help you.
If I go visit my website, the page immediately scrolls to the first input in the contact form page, rather than display at the top of the page. I could probably set the scrollTop in a jquery script to fix it but I would rather get a solution that would work without manipulating the page using jquery or javascript. Can anyone explain this behaviour or how to fix it?
site: http://danmacmill.host22.com/
Remove the autofocus part of that input, and that problem is gone.
It's because you have autofocus on <input name="name"/>. Try removing it.
I think this will cause you the problem
<form action="demo_form.asp">
First name: <input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
but if you use it this way it will solve your problem
<form action="demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit">
</form>
Check this out
Remove autofocus property:
<span>Name*:</span>
<input name="name" placeholder="Please enter your name" type="text" tabindex="1" required autofocus>
It is because of the autofocus parametter you have on that input. You must remove it or manipulate with js