テキストボックス内の開始位置（html/css）

Question

テキストボックスを作成しようとしています。そのため、ユーザーはブックの章を入力できます。

ボックスの真ん中から入力が始まります。どうすれば修正できますか？

.TextBox { 
 
    width: 500px; 
 
    height: 50px; 
 
    background: #cccccc; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.TextBox > h1 { 
 
    font-family: 'Consolas'; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
} 
 
#textbox { 
 
    width: 500px; 
 
    height: 200px; 
 
}

<div class="container"> 
 
    <div class="TextBox"> 
 
    <h1> Enter text here </h1> 
 
    <form> 
 
     <input type="text" id="textbox"> 
 
    </form> 
 

 
    </div> 
 
</div>

Answer 1

使用<textarea>と私は中央に、正しくあなたをundestood場合は、それを合わせます。 colは、あなたがテキストエリアの幅を定義することができますし、rowであなたがテキストエリアの高さを定義することができる属性を持つ

.TextBox { 
 
    width: 500px; 
 
    height: 50px; 
 
    background: #cccccc; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.TextBox > h1 { 
 
    font-family: 'Consolas'; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
} 
 
#textbox { 
 
    width: 500px; 
 
    height: 200px; 
 
    text-align:center; 
 
}

<div class="container"> 
 
    <div class="TextBox"> 
 
    <h1> Enter text here </h1> 
 
    <form> 
 
     <textarea cols="80" rows="10" id="textbox" type="text" name="textbox">Lorem ipsum 
 
</textarea> 
 
    </form> 
 

 
    </div> 
 
</div>

Answer 2

テキストエリアに試してみてください：

<div class="container"> 
     <div class="TextBox"> 
      <h1> Enter text here </h1> 
      <form> <textarea type="text" id="textbox" ></textarea> </form> 

     </div> 
    </div> 

jsfiddle

Answer 3

textareaを使用する必要があります。

こちらをご覧ください：

https://fiddle.jshell.net/byznwzra/

Answer 4

を使用すると、以下の本（私はTextArea内のテキストを変更すると、その後Heading内のテキストが変更されます）のようなものを持っていると思います。

下記のフィドルを確認してお知らせください。

function changeHead() 
 
{ 
 
    var x = document.getElementById("txtarea").value; 
 
    document.getElementById("demo").innerHTML = x; 
 
}

.TextBox { 
 
    width: 500px; 
 
    height: 50px; 
 
    background: #cccccc; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 
.TextBox > h1 { 
 
    font-family: 'Consolas'; 
 
    text-align: center; 
 
    padding-top: 10px; 
 
} 
 
#txtarea { 
 
    text-align:center; 
 
    font-size:16px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="TextBox"> 
 
    <h1 id="demo"> Enter text here </h1> 
 
    <form> 
 
     <textarea id="txtarea" cols="52" rows="6" id="textbox" type="text" name="textbox" onkeypress="changeHead()" placeholder="Enter Text Here"> 
 
</textarea> 
 
    </form> 
 

 
    </div> 
 
</div>