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

The intitial position of cursor is at center of the field. How to make it to top left?

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

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

CodePudding user response：

You can use textarea instead of input

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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"  name="note"></textarea>
</form>
</body>
</html>

if we want only input and box size should be big means we can use the below code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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"  name="note">
</form>
</body>
</html>

CodePudding user response：

use textarea instead of input.

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