I want my web page to display a check box inside the password field. User clicks on the check box and see the password as text. On un-check, its password again.
This is what I want. This is from the Ebay website login page.
This is what I am getting
I want this checkbox inside the password field. I could not find anything online on this topic.
Here is my code :
<!-- Set a password for the account -->
<div class="col-md-12" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
</div>
<input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
Just add CSS and move your checkbox to one group div with input text.
See the example
#eye {
position:absolute;
right:50px;
top:6px;
}
Click Here
This would be the solution.
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" /></span>
</div>
input#eye {
position: absolute;
right: 10px;
top: 10px;
}
#reg_password.form-control.input-lg {
position: relative;
}
.parent{position:absolute;}
<!-- Set a password for the account -->
<div class="col-md-12 parent" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" /> <input type="checkbox" id="eye" onclick="if(reg_password.type=='text')reg_password.type='password'; else reg_password.type='text';" />
</div>
.text-container {
display: inline-block;
position: relative;
overflow: hidden;
}
.btn {
position: absolute;
top: 10px;
right: 10px;
transition: right 0.2s;
}
<div class="col-md-12 text-container" style="margin: 7px;">
<input type="password" id="reg_password" name="reg_password" style="height: 35px;" class="form-control input-lg" placeholder="Password" ng-model="register_password" />
<span id="btn" class="btn"><input type="checkbox" id="password" /></span>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#password").click(function () {
if ($("#reg_password").attr("type")=="password") {
$("#reg_password").attr("type", "text");
}
else{
$("#reg_password").attr("type", "password");
}
});
});
</script>
Related
I'm trying to set up my form so that the text input is on one side, and two buttons take up the rest of the side, one on top and the other on the bottom.
I've tried to use br, but this has not done anything. I'm also doing this on Angular 7.0 if it matters.
HTML
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
CSS
.form {
display: flex;
}
.form input[type='text'] {
flex: 10;
padding: 5px;
height: 40px;
}
.form input[type='submit'] {
flex: 2;
height: 20px;
display: block;
}
.form input[type='reset'] {
flex: 2;
height: 20px;
display: block;
}
Currently, all three are side by side, like this. I want the two buttons to be on top of each other.
If you don't want to change your markup, you can use display: grid.
form {
display: grid;
grid-template-areas: 'form topbutton' 'form bottombutton'
}
input[type="text"] {
grid-area: form;
}
input[type="submit"] {
grid-area: topbutton;
}
input[type="reset"] {
grid-area: bottombutton;
}
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</form>
A more solid solution may use flexbox:
div.row {
display: flex;
width: 100%;
/* you may add height if you need it */
/* height: 125px; */
}
div.row > * {
flex: 1 1 80%;
}
div.row > .buttons {
flex: 1 1 20%;
display: flex;
flex-direction: column;
}
div.row > .buttons > * {
flex: 1 1 auto;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="row">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
<div class="buttons">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</div>
</form>
Add display: block to your input elements to have them occupy a new line.
You can also divide the elements into two columns by wrapping the desired elements in <div> classes (in this case of .left and .right), and floating them both to the left.
This can be seen in the following:
.left, .right {
width: 50%;
float: left;
}
.right input {
display: block;
}
<form class="form" (ngSubmit)="onSubmit()">
<div class="left">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo">
</div>
<div class="right">
<input type="submit" value="Submit" class="btn">
<input type="reset" value="Reset" class="btn">
</div>
</form>
I've never used Angular, but I usually use two br afterward with html and it works fine, alternatively you could use css to manually change the location of each element with style and margin (top,left,etc.). ie: like so:
br example:
<form class="form" (ngSubmit)="onSubmit()">
<input type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input type="submit" value="Submit" class="btn"><br><br>
<input type="reset" value="Reset" class="btn"><br><br>
</form>
css example:
<form class="form" (ngSubmit)="onSubmit()">
<input style=margin-top:90px type="text" name="title" [(ngModel)]="title" placeholder="Add Todo"><br><br>
<input style=margin-top:100px type="submit" value="Submit" class="btn"><br><br>
<input style=margin-top:110px type="reset" value="Reset" class="btn"><br><br>
</form>
I use angular 6 and angular material, but nothing works. I'd like to put my login card at middle of page
html:
<mat-card class="card" layout-align="center center">
<form (ngSubmit)="onSubmit(UserLogin)">
<div class="container">
<mat-form-field>
<input matInput placeholder="E-mail" [formControl]="email" required>
<mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Senha" [type]="hide ? 'password' : 'text'" [formControl]="password">
<mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
</mat-form-field>
<div>
<button mat-raised-button color="accent" type="submit">Entrar</button>
</div>
</div>
</form>
</mat-card>
add this in css file of component
:host{
display: flex;
min-height: 100vh;
}
mat-card{
margin: auto;
}
You could use position:absolute with left and top positioning and transform should work
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
}
form {
border: 1px solid;
display: inline-block;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<form>
<div><input type="text" placeholder="First Name" name=""></div>
<div><input type="text" placeholder="Last Name" name=""></div>
<div><input type="text" placeholder="Email" name=""></div>
</form>
Here is the problem, I have a single-page application where I lay out a form:
Due to my novice CSS skill, I have not been able to left align the help text (in blue). Here is my HTML code:
label {
width: 15%;
display: inline-block;
text-align: right;
padding-right: 10px;
}
span.short_help {
font-size: 70%;
color: cornflowerblue;
padding-left: 10px;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<input type="text" name="Authentication" id="-Authentication" />
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<input type="text" name="Branch" id="Branch" />
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<input type="checkbox" name="Persistent" id="Persistent" />
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
If I fixed up the input field to make the controls the same width so the help text align, then the check box will be centered:
Here is what I added to the CSS above:
input {
width: 15%;
}
How can I have both the controls and the blue text left aligned?
Instead of setting a width on all input fields, wrap a div arround it with a class. In my example .input
Now you can set the width of the field without affecting the input width.
* {
box-sizing: border-box;
}
form {
max-width: 600px;
}
label, .input, span {
display: inline-block;
vertical-align: middle;
margin-left: -4px;
}
label {
width: 20%;
}
.input {
width: 30%;
}
span {
color: cornflowerblue;
}
<form>
<div>
<label for="Authentication">Authentication:</label>
<div class="input">
<input type="text" name="Authentication" id="-Authentication" />
</div>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<div class="input">
<input type="text" name="Branch" id="Branch" />
</div>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<div class="input">
<input type="checkbox" name="Persistent" id="Persistent" />
</div>
<span class="short_help">Persistent connection</span>
</div>
<br/>
</form>
Add an element to wrap around the inputs and make them the desired size:
<div>
<label for="Authentication">Authentication:</label>
<span class="spacer">
<input type="text" name="Authentication" id="-Authentication" />
</span>
<span class="short_help">Authentication type, I, II, or III</span>
</div>
<br/>
<div>
<label for="Branch">Branch:</label>
<span class="spacer">
<input type="text" name="Branch" id="Branch" />
</span>
<span class="short_help">Which regional branch.</span>
</div>
<br/>
<div>
<label for="Persistent">Persistent:</label>
<span class="spacer">
<input type="checkbox" name="Persistent" id="Persistent" />
</span>
<span class="short_help">Persistent connection</span>
</div>
And add CSS to format it:
span.spacer {
display: inline-block;
width: 15%;
}
I didn't quite get it, do you only want to align the checkbox or the blue text
To align the checkbox to the left, change
input {
width: 15%;
}
to
input[type="text"] {
width: 15%;
}
the input driver you can align your text to the left so
input
{
text-align: left;
width: 15%;
}
but the tag span can not be proque is an online element for more doubt read this site that talks about the span tag:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
You can also contain the span in a div and somehow achieve alignment
I am implementing an inline form. Users can search for an existing customer or add a new customer.
<div id="CustomerInfo">
<div class="display-field roomy">
<div id="customerInfoContainer">
<div class="addCustomerControlsContainer">
<span class="twitter-typeahead" style="position: relative; display: inline-block;"><input type="text" class="autocompleteinput tt-query" placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);"></span>
<input class="add-new-customer" title="Add New Customer" type="button" value="+">
</div>
</div>
</div>
</div>
Does anyone know why my two elements don't line up?
http://jsfiddle.net/gq2279j2/4/
Try this with your style .add-new-customer{vertical-align: top;}
Working Demo
Set the vertical alignment of the button to top:
.add-new-customer {
vertical-align:top;
}
jsFiddle example
Use this CSS:
.display-field.roomy, .editor-field.roomy {
line-height: inherit;
}
Instead of the below CSS:
.display-field.roomy, .editor-field.roomy {
line-height: 1.9;
}
And place your both button in the same span:
<span class="twitter-typeahead" style="position: relative; display: inline-block;">
<input type="text" class="autocompleteinput tt-query"
placeholder="Type to search" autocomplete="off" spellcheck="false" dir="auto"
style="position: relative; vertical-align: top; background-color: rgba(0, 0, 0, 0);">
<input class="add-new-customer context-button noarrow" title="Add New Customer" type="button" value="+">
</span>
I'm having issue with an html/css contact form. Ideally, I'd like the 'label' and 'input' to be level with eachother, with a 1px border-bottom extending from the label to a defined endpoint(not a defined width). Is this possible? What am I missing?
<div id="contact">
<div id="invite">
<h1>Let's Talk.</h1>
<h2 class="postinfo">
<p>Have you got a project needing an eye for detail and a creative touch? <br>I'd love to hear from you. </p>
</h2>
</div><!-- end invite -->
<form action="#" method="post">
<fieldset>
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
<input type="submit" value="Send" />
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</div><!-- end contact -->
#contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
#invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
#form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
#form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
#form fieldset label {
padding-right: 50px;
}
#form fieldset input {
width: 300px;
}
http://i.stack.imgur.com/B6wF8.png
I played around with your code a bit and this is what I came up with:
Here is your HTML:
<contact>
<form action="#" method="post">
<fieldset>
<div class="clear">
<label for="name"><h1>Name:</h1></label>
<input type="text" id="name" placeholder="" />
</div>
<div class="clear">
<label for="email"><h1>Email:</h1></label>
<input type="text" id="email" placeholder="" />
</div>
<div class="clear">
<label for="subject"><h1>Subject:</h1></label>
<input type="subject" id="subject" placeholder="" />
</div>
<div class="clear">
<label for="message"><h1>Message:</h1></label>
<textarea id="message" placeholder=""></textarea>
</div>
<div class="clear">
<input type="submit" value="Send" />
</div>
</fieldset><!-- end fieldset -->
</form><!-- end form -->
</contact><!-- end contact -->
and here is your CSS:
body { font-family:arial,helvetica,sans-serif ;
font-size:14px ;
font-weight:bold ;
}
h1 { font-size:16px ;
margin:0 ;
padding:0 ;
}
contact {
float: left;
margin-left: 300px;
margin-top: 310px;
width: 533px;
}
contact invite .postinfo {
list-style-type: none;
margin-left: ;
width: 150px;
}
contact form {
float: right;
margin-top: -85px;
margin-left: 230px;
}
contact form fieldset {
border-style: none;
margin-left: -50px;
margin-top: -25px;
}
contact form fieldset label { width:100px ;
float:left }
contact form fieldset input {
width: 200px;
float:right ;
}
.clear { clear:both ;
line-height:30px ;
}
You'll need to play with your label and input widths depending on the font size you use.
Best,
Cynthia