如何在HTML表单中正确添加文本区域字段
如何在HTML表单中正确添加文本区域字段
提问于 2018-08-14 06:13:51
大约两个月前，我开始学习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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-14 06:23:18
这只是一个简单的打字错误，你写的
<textarea="message" name="comment"></textarea>
实际上是：
<textarea class="message" name="comment"></textarea>然后你应该能够修复你的css：
.message{
height: 500px;
width: 600px;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51831277
复制相关文章
相似问题