I want to set autocomplete attribute to off for all the input elements in Angular 5 application.
for one input element, I am doing it like this :
<input type="text" id="myInput" autocomplete="off"style="max-width: 170px;">
I want to achieve this for all the input elements. Is there any way I can do this globally ?
Assuming that your input element inside form than you could use:
<form action="/" method="get" autocomplete="on">
First name:<input type="text" name="fname"><br>
E-mail: <input type="email" name="email"><br>
<input type="submit">
</form>
Syntax:
<form autocomplete="on|off">
Related
I have iron-form and paper-input type='text' with value binding, required attribute and error-message attribute.
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input type="text" label="[[part.label]]" value="[[part.value]]" name="[[part.key]]" required error-message="Invalid input!"></paper-input>
</form>
Validation works just fine and I see my error-message BUT if I set readonly attribute to my paper-input validation stop working.
<form is="iron-form" id="form" method="post" action="/form/handler">
<paper-input type="text" readonly label="[[part.label]]" value="[[part.value]]" name="[[part.key]]" required error-message="Invalid input!"></paper-input>
</form>
Logically speaking this is a bug because required attribute is still set but no validation happens.
I still want validation to work even with readonly attribute.. How to do that?
[EDIT] This is by design: HTML 5 Spec
Constraint validation: If the readonly attribute is specified on an input element, the element is barred from constraint validation.
[ORIGINAL] It seems to be a native issue (or non functionality), this will also fail:
<!DOCTYPE html>
<html>
<body>
<form>
First name:<br>
<input type="text" required readonly name="firstname">
<br>
Last name:<br>
<input type="text" required name="lastname">
<input type="submit">
</form>
<p>Note that the form itself is not visible.</p>
<p>Also note that the default width of a text input field is 20 characters.</p>
</body>
</html>
I have a form like this. I want to know that will the form submission work if the is placed in the middle of the text fields?
For example:
<input type="text" name="fname"> // First Name
<input type="text" name="lname"> // Last Name
<form method="post" action=""> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
Will the submission work for First Name and Last Name field as the is after them so they do not come inside the form.
Your form elements (like your input boxes) have to be between an opening <form> and a closing </form> tag. So your fname and lname will be ignored. (Your closing </form> is missing, too.)
Why do you have to add your form elements between form tags? This allows you to add multiple forms to one page. To identify which element contains to which form, they have to be between the form tags.
Example "Login & register on the same site":
<form method="POST" action="login.php">
User: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" value="Login">
</form>
<form method="POST" action="register.php">
Mail: <input type="text" name="email">
User: <input type="username" name="username">
Password: <input type="password" name="password">
Repeat password: <input type="password" name="pwdagain">
<input type="submit" value="Register">
</form>
Refer this site for further information: http://www.w3schools.com/html/html_forms.asp
First name and last name will not post. Username and password will post but u have to close form tag first.
If you transform you code like this it will post all :
<input type="text" name="fname" form="my_form_id"> // First Name
<input type="text" name="lname" form="my_form_id"> // Last Name
<form id="my_form_id" method="post" action="#"> // Post
<input type="text" name="username"> // Username
<input type="text" name="password"> // Password
<input type="submit" value="Submit"> // Submit Button
</form>
#shubham-jha If you want multiple submit buttons under a single form, you may use AJAX.
Create a JavaScript function on click, decide to which URL you want to send this data and then change form action using jQuery, then submit using JavaScript.
Jquery to change form action
There is some news on this front, it seems.
MDN has this for you to review
form HTML5
"The form element that the input element is associated with (its form owner). The value of the attribute must be an id of an element in the same document. If this attribute is not specified, this element must be a descendant of an element. This attribute enables you to place elements anywhere within a document, not just as descendants of their form elements."
Perhaps you can still achieve what you wished for. Only question then, is what browser support you must have.
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.
I'm trying to use "form" attribute for html5 input as described here:
[1] http://www.w3schools.com/html5/att_input_form.asp
[2] http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_input_form
The description of the attribute says that form attribute:
"Specifies a space-separated list of id's to one or more forms the element belongs to"
I'm testing this by using the code below in W3C's TryIt editor (link 2 above)
<form action="demo_form.asp" id="form1">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
<form action="demo_form.asp" id="form2">
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1 form2" />
I supplied "string_for_form2" in form2 and "lastname" in the lname field. I'm getting the output as:
fname=string_for_form2
instead of
fname=string_for_form2&lname=lastname
Any ideas why the result is not as expected ? I've tried on Firefox 17 and Chrome 23.
Thanks
Because you're trying to assign two form owners.
"A form-associated element is, by default, associated with its nearest ancestor form element (as described below), but may have a form attribute specified to override this."
http://www.w3.org/TR/html5/forms.html#association-of-controls-and-forms
This attribute just allows markup flexibility, it doesn't change the form ownership paradigm from the previous spec.
I could not find anything in the W3C HTML5 specification to support the statement on the www.w3schools.com site that input element can belong to 2 or more forms. The input element's owner is always mentioned in singular and never as a list.
Furthermore on developer.mozilla.org there is explicit statement about the input association with one form only. The description of the form attribute states:
form: A string indicating which element this input is part of.
An input can only be in one form.
An input field can only be on one form. It is better to include it within the form scope, for clarity.
Use also name instead of only id on your forms. Although html5 supports it, what with older browsers? What with IE?
<form action="demo_form.asp" name="form1" id="form1">
<form action="demo_form.asp" name="form2" id="form2">
use javascript and name form on submit
<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
<form action="demo_form.asp" onsubmit= 'this.id="form1"'>
First name: <input type="text" name="fname" /><br>
<input type="submit" value="Submit" />
</form>
Last name: <input type="text" name="lname" form="form1" />
Why is it that the s:textfield is placed on bottom when I insert it in between other HTML elements inside a form?
How can I fix this?
<label><span class="required">*</span>First name</label>
<input type="text" id="firstName" name="firstName" value=""><br>
<div>
<s:select id="selectDrop" list="list" name="list"/>
</div>
<label><span class="required">*</span>Last name</label>
<input type="text" id="lastName" name="lastName"><br>
Result on browser:
First Name
Last Name
"The drop down element"
Ok I actually was able to solve by adding the them="simple" in the s:form element.
<s:form id="registrationForm" action="/registration/.action" method="post" theme="simple">
I guess if I don't add them property Struts2 UI components add their own stylesheet and therefore get weir behavior.