如何在 HTML 表单中正确添加文本区域字段

Question

我大约两个月前开始学习 HTML 和 CSS。在我的联系表单中添加 'Comment' 部分时，我遇到了一些困难。

我未能成功添加更大的文本框供用户输入消息。 为什么我不能让我的消息文本区域更大？

代码如下：

<!DOCTYPE html>

    <!DOCTYPE html>
    <html lang="en-GB">
      <head>
        <meta charset="utf-8">
        <title>Netflix Title Recommendations</title>
        <style>
          header {
            text-align: center;
            margin-bottom: 40px;
            text-shadow: 16px 8px 16px grey;
            color: #C0392B;
          }
          
          .headers1 {
            font-size: 48px;
            font-family: garamond, serif;
          }
          
          .headers2 {
            font-size: 24px;
            font-family: garamond, serif;
          }
        
          .container {
            width: 800px;
            height: auto;
            margin-left: auto;
            margin-right: auto;
          }
          
          nav {
            text-align: center;
            padding: 0px 0px 15px 0px;
          }
        
          ul {
            list-style-type: none;
            margin: auto;
            padding: 0;
            width: 35%;
            height: 100%;
          }
          
          li {
            padding: 5px;
            display: block;
          }
        
          li a {
            color: #000;
            text-decoration: none;
            font-family: garamond, serif;
            font-size: 16px;
            font-weight: bold;
          }
          
          .button1, .button2, .button3, .button4, .button5, .button6 {
            background-color: #4CAF50;
            box-shadow: 5px 10px #f1f1f1;
          -webkit-border-radius: 15px
          
          }
          
          .button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
            background-color: white;
          }
          
          .main {
            text-align: justify;
            font-family: garamond, serif;
            font-size: 16px;
          }
          
          footer {
            text-align: center;
            font-size: 14px;
            font-family: garamond, serif;
            background-color: #E5E7E9;
            padding: 10px;
          }
          
        </style>
      </head>
      <body class="container">
        
        <header>
          <h1 class="headers1">Netflix UK Title Recommendations</h1>
          <h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
        </header>
        
        <nav>
          <ul>
          <button class="button1"><li><a href="#" class="homelink">Home</a></li></button>
          <button class="button2"><li><a href="#" class="aboutlink">About</a></li></button>
          <button class="button3"><li><a href="#" class="filmlink">Films</a></li></button>
          <button class="button4"><li><a href="#" class="tvlink">TV</a></li></button>
          <button class="button5"><li><a href="#" class="contactlink">Contact</a></li></button>
          <button class="button6"><li><a href="#" class="disclaimerlink">Disclaimer</a></li></button>
          </ul>
        </nav>
        
        <div class="main">
          <p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to 
          learn more about us in the 'About' section.</p>
          <p>We update this web site every week, so be sure to check back with us regularly to learn about
          some of the greatest new content you will find on Netflix UK.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc. 
          Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis. 
          Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem. 
          Aliquam sodales ipsum ac elementum venenatis.</p>
          <p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat. 
          Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet. 
          Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh. 
          Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper. 
          Nam eu rutrum lacus, a hendrerit leo.</p>
        </div>
        
        <!-- Contact form starts here -->
        <form class="contactform">
          <fieldset>
            <legend>Personal Information:</legend>
          <h3>Contact Me</h3>
          
          <label>First Name:</label><br />
          <input name="firstname" type="text"><br />
          <label>Last Name:</label><br />
          
          <input name="lastname" type="text"><br />
          <label>Email:</label><br />
          <input name="email" type="email"><br />
          
          <label>Gender:</label><br />
          <input type="radio" name="gender" value="male" checked> Male<br />
          <input type="radio" name="gender" value="female"> Female<br />
          
          <label for="msg">Message</label>
          <textarea="message" name="comment">Enter your message here</textarea><br />
          
          <input type="submit" value="Send" class="submit">
          </fieldset>
        </form>
        <!-- Contact form ends here -->
        
        <footer>Mathew J. M. | 2018 ™</footer>
      </body>
    </html>

<html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <title>Netflix Title Recommendations</title>
    <style>
      header {
        text-align: center;
        margin-bottom: 40px;
        text-shadow: 16px 8px 16px grey;
        color: #C0392B;
      }

      .headers1 {
        font-size: 48px;
        font-family: garamond, serif;
      }

      .headers2 {
        font-size: 24px;
        font-family: garamond, serif;
      }

      .container {
        width: 800px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
      }

      nav {
        text-align: center;
        padding: 0px 0px 15px 0px;
      }

      ul {
        list-style-type: none;
        margin: auto;
        padding: 0;
        width: 35%;
        height: 100%;
      }

      li {
        padding: 5px;
        display: block;
      }

      li a {
        color: #000;
        text-decoration: none;
        font-family: garamond, serif;
        font-size: 16px;
        font-weight: bold;
      }

      .button1, .button2, .button3, .button4, .button5, .button6 {
        background-color: #4CAF50;
        box-shadow: 5px 10px #f1f1f1;
      -webkit-border-radius: 15px

      }

      .button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover {
        background-color: white;
      }

      .main {
        text-align: justify;
        font-family: garamond, serif;
        font-size: 16px;
      }

      footer {
        text-align: center;
        font-size: 14px;
        font-family: garamond, serif;
        background-color: #E5E7E9;
        padding: 10px;
      }

    </style>
  </head>
  <body class="container">

    <header>
      <h1 class="headers1">Netflix UK Title Recommendations</h1>
      <h2 class="headers2">Films & TV Series For You To Watch on Netflix UK</h2>
    </header>

    <nav>
      <ul>
      <button class="button1"><li><a href="#" class="homelink">Home</a></li></button>
      <button class="button2"><li><a href="#" class="aboutlink">About</a></li></button>
      <button class="button3"><li><a href="#" class="filmlink">Films</a></li></button>
      <button class="button4"><li><a href="#" class="tvlink">TV</a></li></button>
      <button class="button5"><li><a href="#" class="contactlink">Contact</a></li></button>
      <button class="button6"><li><a href="#" class="disclaimerlink">Disclaimer</a></li></button>
      </ul>
    </nav>

    <div class="main">
      <p>Welcome to Netflix UK Title Recommendations! If this is your first visit, please take the time to 
      learn more about us in the 'About' section.</p>
      <p>We update this web site every week, so be sure to check back with us regularly to learn about
      some of the greatest new content you will find on Netflix UK.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac ultrices nunc. 
      Praesent tincidunt dui ante, id commodo leo volutpat sit amet. Cras porttitor gravida facilisis. 
      Curabitur vel placerat sapien. Sed tempor augue ac ullamcorper tincidunt. Etiam vitae elementum lorem. 
      Aliquam sodales ipsum ac elementum venenatis.</p>
      <p>Donec turpis arcu, scelerisque non facilisis a, volutpat id erat. 
      Vestibulum ultricies sagittis velit at suscipit. Fusce viverra urna sit amet ipsum volutpat aliquet. 
      Donec posuere, mi eget luctus eleifend, enim neque vehicula nunc, et mollis leo est non nibh. 
      Nam in egestas metus, ac mattis tortor. Sed vitae dolor faucibus neque gravida ullamcorper. 
      Nam eu rutrum lacus, a hendrerit leo.</p>
    </div>

    <!-- Contact form starts here -->
    <form class="contactform">
      <fieldset>
        <legend>Personal Information:</legend>
      <h3>Contact Me</h3>

      <label>First Name:</label><br />
      <input name="firstname" type="text"><br />
      <label>Last Name:</label><br />

      <input name="lastname" type="text"><br />
      <label>Email:</label><br />
      <input name="email" type="email"><br />

      <label>Gender:</label><br />
      <input type="radio" name="gender" value="male" checked> Male<br />
      <input type="radio" name="gender" value="female"> Female<br />

      <label for="msg">Message</label>
      <textarea="message" name="comment">Enter your message here</textarea><br />

      <input type="submit" value="Send" class="submit">
      </fieldset>
    </form>
    <!-- Contact form ends here -->

    <footer>Mathew J. M. | 2018 ™</footer>
  </body>
</html>

Answer 1

这是一个简单的错字，你写了

<textarea="message" name="comment"></textarea>

实际上是：

<textarea class="message" name="comment"></textarea>

那么你应该能够修复你的 css:

.message{
    height: 500px;
    width: 600px;
}

如何在 HTML 表单中正确添加文本区域字段

How to properly add a text area field in HTML forms

forms

types

fieldset