Forma de espectro estilos deshabilitados

Los formularios Spectre proporcionan el componente de control más común utilizado en los formularios regulares. En este artículo, discutiremos los estilos de formulario deshabilitados. Spectre Forms Los estilos de formulario deshabilitados se utilizan para deshabilitar el campo de entrada del formulario. Solo el uso del atributo deshabilitado puede deshabilitar ese campo.

Formularios Forma estilos deshabilitados Clases: no hay clases predefinidas para deshabilitar ningún campo en Spectre, simplemente podemos usar la entrada HTML para deshabilitar el atributo para eso

Sintaxis:

 <input type="" disabled >

Ejemplo:

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

Producción:

Spectre Forms Forma estilos deshabilitados

Referencia: https://picturepan2.github.io/spectre/elements/forms.html#forms-disabled

Publicación traducida automáticamente

Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta