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

Question

我正在构建一个Razor Pages网络应用程序，并向其添加了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 核心标记助手。用法将与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>

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