Titi macel Titi macel - 7 months ago 16
HTML Question

CSS/HTML text area in form resize

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

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;" >