为什么输入字段是从字段中心开始的？

Question

光标的初始位置在字段的中心。怎么到左上角？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<body style="background-color: cadetblue; height:1000px">
<form>
   <input type="text" class="notes-input" name="note">
</form>
</body>
</html>

.notes-input {
    width: 50%;
    line-height: 8em;
    margin:50px 0px 0px 150px ;
}

Answer 1

使用textarea代替输入。

<textarea name="textarea" style="width:250px;height:150px;"></textarea>

Answer 2

您可以使用文本区域代替输入

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<style>
.notes-input {
    width: 50%;
    margin:50px 0px 0px 150px ;
}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
   <textarea type="text" rows="5" class="notes-input" name="note"></textarea>
</form>
</body>
</html>

如果我们只需要输入并且框的大小应该很大意味着我们可以使用下面的代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">    
</head>
<style>
.notes-input {
    width: 50%;
    margin:50px 0px 0px 150px ;
    padding-bottom:150px;

}
</style>
<body style="background-color: cadetblue; height:1000px">
<form>
   <input type="text" class="notes-input" name="note">
</form>
</body>
</html>

为什么输入字段是从字段中心开始的？

Why the input field is starting from center of the field?

html

css

bootstrap-4