Semantic-UI Form Types

Last Updated : 10 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. The form is a container that has different types of input elements such as text fields, submit buttons, radio buttons, checkboxes, etc. Semantic-UI Form is used to create the beautiful form using form classes. It is used to show the related user input fields in a structured manner. In this article, we will discuss the Form Types in Semantic-UI.

Semantic-UI Form Types:

form: This class is used to create the form.

Syntax:

<form class="ui form">
   .....
</form>

Example 1: The following code demonstrates the Semantic-UI Form Types.

HTML

<!DOCTYPE html>
<html>

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

<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3>Semantic-UI Form Types </h3>
  </div> <br>

  <form class="ui form">
    <div class="field">
      <label>
        Username
      </label>
      <input type="text"
             placeholder="Username">
    </div>

    <div class="field">
      <label>
        Password
      </label>
      <input type="password"
             placeholder="Password">
    </div>

    <button class="ui button"
            type="submit">
      Login
    </button>
  </form>
</body>
</html>

Output:

Example 2: The following code demonstrates the Semantic-UI Form Types with more input fields.

HTML

<!DOCTYPE html>
<html>

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

<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2>  
    <h3>Semantic-UI Form Types </h3>
  </div> <br>

  <form class="ui form">
    <h4 class="ui dividing header">
      User Details
    </h4>

    <div class="field">
      <label>
        Name
      </label>
      <div class="two fields">
        <div class="field">
          <input type="text"
                 placeholder="Username">
        </div>
        <div class="field">
          <input type="password"
                 placeholder="Password">
        </div>
      </div>
    </div>

    <div class="field">
      <label>
        Address
      </label>
      <div class="three fields">
        <div class="seven wide field">
          <input type="text"
                 placeholder="Address">
        </div>
        <div class="five wide field">
          <input type="text"
                 placeholder="Pincode">
        </div>
        <div class="six wide field">
          <input type="text"
                 placeholder="City">
        </div>
      </div>
    </div>

    <div class="ui segment">
      <div class="field">
        <div class="ui toggle checkbox">
          <input type="checkbox"
                 class="hidden">
          <label>
            I agree to the Terms and Conditions
          </label>
        </div>
      </div>
    </div>
    
    <button class="ui button success"
            type="submit">
      Submit
    </button>
  </form>
</body>
</html>