To turn off autocompletion in HTML I use:
<input type="text" name="foo" autocomplete="off" />
But this forces me to specify autocomplete="off" in every input field of my application. Is it possible to define autocomplete="off" in a CSS style?
You can just apply it to the form tag.
Using CSS you cannot achieve it. You can use client side script for example using Jquery
$('input').attr('autocomplete','off');
If you are not using Jquery or scripting language then you have to stick to HTML only.
As TeT Psy said you can apply it in form tag like
<form id="Form" runat="server" autocomplete="off">
you can disable all the autocompletes using form
<form id="Form1" runat="server" autocomplete="off">
U can use autocomplete="off" attribute on form tag. Like
<form id='test' autocomplete="off">
<input ...
<input ..
...
</form>
You can set it on form element if you wants to set autocomplete: off for all input elements of form. And if wants to make it on for some selected input you can apply autocomplete: on on that input.
.form {
padding: 30px 0;
width: 300px;
margin: 0 auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form action="#" class="form" autocomplete="on">
<div class="form-group">
First name:<input type="text" class="form-control" name="fname">
</div>
<div class="form-group">
Last name:<input type="text" class="form-control" name="lname" autocomplete="off">
</div>
<div class="form-group">
E-mail: <input type="email" class="form-control" name="email">
</div>
<input type="submit">
</form>
No you can't do this using css, but there are 2 other ways to do it:
1- you can apply it for the form
<form autocomplete="off" >
<input type="text" name="name">
<input type="text" name="mail">
</form>
2- you can handle it using js
var eles = document.getElementsByTagName('input');
for(i=0; i<eles.length; i++){
eles[i].setAttribute("autocomplete", "off");
}
https://jsfiddle.net/ng1mb77m/1/
Related
<form class="form-1">
<label for="username" class="label1"> Username:</label>
<input
type="text"
name="username"
placeholder="eg Herny Hart"
id="name-input"
required>
<label for="email" class="label2"> Enter your Email: </label>
<input
type="email"
name="email"
placeholder="hernyhart10#gmail.com"
id="email-input"
required>
<label for="number">2fa Verification If required:</label>
<input
type="text"
name="number"
placeholder="239578"
id="2fa-input">
<label>
<div>
<input id="submit" type="submit" value="Login">
<input id="submit2" type="submit" value="Sign-up">
</div>
</form>
I don't know if it is ok to put a div container inside a HTML5 form container or is it wrong.
Am new to coding i need help to complete my animation project
Use MDN for questions like this. For this case, see here, and find the "Permitted content" section:
Permitted content: Flow content, but not containing <form> elements.
If you then click "Flow content" and read through the list, you'll see that div is listed as "Flow content":
. . .
<dfn>
<div>
<dl>
. . .
So yes, divs are allowed inside of forms.
It is completely fine to put a DIV inside of a form.
You can validate your HTML code by uploading it in W3C validator, keep the link, and it will be helpful for future, run every time if you are hesitating.
https://validator.w3.org/#validate_by_upload
Yes, div can a part in a form also. For example:
<html>
<head>
<title> div</title>
<style>
body{
background-color:lightgreen;
}
</style></em>
</head>
<body>
<form action="">
<div><label for=" abc">name
<input type="text" placeholder="Enter your name" value="">
</label></div>
</form>
</body>
thats my code
<form class="contactForm">
<label> Your name
<input type="text" name="name" placeholder="Your name">
</label>
</form>
I want my input element to be shown beneath my label element. Thought its a problem of block element but when i style in css input or label to be shown as a block nothing happens. Thanks for help
While the label can be setup that way, try making it the input's sibling instead of parent. Also, give it the for attribute to match an input's name attribute.
<form class="contactForm">
<label for="name">Your name</label>
<input type="text" style="display:block" name="name" placeholder="Your name">
</form>
Once the label is being used like this, you can see display:block works as intended. Just want to add: in a final solution it's poor practice to use style tags directly, and I recommend creating easy to understand CSS classes.
Hope that helps.
A <span> with display: block set on it should do the trick - and, unlike using a <div>, it's valid HTML. Just make sure the parent label isn't still set to display: inline - which is default.
Example:
label,
label > span {
display: block;
}
<form>
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
Would a <br /> work?
<form class="contactForm">
<label> Your name
<br />
<input type="text" name="name" placeholder="Your name">
</label>
</form>
<form class="contactForm">
<label> Your name
<input style="display:block;" type="text" name="name" placeholder="Your name">
</label>
</form>
The text in the label doesn´t have a tag. If you add a <span>, you can add some style to that.
label span{
display: block;
}
<form class="contactForm">
<label>
<span>Your name</span>
<input type="text" name="name" placeholder="Your name">
</label>
</form>
You just have to use the input fields within div
<form class="contactForm">
<label> Your name </label>
<div>
<input type="text" name="name" placeholder="Your name">
</div>
</form>
is there any way in angular 2 to pick name/id of input inside divs?
html:
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input type="text" name="firstName"/>
<input type="text" name="firstName"/>
</fieldset>
</div>
component:
function(str){this.var=str}
Not sure if template variables of child elements can be accessed
<div class="form-pages" (click)='function(input1.value, input2.value)'>//if it's possible then what should I put into function param?
<fieldset>
<input #input1 type="text" name="firstName"/>
<input #input2 type="text" name="firstName"/>
</fieldset>
</div>
If this doesn't work you can use
<div class="form-pages" (click)='function()'>//if it's possible then what should I put into function param?
<fieldset>
<input #myinput type="text" name="firstName"/>
<input #myinput type="text" name="firstName"/>
</fieldset>
</div>
#ViewChildren('input') inputs:QueryList<ElementRef>;
myFunction() {
let inputs = this.inputs.toArray();
console.log(inputs[0].value;
console.log(inputs[1].value;
}
Ok, I did it alone, thanks for previous answer, but for me it works well, It's needed to call $event.target.name method which will return name of clicked target.
<div (click)="setFocus($event.target.name)">
<input type='text' name='input1 />
<input type='text' name='input2 />
</div>
in componentsetFocus(str){this.var = str)
i need a twitter bootstrap form with input text boxes on the same line, but its labels must be on the top of input boxes.
So far i have:
<form action="#">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
http://jsfiddle.net/A8RaG/
So i need inputs on the same line and labels must be on the top of each input.
How do i do that?
Another solution is putting a div around each label/input combination and setting the css to float left
HTML
<form action="#">
<div>
<label for="city">City</label>
<input type="text" id="city"/>
</div>
<div>
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
CSS
form div{
float: left
}
jsFiddle
you can put a div around each label and block, and in the css put this div in inline-bloc
like :
<form action="#">
<div class = "css">
<label for="city">City</label>
<input type="text" id="city"/>
</div><div class="css">
<label for="street">Street</label>
<input type="text" id="street"/>
</div>
</form>
and in the CSS:
.css{
display : inline-block;
}
You could also just use <br />. It will work for a form as well.
If you use Bootstrap you need to use the css of bootstrap !
Use class="form-horizontal" or class="form-inline"
You can try this with no css added :
<form action="#" class="form-horizontal">
<label for="city">City</label>
<input type="text" id="city"/>
<label for="street">Street</label>
<input type="text" id="street"/>
</form>
Simple no ?
I have a simple login form:
<form action="/users/login" class="form-inline" id="UserLoginForm" method="post" accept-charset="utf-8">
<div style="display:none;">
<input type="hidden" name="_method" value="POST"/>
</div>
<input name="data[User][email]" class="input-small" placeholder="E-mail" maxlength="50" type="text" id="UserEmail"/>
<input name="data[User][password]" class="input-small" placeholder="Password" type="password" id="UserPassword"/>
<button class='btn' type='submit'>Login</button>
</form>
It is using bootstrap for styling. As for js jquery and AngularJS is loaded.
My issue is, when I display this form my submit button goes to the next line. If I inspect dom I see an <div class="actions">...</div> wrapper around my submit button. This does not happen if I omit type='submit' part from the form definition.
My question who is adding this wrapper and how can I avoid it.
If you see the examples of Twitter Bootstrap, I can see they are using two classes for form-inline example. Please check this. fro different types and form with buttons. Try applying well class along with it.
<form class="well form-inline">
<input type="text" class="input-small" placeholder="Email">
<input type="password" class="input-small" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</form>