Spectre Form disabled styles
The Spectre Forms provide the most common control component used in regular forms. In this article, we will discuss the form disabled styles. Spectre Forms Form disabled styles is used to disable the form input field. Only the use of the disabled attribute can disable that field.
Forms Form disabled styles Classes: There are no predefined classes to disable any field in Spectre, we can simply use HTML input disable the attribute for that
Syntax:
<input type="" disabled >
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" >w3wiki</ h1 > < strong >SPECTRE Forms Form disabled styles Class</ strong > < br >< br > </ center > < form > < div class = "input-group" > < div class = "input-group" > < span class = "input-group-addon " > Username </ span > < input type = "text" class = "form-input is-success" placeholder = "Username" value = "Mastermind@Pubg" > </ div > < span class = "input-group-addon" > Password </ span > < input type = "text" class = "form-input is-error" placeholder = "Password" value = "********" > </ div > < br > < div class = "input-group col-12" > < span class = "input-group-addon" > Email Id </ span > < input type = "text col-6" class = "form-input is-success" placeholder = "Email Id" value = "mastermind@gmail.com" disabled > < button class="btn btn-success input-group-btn col-3"> LogIn </ button > </ div > < label class = "form-checkbox" > < input type = "checkbox" disabled > < i class = "form-icon" ></ i > I agree that the content of the course will not be used for any bad purpose </ label > < p > < span class = "text-error" >Incorrect Password</ span > Password hint: < span class = "form-input-hint" > Your First School Friend </ span > </ p > </ form > </ body > </ html > |
Output:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-disabled
Contact Us