I have a contact form and I want the descriptions of the fields inside the input field. If I add the description by "value" I got the problem that this value will be send and an other problem is that this value will not be hide if I click inside the input field.
Is there any easy solution?
Thats the simple input field I talking about: jsfiddle.net/gefxo2s3/
<input type="email" name="email" id="email" class="textinput" value="Your E-Mail">
The HTML5 placeholder attribute
<input type="email" name="email" placeholder="Your Email">
is what you are looking for. Works in most browsers [browser support stats], but there are polyfills for those browsers that don't support it. I suggest this one
Related
I am creating a razor component and it has following field
<InputText type="password" class="form-control" placeholder="New Password" name="password" id="newPw" autocomplete="off" />
When the build is executed and run in Chrome. I see a list of suggested passwords. I don't want this list to be shown. The image is given below
Image of list of password being shown
How can I disable this? In autocomplete attribute. I have also used new-password but it still doesn't hide the list
Regards
Saad Saeed
It's weird, I know. If you give it an ID, it won't ask.
<InputText id="dummyid" type="password" class="form-control"
placeholder="New Password" name="password" id="newPw" autocomplete="off" />
When Blazor components map to a specific html element such as form or input you can usually include html elements.
For a single input you can add autocomplete="off"
<InputText autocomplete="off" ...other stuff.../>
Or you can disable it at form level like so
<EditForm autocomplete="off" ...other stuff...>
I am using the following code to prevent value to be retained in the email field when I am pressing the back button on Edge browser.
<form>
<input autocomplete="off" type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
<form autocomplete="off">
<input type="email" name="email" value="" id="Email123" placeholder="email" />
</form>
When I make use of autocomplete="off" in the form tag, it is of no use and the code does not work. Same is the case with input tag. The code is not working in either case.
How do I clear the email field when I click the back button on Edge browser?
You could empty it in JS when the page loads.
document.getElementById('Email123').value = '';
this will only remove the autofilled text and not the default styles that go along with it on the input.
Try to set autocomplete to a random invalid string value, like autocomplete="nope"
Source: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
As I visit many new websites for the first time, I see that:
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
For other websites, putting my cursor in the email field does not give me any email options. And, I have to manually type every letter of the email.
I couldn't find what piece of code differentiates the two cases. For my website, I am stuck with #2. I am trying to achieve #1, where user can just re-use emails entered in other websites.
I used some code like this:
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="email">
It seems that you want to enable autocomplete, but you have specified the wrong attribute.
SYNTAX:
Autocomplete="on | off"
In order to save the email address entered for the first time though, you need to have a form tag with the attribute method="POST" on it. It is also recommended to use the autocompletetype attribute to help the browsers populate the forms more accurately.
NOTE: In some cases on older browsers you may also need to add an action if the form doesn't have one. action="javascript:void(0)" works.
An example with autocomplete on and method="POST":
<form method="POST" action="javascript:void(0)">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="on" autocompletetype=”email”>
<input type="submit">
</form>
An example without autocomplete and method="POST":
<form>
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required autocomplete="off">
<input type="submit">
</form>
See also How to trigger Autofill in Google Chrome?
Difference is in autocomplete attribute of input element.
Syntax : <input autocomplete="">
It allows the browser to automatically filled the input field based on the previously filled data.
Hence, In #1 value of autocomplete attribute should be on.
DEMO
E-mail: <input type="email" name="email" autocomplete="on">
In #2 value of autocomplete attribute should be off.
DEMO
E-mail: <input type="email" name="email" autocomplete="off">
The answers so far are wrong/outdated or incomplete.
Using autocomplete="email" is perfectly valid. But the browsers do not handle it very well at the moment. In Firefox and Chrome, only the name attribute is used for autocompletion. So you should stick with name="email".
If the Chrome user really wants to have a proper autocompletion for every type that autocomplete supports, he/she has to fill out the Autofill settings. After these settings are filled, the autocompletion does not depend on the name attribute anymore, but uses the type of autocomplete. I.E. it will suggest the user's email address for fields with autocomplete="email".
So in order to have the best browser support, you should keep <input name="email" autocomplete="email" [...]>. As soon as there has been at least one submitted form with name="email" or prefilled Autofill settings, the browser should actually autocomplete your input field.
Further Resources:
caniuse: autocomplete attribute: on & off values
caniuse: input[autocomplete] (values besides on/off)
For some websites, putting my cursor in the email field of signup form immediately shows me email options from what I had entered in other websites.
I cannot reproduce that on the latest Chrome on Mac OS X. You actually have to doubleclick the input for the autocompletion to show up.
The correct values for the autocomplete attribute is "on" or "off" as you can see at : https://www.w3schools.com/Tags/att_input_autocomplete.asp
Use autocomplete="on" in form tag. like below.
<form action="" method="post" autocomplete="on">
<input type="email" name="email" id="frmEmailA" placeholder="name#example.com" required>
<input type="submit" value="Submit">
</form>
I have a login for like this:
As you see, my username and password are saved in those inputs. I want to know, is that possible to disable saving password property of the browser by JS or HTML or whatever?
Note: Using autocomplete attribute isn't useful to do that:
<form autocomplete="off" ...>
<input name="username" placeholder="Email" type="email" autocomplete="off" />
</form>
As you see, both the form and the input have autocomplete="off" attribute, but still saving password happens.
I am creating a sign up form in PHP. Every time I click on sign up button the browser asks to save the email and password. How can I stop this?
As of April 2016, this is browser-level behaviour and the user's reponsibility to control.
Two things you can do are:
You can inform the user on how to prevent this message displaying and
File a complaint with the browser devleopment team to urge them to change the behaviour. If enough people want it changed then it will be changed.
You can use autocomplete="off" on input fields like this
<input type="text" name="Username" autocomplete="off">
<input type="password" name="Password" autocomplete="off">
or on the form tag. May not work on all browsers.
Please refer to http://caniuse.com/#search=autocomplete on supported browsers.
This code solves my issue. I have just add
readonly onfocus="this.removeAttribute('readonly');"
besides
autocomplete="off"
And input should look like this
<input type="text" name="UserName" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
<input type="password" name="Password" autocomplete="off" readonly
onfocus="this.removeAttribute('readonly');" >
Add attribute autocomplete="off" in form tag
-----