无论如何将占位符文本放在输入字段上方而不是放在里面

Question

So I'm basically making a form but I was requested to place the placeholder text above the text like this form that I need to make

But I can't figure out how to do that. I tried placing the text as a label over the input field but when I change the size of the browser the alignment is all over the place so I want to the label to align with the input field above it.

Here is what I tried doing:

 .row { display: flex; justify-content: space-around; padding: 10px; }

 <div class="row"> <:-- Name of Company --> <label class="comp" for="company" style="left; 40px;">Company</label> <input type="text" id="company" name="company" placeholder="Company" /> <!-- Clients First Name --> <label class="comp" for="firstname">First Name</label> <input type="text" id="firstname" name="firstN" placeholder="First Name" /> </div>

But what I get is this .

Is there anyone that can help me with this?

Answer 1

Move the <input /> inside of the <label /> and display: block; it. If you want to separately style the text, wrap it in a <span /> .

 .row { display: flex; justify-content: space-around; padding: 10px; } input { display: block; }

 <div class="row"> <!-- Name of Company --> <label class="comp"> Company <input type="text" id="company" name="company" placeholder="Company" /> </label> <!-- Clients First Name --> <label class="comp" for="firstname"> First Name <input type="text" id="firstname" name="firstN" placeholder="First Name" /> </label> </div>

Answer 2

Placeholder vs. Label.
You can not move the input placeholder text outside of the designated input. Placeholder text is strictly handled by the browser. You may only modify the content using the placeholder="" HTML property and style it with CSS pseudo class ::placeholder .

Instead use the label HTML element like so:
(reference:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label )

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

Display Label Above Input.
Now, you mentioned your label is appearing to the left of the input instead above it? You will need to style your CSS like this. Add the following CSS markup:

label {
    display: block;
}

I would also recommend, but not required, setting the display element on your input fields to block as well.

input {
    display: block;
}

Why?
By default label is rendered as display: inline; or display: inline-block; by your browser user-agent. Setting it to display: block; will ensure it will always appear above and not inline with the input.