Spectre Forms Input types

Last Updated : 28 Jan, 2022

Spectre Forms Input types class is used to define the input types of the input field of a form. It can be implemented by pure HTML.

Forms Input types Classes: There is no defined class for the HTML input type.

Syntax:

 <input type="HTML input type attribute">

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 Input types class</strong>
        <br>
    </center>
    <form class="form-horizontal">
        <form class="form-horizontal">
              <div class="form-group">          
                  <label class="form-label">Name:</label>
          
                  <input class="form-input" type="text" 
                       placeholder="Name">
           
                  <label class="form-label">Email Id:</label>
          
                  <input class="form-input" type="text"
                       placeholder="Email Id">
              </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>
            <input type="button" class="btn"
                   value="Submit">         
  </form>
</body>
</html>

Output:

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

Spectre Form Input

skyridetim

Improve

Article Tags :

Spectre Forms Input types

Similar Reads

Thank You!

What kind of Experience do you want to share?