Question

大约两个月前，我开始学习HTML和CSS。在联系表单中添加“评论”部分时，我有些挣扎。

我没有成功添加较大的文本框供用户输入其消息。 为什么不能使消息的文本区域更大？

代码如下：

<!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表单中正确添加文本区域字段

1 个答案: