Как правильно добавить поле текстовой области в HTML-формы
Я начал изучать 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 ответ
Решение
Это простая опечатка, вы написали
<textarea="message" name="comment"></textarea>
когда это на самом деле:
<textarea class="message" name="comment"></textarea>
Тогда вы сможете исправить свой CSS:
.message{
height: 500px;
width: 600px;
}