HTML表單標籤，需要文本留在文本框內

我正在做一個項目，但我需要幫助我的表單。我正在做一個簡短的描述文本框，我的尺寸是我想要的大小，但是我的文本從中間開始。此外，當你輸入文字超出框。我不希望文本留在我想包含在框中的一行上。HTML表單標籤，需要文本留在文本框內

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <title>Centennial College|Creating Student Profile</title> 
    <meta charset="utf-8"> 
    <style id="navStyle"> 
     /*I got some help on this coding from w3schools.*/ 
     #image2{ 
      position: absolute; height: 100px; 
     } 
     #navigationList{ 
      list-style-type: none; 
      margin: 0; 
      padding:0; 
      overflow:hidden; 
      background-image: url(Images/background_header.jpg); 
      position: absolute; left: 310px; height: 100px; width:950px; 
      font-weight: bold; 
     } 
     .links{ 
      float:left; 
      position: relative; top: 30px; 
     } 
     .links a{ 
      display:block; 
      color:white; 
      text-align: center; 
      padding: 10px 50px; 
      text-decoration: none; 
     } 
     /*When someone hovers over the link the colour goes black*/ 
     .links a:hover{ 
      background-color:#c6f22c; 
      color: #45473e; 
     } 
     .links .active{ 
      color:#6b8112; 
     } 

    </style> 

    <style id="bodyStyle"> 
     #headerImage img{ 
      width: 1245px; 
     } 
     body{ 
      background-color:#464646; 
      font-family:cursive, sans-serif; 
      color:#464646; 
     } 
     forms{ 
      color: #464646; 
      font-size: 20px; 
      background-color:floralwhite; 
      display: inline-block; 
     } 
     #formSection h1, h3{ 
      color:aliceblue; 
     } 
     #description{ 
      height: 150px; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <div class="Navigation"> 
     <!--Navigation Links with Logo. All Style code is in style sheets.--> 
     <img id="image2" src="Images/Logo.jpg" alt="Centennial Logo" /> 

     <ul id="navigationList"> 
      <li class="links"><a href="index.html">Home Page</a></li> 

      <li class="links"><a class="active" href="creatstudentprofile.html">Create Student Profile</a></li> 

      <li class="links"><a href="viewmyperformance.html">View My Performance</a></li> 
     </ul> 
    </div> 

    <div id="headerImage"> 
     <img src="Images/ecentennial-students.jpg" alt="Header Picture"/> 
    </div> 

    <div id="formSection" style="margin:0 auto; width:75%; text-align: center;"> 
     <h1>Enter the information below to create your student profile!</h1> 
     <h3>Create your Student Profile:</h3> 
     <forms> 
      <fieldset> 
       <legend>Student Profile</legend> 
       Name: 
       <br> 
       <input type="text" name="name" size="40"> 
       <br> 
       Email Address: 
       <br> 
       <input type="email" name="email" size="40"> 
       <br> 
       Year: 
       <br> 
       <select id="year" name="Year"> 
        <option value="year1">Year 1</option> 
        <option value="year2">Year 2</option> 
        <option value="year3">Year 3</option> 
       </select> 
       <br> 
       <input type="radio" name="computerType" value="mac">Mac 
       <input type="radio" name="computerType" value="pc">PC 
       <br> 
       Brief Description: 
       <br> 
       <input type="text" name="Description" size="40" id="description"> 
       <br> 
       <input type="Submit" value="Submit"> 
      </fieldset> 
     </forms> 
    </div> 
</body> 
</html>

來源

2016-10-06 sam yatsula

嘗試使用textarea的如： – user1211