The placeholder text in the input field is not functioning/displaying as expected

As a beginner front-end developer, I'm struggling to understand why the placeholder isn't functioning as expected. I attempted to use the LABEL tag, but it remains visible even when typing into the text input field. The HTML is being served via Express to Heroku. Here's the snippet of code:

          <!-- <label for="firstname">FirstName</label> -->
          <input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
        </div>
        <div class="form-floating">
          <!-- <label for="lastname">LastName</label> -->
          <input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
        </div>
        <div class="form-floating">
          <!-- <label for="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eebf6efe3fee2ebcee9e3efe7e2a0ede1e3">[email protected]</a></label> -->
          <input type="email" class="form-control" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8f928b879a868faa8d878b8386c4898587">[email protected]</a>" required/>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">
          Sign Up
        </button>
        <p class="mt-5 mb-3 text-muted">&copy; Example Inc.</p>

Revised version: Bootstrap is used for styling and files are served to the frontend with Express and NodeJs. Below is the complete signup page code:

<link href="../css/styles.css" rel="stylesheet" />
  </head>
  <body class="text-center">
    <main class="form-signin">
      <form method="post" action="/">
        <img
          class="mb-4"
          src="../images/example.png"
          alt=""
          width="72"
          height="57"
        />
        <h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>

        <div class="form-floating">
          <!-- <label for="firstname">FirstName</label> -->
          <input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
        </div>
        <div class="form-floating">
          <!-- <label for="lastname">LastName</label> -->
          <input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
        </div>
        <div class="form-floating">
          <!-- <label for="email"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7f1a071e120f131a3f18121e1613511c1012">[email protected]</a></label> -->
          <input type="email" class="form-control" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d2cfd6dac7dbd2f7d0dad6dedb99d4d8da">[email protected]</a>" required/>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">
          Sign Up
        </button>
        <p class="mt-5 mb-3 text-muted">&copy; Example Inc.</p>
      </form>
    </main>
  </body>

Additionally, some basic styling is applied in the stylesheet:

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}


.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin #firstName {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;

}
.form-signin #lastName {
  margin-bottom: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.form-signin input[type="email"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

This is the visual representation on the web application

https://i.sstatic.net/rJ9Lt.png

javascripthtmlcssnode.jsexpress

Answer №1

Phil mentioned in the comment on your post that the issue lies in using Bootstrap's Floating Labels. You have wrapped your inputs with a .form-floating class, but the labels are commented out.

<div class="form-floating">
    <label for="firstname">FirstName</label>
    <input 
        type="text"
        class="form-control"
        id="firstName" 
        name="firstname" 
        placeholder="FirstName" 
        required 
        autofocus/>
</div>

Alternatively, you can remove the .form-floating surrounding div and use the placeholders as usual

<div>
    <label for="firstname">FirstName</label>
    <input 
        type="text"
        class="form-control"
        id="firstName" 
        name="firstname" 
        placeholder="FirstName" 
        required 
        autofocus/>
</div>

Uncommented versions are shown here working correctly: on codepen

Answer №2

To fix the issue, simply delete the form-floating class from the div element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The specified property is not found in type (2339)

I encountered a TypeScript error stating Property 'UPDATE_COLUMNS' does not exist on type 'DimensionAction'.ts(2339), even though it is clearly defined above. This issue occurred while using VSCode. I'm starting to suspect it may ...

javascripttypescriptvisual-studio-code

Sending messages from a C# application to a Node.js server

Hello, I have successfully set up a node TCP server that is actively waiting for incoming data. For each socket, I have the following code in place: socket.on("data", function () { }); From my understanding, this function will be called every time there ...

c#node.jsnetwork-programmingtcp

How to handle multiple formData input in NestJS controller

How can I create a controller in Nest.js that accepts two form-data inputs? Here is my Angular service code: public importSchema(file: File, importConfig: PreviewImportConfig): Observable<HttpEvent<SchemaParseResponse>> { const formData = ...

javascriptangulartypescriptnestjs

Using multiple where clauses in Firebase for advanced querying

Let me explain the scenario. Within my database, there is a Users collection. Some users have a property called userType, while others do not. The values for userType can either be person or company. I want to retrieve only the users that have the userTyp ...

javascriptnode.jsfirebasefirebase-realtime-database

The function Router.use() is in need of a middleware function, but instead received an undefined

A snippet of code from my index.js file looks like this: ... import userRoutes from './src/routes/userRoutes'; import invoicesRoutes from './src/routes/invoicesRoutes'; import authMiddleware from "./src/middlewares/authMiddleware"; ... ...

javascriptnode.jsexpressmiddleware

Because of the CSS tree structure, it is not possible to add or remove classes. This restriction applies to all actions done in jQuery, including click

I want to create a hover effect where the CSS changes when hovering over an item, then reverts back to normal when no longer hovered. Additionally, I would like the CSS to change when the item is selected, and return to normal when another item in the same ...

javascriptjquerycss

Is it possible to protect assets aside from JavaScript in Nodewebkit?

After coming across a post about securing the source code in a node-webkit desktop application on Stack Overflow, I began contemplating ways to safeguard my font files. Would using a snapshot approach, similar to the one mentioned in the post, be a viable ...

javascriptcssbinaryfont-facenode-webkit

The JavaScript-set value in a form field is not being transmitted to the PHP script within the $_POST array

Struggling to pass a JavaScript value to a .php script, and then on to a .txt script. It works fine with regular numbers, but when trying with the variable it fails, leaving the .txt file blank. Despite extensive research online, I can't seem to get i ...

javascriptphphtmlformspost

Transferring intricate data gracefully through the URL

I'm considering using something along the lines of: <script src="http://www.example.com/?key={'param':'value'}"> As illustrated in the example above, a JSON formatted string is being passed through the src URL. However, thi ...

htmljsondata-structuresstandards

Include new material in the upper-right corner of each row

Struggling with various styling techniques like pull-right, float, and row-fluid, I have come here to seek help: My goal is simple - I want a Map to be displayed on the right side of a set of rows. Currently, it looks like this: Although close to what I ...

htmlcsstwitter-bootstrap-3

Tips for effectively utilizing npm-check

Recently, I've been delving into the world of node.js and experimenting with the Spotify API to enhance my knowledge. After starting off with some example source code provided by Spotify, I now feel ready to create something unique on my own. With a ...

javascriptnode.jsnpm

Page freezing occurs during data validation with Express before a POST request is made

Utilizing express-validator to validate specific user inputs against predefined keywords. If any input is deemed invalid, the POST request to the database should not proceed. On the other hand, if all inputs pass the validation, the POST request should be ...

node.jsexpresspostexpress-validator

What methods does Angular use to handle bounded values?

Consider this straightforward Angular snippet: <input type="text" ng-model="name" /> <p>Hello {{name}}</p> When entering the text <script>document.write("Hello World!");</script>, it appears to be displayed as is without bei ...

javascriptangularjshtml-escape-characters

The Swagger-ui 2.0 endpoint does not receive Bearer Authorization from the top

When I review Swagger, the documentation for my endpoint "/customers" states that there is "no headers authorization," even though I have already input a Bearer token in the "Authorize" section at the top right. It seems like the security settings for the ...

node.jsexpressswagger-uibearer-token

Aligning the passwords in the middle of the screen

I need guidance on how to center these labels and inputs on my webpage. Can you help? <form> <div class="row mb-3"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> < ...

htmlbootstrap-5

What is the best approach to manage a file upload in Meteor?

Is there a recommended method for managing file uploads in Meteor? ...

javascriptfile-uploadmeteor

Angular is using double quotes (%22) to maintain the integrity of the data retrieved from JSON responses

After running a PHP script, the following response is returned: {"result": "0", "token":"atoken" } To execute the script with Angular, the following code is used: $http.post( API["R001"], $scope.user, {}).then($scope.postSuccess, null); Upon successful ...

javascriptjsonangularjsparsingcookies

The textgeometry element is not appearing in the three.js scene

I've inserted a boxgeometry into the scene with the intention of adding text to indicate the side of the cube. However, I am encountering difficulties in incorporating textgeometry into the scene. This is my code: const loader = new FontLoader(); loa ...

javascriptthree.js

Display a React JS component inside another component

I have a specific goal in mind - I want to verify the validity of the user token before a route is rendered. Within my App.js file, I have the following setup: import Home from... <Route path="/home" render={ (props) =&g ...

javascriptreactjs

How to right-align navigation bar text using Bootstrap 4

I'm attempting to replicate Google's layout but I'm having trouble aligning the list elements to the right of the page using Bootstrap 4. I've included a link to the code I am working on, and even tried adding the classes mr-auto and ju ...

cssbootstrap-4