Как создать заполнитель, который начинается с верхней части окна ввода?

Question

Я пытаюсь создать поле ввода сообщения в форме начальной загрузки, однако ящик должен быть достаточной высоты, чтобы пользователь мог прочитать его сообщение, владелец места «сообщения» остался посередине, также когда я пишу текст продолжает двигаться горизонтально, без учета полей, я программист новичка, поэтому, пожалуйста, не будьте слишком суровыми.

.theform { 
 
    margin-left: 200px; 
 
    margin-right: 200px; 
 
    margin-top: 50px; 
 
    border: 5px solid; 
 
    padding: 20px 20px 20px 20px; 
 
} 
 

 
.theform h1 { 
 
    font-size: 50px; 
 
    text-decoration: underline; 
 
} 
 

 
#formGroupExampleInput { 
 
    height: 50px; 
 
} 
 

 
.form-control { 
 
    font-size: 30px; 
 
} 
 

 
#messagebox { 
 
    height: 200px; 
 
    margin-right: 40px; 
 
    line-height: 0px; 
 
} 
 

 
#message { 
 
    height: 200px; 
 
    margin-right: 40px; 
 
    line-height: -20px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<div class="theform" id="link3"> 
 
    <h1 class="text-center">Contact</h1> 
 
    <form> 
 
    <fieldset class="form-group"> 
 
     <label for="formGroupExampleInput">Example label</label> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50"> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <fieldset class="form-group"> 
 
     <label for="formGroupExampleInput2">Another label</label> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50"> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <fieldset class="form-group"> 
 
     <label for="formGroupExampleInput">Example label</label> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" size="50"> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <fieldset class="form-group"> 
 
     <label for="formGroupExampleInput">Example label</label> 
 
     <div class="row"> 
 
     <div class="col-md-6"> 
 
      <input type="text" class="form-control" id="messagebox" placeholder="Message" size="50"> 
 
     </div> 
 
     </div> 
 
    </fieldset> 
 

 
    <button type="submit" class="btn btn-primary">Submit</button> 
 
    </form> 
 
</div>

Answer 1

Вы должны использовать textarea вместо input. Если вы хотите центрировать заполнитель вертикально, вам также нужно использовать несколько JS, чтобы настроить textare.

Просто посмотрите в эту codepen для примера реализации вертикали по центру textarea: https://codepen.io/desandro/pen/gICqd