Semantic-UI Input States

Semantic-UI Input Types

Last Updated : 01 Feb, 2022

Semantic UI is an open-source front-end development framework similar to Bootstrap to design an attractive web page. It has lots of components that help to create an attractive and responsive website layout.

Semantic-UI Input is a field that is used to get input from the users. Input type define the type of the input you asked from the user.

Semantic-UI Input Types Class:

input: This class is used to create a standard input field.

Syntax:

<div class="ui input">
  <input type="text" placeholder="">
</div>

Note: The input type in Semantic-UI is the same as the input type in HTML.

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Input Types</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />

    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>

        <h3>Semantic-UI Input Types</h3>

        <div class="ui input">
            <input type="text" 
                placeholder="Enter Name">
        </div>
        <br><br>
        
        <div class="ui input">
            <input type="number" 
                placeholder="Enter Contact No.">
        </div>
        <br><br>

        <div class="ui input">
            <input type="email" 
                placeholder="Enter Email Id">
        </div>
    </center>
</body>

</html>

Output:

Reference: https://semantic-ui.com/elements/input.html

Semantic-UI Input States

V

vkash8574

Improve

Article Tags :

Similar Reads

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. It uses a class to add CSS to the elements. Why Semantic UI?Semantic UI is becoming e

Introduction to Semantic UI

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.How to use Semantic UI ? Just google CDN semantic UI and you will get the CDN link for

Semantic-UI | Container

Semantic UI open-source framework provides a container which helps to limit content up to greatest width. The framework uses jQuery and CSS to create interactive user interfaces. It is very much similar to bootstrap usage and has different elements for creating page structure of any website. Example

Semantic-UI | Flag

Semantic UI open-source framework provides classes that are used to show flags of different countries. The framework is very much similar to bootstrap usage and has many elements for creating amazing interactive interfaces for websites. Classes are added to elements for adding styles. Example: The f

Semantic-UI | Icon

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is very much similar to bootstrap usage to make the website more amazing. It uses classes to add styles to the HTML el

Semantic-UI Icon Set

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 and responsive. An icon is a glyph used to represent something else. Semantic UI provi