Open In App

Spectre Forms

Last Updated : 02 Mar, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

Spectre Forms is one of the most important elements in Spectre. Spectre forms offer us so many common style classes that designing a form becomes so easy. Like creating input fields, textarea, select, checkboxes, etc. All the components are mentioned and described below.

Spectre Forms Class:

  • form-group: This class is used to create a form

Note: To create a form in spectre above mentioned class will be container of forms component.

Syntax:

<div class="form-group">
...
</div>

Below example illustrate the Spectre Forms;

Example:

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>SPECTRE CSS Forms Class</title>
    <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 Class</strong>
        <br>
    </center>
    <form class="form-horizontal">
        <form class="form-horizontal">
              <div class="form-group">
                <div class="col-3 col-sm-12">
                  <label class="form-label">Name:</label>
                </div>
                <div class="col-9 col-sm-12">
                  <input class="form-input"
                       type="text"
                       placeholder="Name">
                </div>
              <div class="col-3 col-sm-12">
                  <label class="form-label">Email Id:</label>
                </div>
                <div class="col-9 col-sm-12">
                <input type="text col-6"
                       class="form-input is-success"
                       placeholder="Email Id"
                       value="mastermind@gmail.com">
                </div>
              </div>
            <label class="form-label">Gender:</label>
            <label class="form-radio">
              <input type="radio"
                     name="gender">
              <i class="form-icon"></i> Male
            </label>
            <label class="form-radio">
              <input type="radio"
                     name="gender">
              <i class="form-icon"></i> Female
            </label>
            <label class="form-label">
                Feedback:
            </label>
            <div class="col-9 col-sm-12">
                <textarea class="form-input"
                            id="input-example-1"
                            rows="3">
                </textarea>
            </div>
            <br>
            <button class="btn">
                <i class="form-icon icon icon-shutdown"></i>
            </button>
         </form>
  </form>
</body>
 
</html>
 






                        










Output:


Spectre Forms
Spectre Forms


Example 2:




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


        </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>


        <select class="form-select">


            <option>Choose Course</option>


            <option>Front-End Development</option>


            <option>Back-End Development</option>


            <option>Full-stack Development</option>


        </select>


        <label class="form-label">Special</label>


        <label class="form-checkbox form-inline">


        <input type="checkbox" name="gender">


        <i class="form-icon"></i>JS


        </label>


        <label class="form-checkbox form-inline">


        <input type="checkbox" name="gender">


        <i class="form-icon"></i>Spectre


        </label>


        <label class="form-label">Gender</label>


        <label class="form-radio">


          <input type="radio" name="gender" checked>


          <i class="form-icon"></i> Male


        </label>


        <label class="form-radio">


          <input type="radio" name="gender">


          <i class="form-icon"></i> Female


        </label>


        <br>


        <center>


            <button class="btn btn-success">


            Download


            <i class="form-icon icon icon-download"></i>


            </button>


            <button class="btn btn-error">


            Power Off


            <i class="form-icon icon icon-shutdown"></i>


            </button>


        </center>


    </div>


</body>


 


</html>



















                        







                        










Output:


Spectre Forms
Spectre Forms


Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms


                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    

                                        
                                        Suggest improvement
                                    

                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        Spectre Form sizes
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                Spectre Forms Horizontal forms
            

        
    
        
            

                Bootstrap Vertical Forms, Horizontal Forms, Inline Forms
            

        
    
        
            

                Spectre Forms Form Checkbox
            

        
    
        
            

                Spectre Forms Form Select
            

        
    
        
            

                Spectre Forms Form Switch
            

        
    
        
            

                Spectre Forms Form Radio
            

        
    
        
            

                Spectre Forms Form icons
            

        
    
        
            

                Spectre Forms Form validation styles
            

        
    
        
            

                Spectre Forms Input groups
            

        
    
        
            

                Spectre Forms Input types
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
S

        

            
        

        

                                    


                                    

                                        skyridetim                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox