Textarea CSS
We will comprehend the textarea CSS in this article. Let us understand the textarea first.
Textarea
The "textarea" is the HTML element that is utilized to construct a multiple-line text input area within the form.
Syntax:
The <textarea> is the opening tag, and </textarea> is the closing tag in the above-given syntax. The "rows" and "cols" are the attributes that define the size of the text area. The "rows" attribute defines the number of rows, and the "cols" attribute specifies the number of columns.
Use of <textarea> Element
It permits users to input large amounts of text. It is utilized in many places, which are given below:
- Message box: It is utilized to construct a message box where users can write and send long messages.
- Comments and feedback: It is utilized when constructing comments and feedback forms so that users can enter comments and feedback.
- Address field: It is utilized in the form to construct an address field so that users to input a multi-line address.
- Description box: It is utilized to construct a description box to describe something in detail.
Demonstration of <textarea> Element:
We will construct the textarea in this demonstration utilizing the <textarea> tags.
Code:
Output:
Here is the output in which we can witness the text area.
We will now comprehend the textarea CSS.
Textarea using CSS
The textarea CSS means giving style to the <textarea> element. We can apply style to the <textarea> element and make it more attractive with the help of CSS (Cascading Style Sheets). We can alter the visual appearance of the <textarea> element utilizing CSS properties.
Illustrations of the Textarea CSS
We will comprehend how to construct a styled text area with the help of illustrations.
Illustration 1:
We will put style to the <textarea> element in this illustration. We will utilize the following CSS properties to style the <textarea> element, which are font-family, font-size, padding, border, border-radius, and box-shadow.
Code:
Output:
Here is the result where we can witness the text area which looks stylish.
Illustration 2:
We will construct a Student Registration Form consisting of a <textarea> element that we will style utilizing CSS.
Code:
Output:
We can witness a Student Registration Form with a <textarea> element that has been styled using CSS properties.
Illustration 3:
We will construct a Contact Us Form consisting of a <textarea> element, which is styled utilizing CSS.
Code:
Output:
We can witness the Contact Us Form with the text area which has been styled using CSS properties.
Illustration 4:
We will construct the Comments and Feedback Form consisting of a <textarea> element, which we will style utilizing CSS.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Comments and feedback form</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: brown;
color: yellow;
text-align: center;
}
form {
color: white;
font-weight: 600;
font-size: 18px;
}
textarea {
font-size: 15px;
padding: 12px;
border: 2px solid yellow;
border-radius: 6px;
box-shadow: 4px 4px 4px yellow;
}
input[type="submit"] {
width: 90px;
height: 35px;
color: brown;
background-color: yellow;
font-size: 15px;
font-weight: bold;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>Comments and Feedback Form</h1>
<form>
<label for="name">Your name:</label>
<input type="text" id="name" name="name"> <br> <br>
<label for="email">Your email:</label>
<input type="email" id="email" name="email"> <br> <br>
<label for="comments-feedback">Comments and Feedback:</label> <br> <br>
<textarea id="comments-feedback" name="comments-feedback" placeholder="Type your comments and feedback" cols="30" rows="6"></textarea> <br> <br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Output:
We can witness the Comments and Feedback Form with the style provided on the form using CSS properties.
Browser Support
Following are the web browsers that support <textarea> element:
- Google Chrome
- Safari
- Internet Explorer
- Opera
- Microsoft Edge
- Firefox
Conclusion
We have understood the textarea CSS in this article with the help of illustration. We have comprehended how to create a text area on the webpage utilizing the <textarea> tag and then learned how to apply CSS on the <textarea> element.
|