The placeholder in the text input field is missing

I'm new to this, and struggling to figure out why the placeholder isn't working. I attempted using the LABEL tag but it stays visible as I type into the text input.

I am hosting the HTML on heroku. Here's the code snippet:

<!-- <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="87e2ffe6eaf7ebe2c7e0eae6eeeba9e4e8ea">[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="98fde0f9f5e8f4fdd8fff5f9f1f4b6fbf7f5">[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>

edit: I am utilizing bootstrap for styling and serving files to the frontend with Express and NodeJs. Below is the full 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="9affe2fbf7eaf6ffdafdf7fbf3f6b4f9f5f7">[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="06637e676b766a6346616b676f6a2865696b">[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>

and some minimal styling from the stylesheet used:

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 how it appears on the web app:

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

javascripthtmlcssnode.jsexpress

Answer №1

Could you provide more details? It seems like the code above is basic HTML, and the placeholder text should disappear once you start editing the input.

If it's not working as expected, consider sharing your code online, similar to this example,

<!-- <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="04617c6569746861446369656d682a4"></a></label> -->
          <input type="email" class="form-control" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8aeff2ebe7fae6efcaede7ebe3e6a4e9e5e7">[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>

It would be helpful to have a link to where we can inspect and debug your code.

At this point, your question is quite broad making it hard to identify the problem. Additionally, judging by the class names used, it appears you are utilizing some sort of styling library. Sharing that information could also assist us in finding a solution.

Answer №2

You must switch out form-floating with form-group

<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-group">

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

        <input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
      </div>
      <div class="form-group">

        <input type="email" class="form-control" id="email" name="email" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0b6e736a667b676e4b6c666a626725686466">[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>

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

Technical issue encountered with radio button onchange/onclick event functionality

Is there a way to retrieve the value of a radio button when it is clicked or changed? I'm facing an issue where my code only works for the first radio button and not for the other ones. When I click on the first radio button, it alerts the value succe ...

javascriptjqueryhtml

What is the process for exporting/importing a variable in Node.js?

What is the correct way to export/import a variable in Node.js? I attempted to use export and import methods, but I received an error message stating that it should be a module. After changing the type to module in the JSON file, it then told me that requ ...

javascriptnode.jsvariablesimportexport

Mongo DB's $set operation fails to update the req.body object

app.put('/accountlist/:id', function (req, res) { var id = req.params.id; console.log(req.body)); db.accounts.findAndModify({ query: {_id: mongojs.ObjectId(id)}, update: {$set:req.body}}, new: true}, function (err, ...

node.jsmongodbexpress

Failed to retrieve a response from the QnA maker API while attempting to process the body parameters

Below is the code I created to call Microsoft's QnA Maker Generate Answer API. var http=require('https'); var demo=[]; console.log("Executing Post Operations..."); // Define a demo object with properties and values. This object will be u ...

node.jsexpressazure-cognitive-services

Problem with Express.js serving dynamically generated index.html page

Currently, I'm immersing myself in a practice project to grasp the concepts of express and webpack with react and react router. My goal is to make sure all server requests are directed to index.html to avoid encountering "Cannot GET" errors when navig ...

javascriptreactjsexpresswebpackreact-router

Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does n ...

cssbootstrap-4

Is the concept of Controlled and Uncontrolled Components in VueJs similar to that of React?

When it comes to React, there is a distinction between controlled and uncontrolled components explained in detail at this link. Controlled components function within the React model where state is managed in the virtual DOM. In contrast, uncontrolled com ...

javascriptreactjsvue.jsvuejs2

While typing in the box I am currently working on, another CSS box is shifting around

Whenever I try to add a paragraph to my box, the other one shifts. I've checked for any issues with margins or spacing, but nothing seems off from what I can tell. I have no clue how to resolve this. Here's how it appears before making any change ...

htmlcss

Having trouble with accessing PHP data through jQuery's AJAX response

Having just started exploring AJAX, I'm facing an issue with a simple login script using jQuery 1.6.4. The AJAX function sends the email address and password to 'login.php' upon clicking a button. Everything seems to be working smoothly unti ...

phpjavascriptjqueryajax

Simulating dependencies of Angular 2 components during unit testing

Struggling with accessing mocked service methods in Angular 2 during component unit testing. Seeking guidance on a standard approach, despite following Angular docs closely. The challenge lies in reaching the mocked service's methods. My immediate go ...

javascriptunit-testingangulartypescript

unnecessary shading effect on SVG text

My SVG text suddenly has a strange drop shadow that I can't seem to get rid of. Despite checking the reference guide I purchased on Amazon, I still haven't found any solutions. There are no filters applied and the markup seems to align with examp ...

htmltextsvg

The embedment of wmv videos does not include the option for a fullscreen button

I am currently attempting to insert a wmv video into an HTML code. The file plays without any issues, however, I would like the website's users to have the option to view the video in fullscreen mode by clicking on a fullscreen button. Unfortunately, ...

htmlvideoembeddingwmv

Is it possible to single out the final element having a specific CSS class in the absence of a parent container?

I have the following elements dynamically rendered in an HTML file. <div class="vehicle"></div> <div class="vehicle"></div> My requirement is to add a style float:right inside CSS class vehicle for the second el ...

htmlcsssass

Antialiasing with Three.js appears to be malfunctioning specifically on iPhone 5 and iPhone 5s devices

As a newbie to three.js, I managed to finish my project successfully. To enhance the graphics quality, I decided to enable antialiasing. renderer = new THREE.WebGLRenderer( { antialias: true } ); Unfortunately, after enabling antialiasing on iPhone 5 and ...

javascriptiosiphonethree.js

Tips for creating a custom vertical grid layout in Bootstrap with specific item placements

I've been on a quest to find a method to display a bootstrap column vertically instead of horizontally. I am adamant about not using masonry or any other external library. My goal is to have "Card 2" appear beneath "Card 1" on medium to small screens ...

csstwitter-bootstrapbootstrap-4

Strategies for preventing multi-level inheritance of TypeScript class properties and methods

In my current JavaScript class structure, the DataService is defined as follows: // data.service.ts export class DataService { public url = environment.url; constructor( private uri: string, private httpClient: HttpClient, ) { } ...

javascripttypescriptclassinheritancemultiple-inheritance

javascript monitoring numerous socket channels for echoes

Currently, I am in the process of developing a chat application. On the server side, I am utilizing: php, laravel 5.4, and pusher. On the client side, I have incorporated vue.js along with laravel-echo. Initially, I successfully created a "public chat roo ...

javascriptlaravelnpmvue.jslaravel-echo

Jest does not recognize AnimationEvent as a defined element

I am currently facing an issue while attempting to simulate an animationEvent for a test within my Angular application. The error message I receive is: ReferenceError: AnimationEvent is not defined. Given that this feature is experimental, it seems like ...

javascriptjestjscss-animations

Utilizing elapsed time in coding to create a function for DOM manipulation

As a new software engineering student, I am facing a challenge that I am struggling to overcome. I am currently working on developing a basic rhythm game similar to Guitar Hero using HTML, CSS, and JavaScript. I have successfully implemented an elapsedTim ...

javascriptarrays

Creating a hierarchical JSON format for a nested commenting system

I have a JSON data representing a multi-level comment system as shown below: [{ "thread_id": 2710, "parent_id": "", "username": "string", "comment": "string", "postdate": "2017-06-09T07:12:32.000Z", "id": 1 }, { "thread_id": 2710, "parent_ ...

javascriptjson