Is there a limit on how many autocomplete attributes you can have in a single form? It seems if I have a variation of three or more autocomplete attributes on inputs the browser autofill still works. If I just have one attribute added it works just fine. Is there a reason why this is happening? I really cannot find an answer on the web or anyone else who is having this issue.
Has there been in the recent update where chrome just doesn't care for the autocomplete to be set to off or a random string like nope?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="text-center mb-3">Contact Me</h1>
Broken Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone" autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Working Version
<form action="#">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required autocomplete="nope">
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required autocomplete="nope">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
<br/>
<br/>
<br/> Form with autocomplete="off" broken Version
<form action="#" autocomplete="off">
<div class="row mb-1">
<div class="col">
<label class="form-label">First Name</label>
<input type="text" name="firstName" class="form-control" placeholder="First name" aria-label="First name" required>
</div>
<div class="col">
<label class="form-label">Last Name</label>
<input type="text" name="lastName" class="form-control" placeholder="Last name" aria-label="Last name" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Email</label>
<input type="email" name="email" class="form-control" placeholder="Email" aria-label="Email" required>
</div>
<div class="col">
<label class="form-label">Phone (optional)</label>
<input type="text" name="phone" class="form-control" placeholder="Phone" aria-label="Phone">
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Subject</label>
<input type="text" name="subject" class="form-control" placeholder="Subject" aria-label="Subject" required>
</div>
</div>
<div class="row mb-1">
<div class="col">
<label class="form-label">Message</label>
<textarea type="text" name="message" class="form-control" placeholder="Message" aria-label="Message" required></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary mt-2">Submit</button>
</form>
</body>
</html>
To fix this I just used Just-validate to make my own validations. This still allows for chrome autofill to work but now it won't bypass the default min character HTML attributes.
Related
how can i place multiple inputs into a single row having responsive nature
I'm facing very difficult to place all inputs into a single row only 3 I'm able to place
I wanted to convert the below snippet into bootstrap so that I will be responsive:
here codepen:https://codepen.io/anon/pen/EpbjKL
html:
<div class="input-wrapper">
<div style="float:left;margin-right:20px;">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
css:
input, label {
display:block;
}
Question: how to convert above codepen output to bootstrap row,col-*
use this class col-md-auto to make width auto and d-inline-block to display column inline block (bootstrap 4)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
I think that you can see the example below,this may satisfy your need. Also,you can set the col-x-x property to place more that 3 input in one row.
row-col example
I have an html form that :
looks like
And I want that those values doesn't appear like these, just blank.
How can I do it?
The code in fact is here: github
Blank input as you want... please run and see
<div class="container">
<h1>Add New Book</h1>
<div class="row">
<div class="col-md-6">
<form (ngSubmit)="saveBook()" #bookForm="ngForm">
<div class="form-group">
<label for="name">ISBN</label>
<input type="text" class="form-control" [(ngModel)]="book.isbn" name="isbn" required>
</div>
<div class="form-group">
<label for="name">Title</label>
<input type="text" class="form-control" [(ngModel)]="book.title" name="title" required>
</div>
<div class="form-group">
<label for="name">Author</label>
<input type="text" class="form-control" [(ngModel)]="idA" name="author" required>
</div>
<div class="form-group">
<input type="text" class="form-control" [(ngModel)]="book.author" name="author" required>
</div>
<div class="form-group">
<label for="name">Publisher</label>
<input type="text" class="form-control" [(ngModel)]="book.publisher" name="publisher" required>
</div>
<div class="form-group">
<label for="name">Price</label>
<input type="number" class="form-control" [(ngModel)]="book.price" name="price" required>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" [disabled]="!bookForm.form.valid">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container">
</div>
I am working with Bootstrap 4 on a form. Now, when using the form along with the grid classes, it does not actually work like its supposed to. The output can be seen here http://www.henryspike.tk/testform
What I had expected was to see the whole 12 columns divided into 4-4-4 each containing an input field but it stacks up.
<div class="row">
<div class="col-md-12 offset-md-1">
<div class="row">
<form class="form">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Name</label>
<input class="form-control" type="email" name="email" id="email" placeholder="someone#example.com" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="username">Name</label>
<input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required>
</div>
</div>
</form>
</div>
</div>
</div>
col- should always be the immediate child of row..
http://www.codeply.com/go/moFmNMMuPs
<div class="row">
<div class="col-md-12">
<form class="row form">
<div class="col-md-4">
<div class="form-group">
<label for="name">Name</label>
<input class="form-control" type="text" name="name" id="name" placeholder="eg. John Doe" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Name</label>
<input class="form-control" type="email" name="email" id="email" placeholder="someone#example.com" required="">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="username">Name</label>
<input class="form-control" type="text" name="username" id="username" placeholder="eg. JDoe12" required="">
</div>
</div>
</form>
</div>
</div>
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
I'm using bootstrap to design web pages. I have two major problems.Firstly, can't really figure out how to align fields in a form.Secondly, adjusting the fields(the width height etc..) in a form tag. Do I have to use css for each and every field? I tried doing that, but then the alignment gets messed up. Here's my code .
<div class="container">
<form class="form-inline">
<div class="form-group">
<label class="form-control">In Out Specifier</label>
<select class="form-control" id="processInOutSpecifier" name="inOutSpecifier" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="callDateLabel">Call Date</label>
<select class="form-control" id="callDate" name="callDate" >
<option></option>
</select>
</div>
<div class="form-group">
<label class="form-control" id="processCallDateFormatLabel" >Call Date Format</label>
<select class="form-control" id="callDate" name="callDateForamt">
<option>yyyy-MM-dd</option>
<option> yyyy/MM/dd</option>
<option> MM-dd-yyyy</option>
<option> MM/dd/yyyy</option>
<option> dd-MM-yyyy</option>
<option> dd/MM/yyyy</option>
<option>dd/MM/yy</option>
<option> MM/dd/yy</option>
<option> yyMMdd</option>
<option> MMddyy</option>
<option> dd.MM.yy</option>
<option> MM.dd.yy</option>
<option>MM.dd.yy</option>
<option>dd/MM</option>
<option>dd-MM</option>
</select>
</div>
<div class="form-group">
<label class="form-control">Call Time</label>
<select class ="form-control" id="callTime" name="callTime" >
<option></option>
</select>
</div>
<br><br>
<div class="form-group">
<label class="form-control" >Call Time Format</label>
<select id="callTimeFormat" class="form-control" name="CalltimeFormat">
<option>HH:MM:SS/12 HOUR</option>
<option>HH:MM:SS/24 HOUR</option>
<option> HH:MM/12 HOUR</option>
<option> HH:MM/24 HOUR</option>
<option> HH:MM/AMPM</option>
<option>HHMM/24 HOUR</option>
</select>
</div>
<div class="form-group">
<label class="form-control" >Trunk </label>
<input class="form-control" type="text" id="processTrunk" placeholder="Trunk">
</div>
<div class="form-group">
<label class="form-control" >Duration </label>
<input class="form-control" type="text" id="processDuration" placeholder="Duration">
</div>
</form>
</div>
Here's the fiddle
http://jsfiddle.net/core972/SMkZV/2/
Try this fiddle,
<div class="container">
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</form>
</div>
Check this DEMO 1
<form name="registration_form" id='registration_form' class="form-inline">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
</div>
<div class="row" style="padding-top: 5px;">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="Username"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Password"/>
</div>
</div>
</form>
This another style you can create form Check this DEMO 2
You can try like this: Demo
<form name="registration_form" id='registration_form' class="form-horizontal col-md-8">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="firstname" class="form-control reg_name" type="text" name="firstname" title="Enter first name" placeholder="First name" />
</div>
<div class="col-xs-6">
<input id="lastname" class="form-control reg_name" type="text" name="lastname" title="Enter last name" placeholder="Last name" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<input id="username" class="form-control reg_name" type="text" autocapitalize='off' name="username" title="Enter username" placeholder="Username" />
</div>
<div class="col-xs-6">
<input id="password" class="form-control reg_name" type="password" name="password" title="Enter password" placeholder="Password" />
</div>
</div>
</div>
</form>
Form with label Demo
For more details refer Bootstrap Forms
Check this
Demo
<form name="registration_form" id='registration_form' class="form-inline ">
<div class="row">
<div class="form-group col-xs-6">
<label for="firstname" class="sr-only"></label>
<input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
title="Enter first name"
placeholder="First name"/>
</div>
<div class="form-group col-xs-6">
<label for="lastname" class="sr-only"></label>
<input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
title="Enter last name"
placeholder="Last name"/>
</div>
<div class="form-group col-xs-12">
<label for="username" class="sr-only"></label>
<input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
title="Enter username"
placeholder="Username"/>
</div>
<div class="form-group col-xs-12">
<label for="password" class="sr-only"></label>
<input id="password" class="form-control input-group-lg" type="password" name="password"
title="Enter password"
placeholder="Password"/>
</div>
</div>