Question 353365 in Html Question posted in
Some basic documentation can be found here.

Html – Is it possible to place the label text above the input when wrapping the label around the input?

I want to have the label text on top of the input when using the wrapping method, i.e.

<label>
   Label Text:
   <input type="text">
</label>

The following post is using the label with the for attribute and therefore the label and input elements are separated: Styling Form with Label above Inputs

But is it possible in the way I wrote above?

Tags:

2

Answers


  1. 0

    You could simply wrap the label in a div:

    <label>
   <div>Label Text:</div>
   <input type="text">
</label>
    Login or Signup to reply.
  2. 0

    Yes it’s possible to show label on top of the input with the mentioned above html. Please check CSS :-

    label {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 10px;
}
label input {
    grid-column: 1;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Label Text on Top of Input</title>
</head>
<body>

<label>
   Label Text:
   <input type="text">
</label>

</body>
</html>

    Let me know if it works for you or not.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search