Remove autocomplete input fields

Question

I have a form where I remade the bootstrap datepicker a little by inserting my fields with inputs, everything works as it should. The only problem is the autocomplete that is used in browsers, and when you click on the field, the values have already been entered appear, for whom it is not clear what I mean

Maybe I can somehow change the input type so that this autocomplete does not exist? Or how can I fix this problem? It is important that at the same time the date selection in the form remains working

 // Initialize datepicker const dp = $("#month").datepicker({ todayHighlight: true }); // Show datepicker on <input> click $('.input-wrapper > input').on('click', (e) => dp.datepicker("show")); // On date change const y = document.getElementById('year'); const m = document.getElementById('month'); const d = document.getElementById('day'); dp.on('changeDate',function(ev){ const date = dp.datepicker('getDate'); y.value = date.getFullYear(); d.value = date.getDate(); dp.datepicker('hide'); m.value = date.getMonth() + 1; }) dp.on('hide',function(ev){ const date = dp.datepicker('getDate'); m.value = date.getMonth() + 1; })

 label { color: #808694; font-family: Montserrat; font-size: 10px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; } input { margin-right: 20px; box-sizing: border-box; outline: none; border: none; background-color: #F4F5F8; width: 50px; }.span-wrapper { display: flex; align-items: flex-end; } span { color: #808694; font-family: Montserrat; font-size: 8px; font-weight: bold; letter-spacing: 0; line-height: 16px; text-transform: uppercase; text-align: center; width: 50px; }.main-content { min-height: 10vh; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script> <div class="main-content"> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> <p>Main content...</p> </div> <div class="contacts-call-form"> <form class="js-form" action="{{ route('send-comment') }}"> <div class="col-md-6"> <div class="call-form-item"> <label for="name">Name *</label> <div class="input-wrapper"> <input class="js-form-call-name" id="name" type="text" name="name"> </div> </div> </div> <div class="col-md-6"> <div class="call-form-item"> <label for="email">Email *</label> <div class="input-wrapper"> <input class="js-form-call-email" id="email" type="email" name="email"> </div> </div> </div> <div class="col-md-6"> <div class="call-form-item-date"> <label for="date">Select a date *</label> <div class="input-wrapper"> <input class="js-form-month" id="month" type="text" name="month"> <input class="js-form-day" id="day" type="text" name="day"> <input class="js-form-year" id="year" type="text" name="year"> <div id="datepicker" class="input-group date" data-date-format="mm-dd-yyyy" style="display: none"> <input class="form-control" type="text" readonly /> <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span> </div> </div> <div class="span-wrapper"> <span for="month">Month</span> <span for="day">Day</span> <span for="year">Year</span> </div> </div> </div> </form> </div>

Answer 1

You have to set autocomplete to off on your form tag:

<form class="js-form" action="{{ route('send-comment') }}" autocomplete="off">

Or only on your specific input field.

See: https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Answer 2

You must specify the autocomplete off input for each input like

<input autocomplete="off" name="myinputname... >

more info here: https://www.w3schools.com/tags/att_input_autocomplete.asp