Semantic-UI Form Text Area Content

Last Updated : 11 Mar, 2022

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CSS. Semantic-UI forms provide us with a structured way for displaying a set of related input fields. It offers Forms in different variations, types, groups, and states.

In this article, we will learn about Semantic-UI Form Text Area Content along with implementation and example code. Semantic-UI Form Text Area Content provides us a way to allow extended user input. We can make a specified sized text area by setting rows to attribute to specify the height of the text area.

Semantic-UI Form Text Area Content Class:

field: This class is used to represent the input field.

Note : Use the <textarea> HTML tag to provide text area in the form to enable extended user input.

Syntax:

<div class="ui form">
  <div class="field">
    <textarea></textarea>
  </div>
</div>

Example 1: Below is the example that illustrates the use of Semantic-UI Form Text Area Content.

HTML

<html> 
  
<head> 
  <title>Semantic-UI Form Text Area Content</title> 
  
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
        rel="stylesheet"/> 
   <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
           integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
           crossorigin="anonymous"> 
  </script> 
  
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
</head> 
  
<body> 
  <center> 
    <div class="ui container"> 
      <h2 class="ui header green">Geeksforgeeks</h2> 
      <strong>Semantic-UI Form Text Area Content</strong> 
      <br><br> 
  
      <div class="ui form"> 
        <div class="field"> 
          <label>Textarea:</label> 
          <textarea></textarea> 
        </div>            
      </div> 
    </div> 
  </center> 
</body> 
  
</html>

Output:

Semantic-UI Form Text Area Content

Example 2: If we want to make a specific sized text area, we can use the rows attribute of textarea as shown in the following example.

HTML

<html> 
    
<head> 
  <title>Semantic-UI Form Text Area Content</title> 
  
  <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
        rel="stylesheet"/> 
  
   <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js" 
           integrity= 
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
           crossorigin="anonymous"> 
  </script> 
  
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
  </script> 
</head> 
  
<body> 
  <center> 
    <div class="ui container"> 
      <h2 class="ui header green">Geeksforgeeks</h2> 
      <strong>Semantic-UI Form Text Area Content</strong> 
      <br><br> 
      <div class="ui form"> 
        <div class="field"> 
          <label>Textarea :</label> 
          <textarea rows="20"></textarea> 
        </div> 
      </div>            
    </div> 
  </center> 
</body> 
  
</html>