Spectre Forms Inline Form Last Updated : 24 Jan, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss the form inline forms. The form inline forms is an important component that can make any input field in a single line. Like In the previous articles we used radio, checkbox, etc they can be placed in a single line. Forms Form Inline forms Class: form-inline: This class is used to create a radio and checkboxes in a single line. Syntax: <label class="form-radio form-inline"> The below example illustrates the Spectre Forms Form Inline forms: Example: HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> <link rel="stylesheet" href= "https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> </head> <body> <center> <h1 class="text-success"> GeeksforGeeks </h1> <strong> SPECTRE Forms Form Inline forms Class </strong> </center> <br> <div class="form-group"> <label class="form-label"> Name </label> <input class="form-input" placeholder="Please type your name"> <label class="form-label"> Mail Id </label> <input class="form-input" placeholder="Your Mail Id"> <br> <label class="form-label">Gender</label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>Male </label> <label class="form-checkbox form-inline"> <input type="checkbox" name="gender"> <i class="form-icon"></i>Female </label> <br> <center> <button class="btn btn-success"> LogIn </button> <button class="btn btn-error"> Sign Up </button> </center> </div> </body> </html> Output: Spectre Forms Form Inline forms Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-inline Comment More infoAdvertise with us Next Article Spectre Forms Form Radio S skyridetim Follow Improve Article Tags : Web Technologies CSS Spectre Spectre-Element Similar Reads Spectre Forms Form Select The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form select. The form select is an important component that is required to get the option from the user as usual. Forms Form Select Class: form-select: This class is used to place 1 min read Spectre Forms Form Radio The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form radio. The form radio is an important component that is required to get the boolean option from the user as usual. Forms Form Radio Class: form-radio: This class gives the rad 1 min read Spectre Forms Horizontal forms Spectre Forms Horizontal forms are horizontal forms if you want to create a horizontal form then you have to use the form-horizontal class in form element. For each fields in the form you can use col-* and col-xs/sm/lg/xl-* class to the child elements for responsive form row layout. Here the * can b 2 min read Spectre Form sizes Spectre Forms Form sizes is used to define the size of the form depending on the page you have to change the size of the form sometime. For smaller or larger input and select controls, you could add the input-sm/input-lg, select-sm/select-lg and label-sm/label-lg classes to the form's elements. Form 2 min read Spectre Forms Input groups Spectre Forms Input groups are used to categorize the form field for example personal details, billing details. If the user wants to attach text and button along with input, add the input-group class to the input container. Add the input-group-addon class to the text element and input-group-btn to t 2 min read Spectre Form Input The Spectre Forms provide the most common control component used in a regular form. In this article, we will discuss form input. The form input is an important component that is required to get the data from the user as usual. Form Input Class: form-input: This class is used to create the input fiel 1 min read Like