CSS/HTML text area in form resize

Question

How do I make the text area in the Comment section to be as big as the section not only one row and start from the begging of the section not the middle. Here is the link to the code.

HTML

  <body bgcolor="#00BCD4">

  <div>
    <h1>Contact me</h1>

    <form action="MAILTO:me@me.com" method="post" enctype="text/plain">
      <label for="name"><font face="Roboto"><font color="red">*</font>Name</font>
            </label>
      <input type="text" name="name" required>
      <br>
      <label for="email"><font face="Roboto"><font color="red">*</font>E-mail</font>
            </label>
      <input type="text" name="mail" required>
      <br>
      <label for="comment"><font face="Roboto"><font color="red">*</font>Comment</font>
            </label>
      <input type="text" name="comment" style="height:220px;">
      <input type="submit" value="Send">
      <input type="reset" value="Reset">
    </form>
    <h2>or you can contact me in game @</h2>
    </div>

  </body>

CSS

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto);
input[type=text],
select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}

input[type=submit] {
  width: 30%;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 110%;
}

input[type=reset] {
  width: 25%;
  background-color: #f44336;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 110%;
}

input[type=submit]:hover {
  background-color: #45a049;
}

input[type=reset]:hover {
  background-color: #d32f2f;
}

div {
  border-radius: 5px;
  padding: 40px;
  margin: 0;
}

form {
  width: 300px;
  margin: 0 auto;
}

label {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 110%;
  font-weight: bold;
}

h1 {
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
}

h2 {
  font-weight: bold;
  font-family: 'Roboto Condensed', sans-serif;
  text-align: center;
}

Answer 1

you should use textarea in your form

<textarea cols="9(as u r desire)" rows="9(as u r desire)" name="comment"></textarea>

instead of this :

<input type="text" style="height:220px;" >

Answer 2

只需使用<textarea></textarea>而不是<input type="text"> 。

CSS/HTML text area in form resize

Question

2 answers

solution1
2 ACCPTED 2016-04-29 09:41:07

solution2
0 2016-04-29 09:42:27

CSS/HTML text area in form resize

Question

2 answers

solution1 2 ACCPTED 2016-04-29 09:41:07

solution2 0 2016-04-29 09:42:27

solution1
2 ACCPTED 2016-04-29 09:41:07

solution2
0 2016-04-29 09:42:27