I can't position my text to be in the left top corner?

Question

So in the webpage that I'm making, in the "Contact" section you have a form. In the message input, the placeholder is positioned center left instead of top left (when you start writing your message it also starts at the center left position). How can I resolve this?

CodeSandbox link: Link

Answer 1

instead of using an input

    <input
      type="text"
      placeholder="Message*"
      name="message"
      className="input-message"
      value={user.message}
      onChange={(e) => handleChange(e.target.value, "message")}
    />

Use a textarea element

<textarea
      placeholder="Message*"
      name="message"
      className="input-message"
      value={user.message}
      onChange={(e) => handleChange(e.target.value, "message")}
    ></textarea>

Answer 2

Instead of height for input you can use padding , or change input with textarea and add some css styles on it as well

Answer 3

try it with css:

textarea{
  vertical-align: top;
}

Answer 4

Change

  <input
          type="text"
        type="text"
          placeholder="Message*"
          name="message"
          className="input-message"
          value={user.message}
          onChange={(e) => handleChange(e.target.value, "message")}
        /> 

with

<textarea
          type="textarea"
          placeholder="Message*"
          name="message"
          className="input-message"
          value={user.message}
          onChange={(e) => handleChange(e.target.value, "message")}
        />