Onsen UI CSS Component Basic Text Input

Last Updated : 26 Jul, 2022

Onsen UI is a cutting-edge and practical HTML5 framework that is available for usage for free. It simplifies UI development so that app developers may concentrate on the functionality of the software. Because it provides a huge selection of premium UI elements designed especially for mobile apps and packed with attributes that follow native iOS and Android design standards, Onsen UI is an excellent resource. Onsen UI is made to work with AngularJS, but it can also be used with jQuery or any other framework with ease. The Onsen UI JavaScript framework was created using PhoneGap and Cordova.

Onsen UI CSS Components, which are ready-to-use CSS components, may be utilized to quickly construct adaptive and appealing user interface layouts. The Onsen UI CSS components’ visual features are implemented using CSS (cssnext). With the help of Onsen CSS Components, a web-based Topcoat theme roller that is user-friendly for developers, creating aesthetically pleasing user interfaces is simple.

Onsen UI’s Basic Text Input provides us with a text input field that we can use to take text input. We can add the disabled attribute to disable the text input field it is not available to use.

Onsen UI CSS Component Basic Text Input Used Classes:

text-input: This class is used with an <input> element to create a basic text Input.
text-input–underbar: This class is used to add the bar underneath the text input field.

Syntax:

<div>
       <input type="text" 
           class="text-input text-input--underbar">
</div>

Example 1: The code below demonstrates how to create a basic text Input.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
          </h1> 
        <h3 style="margin-top:1rem;"> 
            Onsen UI CSS Component Basic Text Input 
          </h3> 
    </div> 
    <div style="margin:3rem;font-family:Roboto,sans-serif;"> 
        <input type="text" class="text-input text-input--underbar" 
        placeholder="text" value=""> 
    </div> 
</body> 
</html>

Output:

Example 2: The code below demonstrates how we can add a basic text input inside other CSS components like a card.

The card component is used in this example.

card: This class is added to the div container which will be defined as the card.
card–material: This class is added to the div container which will be defined as the card in material style.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
</head> 
  
<body> 
    <div style="margin:3rem;font-family:Roboto, sans-serif;"> 
        <h1 style="color:green;"> 
            GeeksforGeeks 
          </h1> 
        <h3 style="margin-top:1rem;"> 
            Onsen UI CSS Component Basic Text Input 
          </h3> 
    </div> 
    <div style="height:20px; padding:1px 0 0 0;  
    margin:3rem;font-family:Roboto,sans-serif;"> 
        <div class="card card--material"> 
            <div class="card__content card--material__content"> 
                <input type="text" class="text-input text-input--underbar" 
                placeholder="text" value=""> 
            </div> 
        </div> 
    </div> 
</body> 
</html>