Semantic-UI Form Text Area Content
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" >w3wiki</ 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:
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" >w3wiki</ 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 > |
Output: We can observe a text area of 20 rows in the output.
Reference: https://semantic-ui.com/collections/form.html#text-area