如何让输入标签文本与顶部对齐？

Question

我正在构建一个 Razor Pages Web 应用程序并向其中添加了 CRUD 功能。在我的创建页面上，有一个表单可以创建使用输入标签的条目。其中一个字段用于评论，因此显然它需要更大。所以我给它添加了宽度和高度样式。但是，文本仅出现在评论字段的中间，当文本到达字段末尾时，它不会换行。

Create.cshtml.cs

@page
@model HSLogApp.Pages.HSLogs.CreateModel

@{
    ViewData["Title"] = "Create";
}

<h2>Create</h2>

<h4>Log</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form method="post">
            ....
            ....
            <div class="form-group">
                <label asp-for="Log.Comment" class="control-label"></label>
                <input asp-for="Log.Comment" class="form-control" style="height:250px; width:500px; vertical-align:top; white-space: pre-wrap;"/>
                <span asp-validation-for="Log.Comment" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-default" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-page="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

如何让光标刷新到顶部以及如何让它换行？

Answer 1

对于多行输入，使用 textarea 元素。

有一个ASP.NET Core Tag Helper for it。用法与 input 基本相同。这是带有 textarea 的示例。

<div class="form-group">
    <label asp-for="Log.Comment" class="control-label"></label>
    <textarea asp-for="Log.Comment" rows="3" class="form-control"></textarea>
    <span asp-validation-for="Log.Comment" class="text-danger"></span>
</div>

现在在textarea中使用rows属性来指定文本的行数。

如何让输入标签文本与顶部对齐？

How do I get input tag text to align to the top?

asp.net

asp.net-mvc

input

vertical-alignment