Open In App

Semantic-UI Input Types

Last Updated : 01 Feb, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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=
        rel="stylesheet" />
  
    <script src=
    </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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads