Semantic-UI Form Group Equal Width Fields Variation

Last Updated : 09 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. Form Group Equal Width Fields variation is used to automatically divide the fields into equal widths. If we have multiple fields in a row then all the fields will be having an equal width. In this article, we will discuss the Form Group equal width fields variation in Semantic-UI.

Semantic-UI Form Group Equal Width Fields Variation Class:

equal width fields: It is used to automatically divide the fields into equal widths.

Syntax:

<div class="ui form">
      <div class="equal width fields">
        <div class="field">
            ...
         </div>
         ...
      </div>
</div>

Example 1: The following example demonstrates the Semantic-UI Form Group Equal Width Fields Variation.

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 Group Equal Width Fields Variation </h3>
  </div> <br>

  <div class="ui form">
    <div class="equal width fields">
      <div class="field">
        <label>
          Enter your First name
        </label>
        <input type="text" placeholder="First Name">
      </div>
      <div class="field">
        <label>
          Enter your Middle name
        </label>
        <input type="text" placeholder="Middle Name">
      </div>
      <div class="field">
        <label>
          Enter your Last name
        </label>
        <input type="text" placeholder="Last Name">
      </div>
    </div>
  </div>
</body>
</html>

Output:

Example 2: The following code demonstrates the Semantic UI Form Group Equal Width Fields variation with multiple input fields in a row.

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 header green"> GeeksforGeeks </h2>  
    <h3> Semantic-UI Form Group Equal Width Fields Variation </h3>
  </div> <br>

  <div class="ui form">
    
    <div class="equal width fields">
      <div class="field">
        <label>
          Enter your First name
        </label>
        <input type="text" placeholder="First Name">
      </div>
      <div class="field">
        <label>
          Enter your Last name
        </label>
        <input type="text" placeholder="Last Name">
      </div>
    </div>

    <div class="equal width fields">
      <div class="field">
        <label>
          Enter your Email
        </label>
        <input type="email" placeholder="Email">
      </div>

      <div class="field">
        <label>
          Enter your Mobile number
        </label>
        <input type="number" placeholder="mobile">
      </div>
      <div class="field">
        <label>
          Set your password
        </label>
        <input type="password" placeholder="password">
      </div>
      <div class="field">
        <label>
          Confirm your password
        </label>
        <input type="password" placeholder="confirm password">
      </div>
    </div>
  </div>
</body>
</html>