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 Form input: This control styles used to set the input field.
- Spectre Form textarea: This control styles used to set the textarea.
- Spectre Form select: This control styles used to set the select options.
- Spectre Form radio: This control styles used to to set the radio buttons.
- Spectre Form switch: This control styles used to ti set the switch buttons.
- Spectre Form checkbox: This control styles used to set the checkboxes.
- Spectre Forms Inline forms: This control styles used to make the form inline.
- Spectre Forms Horizontal forms: This control styles used to make the form horizontal.
- Spectre Form sizes: This control styles used to the size of the form.
- Spectre Form icons: This control styles used to set the used icon in the form.
- Spectre Form Input types: This control styles used to set the input types.
- Spectre Form Input groups: This control styles used to categorized the input in groups.
- Spectre Form validation styles: This control styles used to set form validation success and error messages.
- Spectre Form disabled styles: This control styles used to disabled form components style.
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=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</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
Example 2:
HTML
<!DOCTYPE html><html>
<head>
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
<link rel="stylesheet"
href=
</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
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms