I am currently working on a webpage using Bootstrap 5.2 and have the following code snippet included:
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="91f3fefee5e2e5e3f0e1d1a4bfa3bfa1bcf3f4e5f0a0">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<div class="row mb-2">
<div class="col-sm-12 form-floating">
<input type="text" class="form-control d-flex" id="Company_Name" name="Company_Name" placeholder="ACME, Inc.">
<label for="Company_Name">Company Name</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 form-floating">
<input type="text" class="form-control d-flex" id="Company_Website" name="Company_Website" placeholder="www.acme.com">
<label for="Company_Website">Website</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 form-floating">
<input type="text" class="form-control d-flex" id="Contact_Person" name="Contact_Person" placeholder="Joe Smith">
<label for="Contact_Person">Contact Person</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-12 form-floating">
<input type="text" class="form-control d-flex" id="Company_Email" name="Company_Email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0f65606a7c62667b674f6e6c626a216c6062">[email protected]</a>">
<label for="Company_Email">Company Email</label>
</div>
</div>
<div class="row mb-2">
<div class="col-sm-4 form-floating">
<input type="text" class="form-control d-flex" id="Company_Telephone" name="Company_Telephone" placeholder="999-999-9999" />
<label for="Company_Telephone">Contact Telephone :</label>
</div>
</div>My aim is to have placeholder information displayed for each input field when there is no data present, but unfortunately, none of the placeholders are showing up when the form is displayed:
https://i.sstatic.net/wlEra.png
Upon inspecting the code source in Chrome, I notice that the placeholder information is present but not visible. Could it be related to the use of the form-floating class for field labels causing this issue? If not, does anyone have any insights on how to resolve this problem?