Text input field "PLACEHOLDER" not appearing

user_10654020 0
Viewed 70

I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.

I am serving the HTML with express to heroku. here's the 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">example@gmail.com</label> -->
          <input type="email" class="form-control" name="email" placeholder="example@gmail.com" 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 using bootstrap for styling and Express and NodeJs for serving files to the frontend. here is the overall code for signup page:

<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">example@gmail.com</label> -->
          <input type="email" class="form-control" name="email" placeholder="example@gmail.com" 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 minimal styling used in 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 how it is displayed on the web app

enter image description here

express node.js css html javascript
2 Answers

can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.

Not sure why it wouldn't, perhaps share your code online.

Like this,

<!-- <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">example@gmail.com</label> -->
          <input type="email" class="form-control" name="email" placeholder="example@gmail.com" 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>

where we can inspect and debug it.

As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too

user_21957300

you have to replace form-floating by 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="example@gmail.com" 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>

user_191249590
Related