html - 文本在 HTML 输入中未正确对齐。我的代码要更改什么？

Question

我正在制作一个用于撰写帖子的 HTML 表单。
我能够创建文本输入并调整其大小并设置新的宽度和高度。但是，由于文章位于文本框内，因此无法正确编写文章。它位于中间，而不是顶部。

这是一段 HTML 代码:

<form id="newpost" action="action.php" method="post">
    <input id="post" type="text" placeholder="Type here..." name="article">
    <br>
    <input id="submit" type="submit" value="Send">
</form>

CSS 代码:

#newpost {
    float: left;
    padding-left: 35px;
    padding-top: 14px;
}
#post {
    float: left;
    width: 250%;
    height: 200px;
    overflow: auto;
}
#submit {
    float: left;
    position: relative;
    left: 402px;
    margin-top: 25px;
    background-color: #dedede;
    border-radius: 4px;
}

每当我打字时，文本总是出现在文本框的中间。
我怎样才能让它出现在顶部？如果前一行已满，我怎样才能让文本自动跳到下一行。现在是无限的。

Answer 1

只需使用 <textarea>而不是 <input>像这样:

<textarea id="post" type="text" placeholder="Type here..." name="article"></textarea>

参见 fiddle :https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/42/