Entradas CSS puras – Barcelona Geeks

Las entradas son importantes en cualquier formulario de página web. Se utiliza para tomar varias entradas del usuario que son esenciales para recopilar datos o información.

Los siguientes son los diversos tipos de entradas en Pure CSS:

Entradas requeridas
Entradas deshabilitadas
Entradas de solo lectura
Entradas redondeadas
Casillas de verificación y radios

Entradas requeridas : si desea marcar un control de formulario como requerido, agregue el atributo «requerido» al elemento <input>. Supongamos que su formulario necesita un número de teléfono, entonces puede usar este atributo para mostrar que se requiere un número de teléfono.

Sintaxis:

<form class="pure-form">  
    <input type="…" placeholder="……" required>  
</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" 
    href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
    crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Required Inputs</h1>
  
    <!--Required input-->
    <form class="pure-form">
        <input type="tel" 
        placeholder="Requires a phone number" 
        required>
    </form>
</body>
  
</html>

Producción:

Entradas deshabilitadas: si no desea recibir ninguna entrada del usuario, puede usar entradas deshabilitadas. Agregue el atributo «deshabilitado» al elemento <input> para deshabilitar el control de formulario.

Sintaxis:

<form class="pure-form">
    <input type="…" placeholder="……" disabled="">
</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Disabled Inputs</h1>
  
    <!--Disabled input-->
    <form class="pure-form">
        <input type="text" 
        placeholder="This input is disabled.." 
        disabled="" />
    </form>
</body>
  
</html>

Producción:

Entradas de solo lectura: si desea que la entrada de un formulario solo sea legible, puede usar entradas de solo lectura. La principal diferencia entre las entradas de solo lectura y deshabilitadas es que las entradas deshabilitadas no son interactivas, mientras que en las entradas de solo lectura puede interactuar con la entrada y seleccionar su texto. Por lo tanto, todavía son enfocables. Agregue el atributo «solo lectura» al elemento <input> para crear entradas de solo lectura.

Sintaxis:

<form class="pure-form">  
    <input type="…" value="……" readonly>  
</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!-- Import Pure CSS files -->
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Read-only Inputs</h1>
  
    <!--Readable input-->
    <form class="pure-form">
        <input type="text"
         value="This input is readable.." readonly>
    </form>
</body>
  
</html>

Producción:

Entradas redondeadas: agregue el nombre de clase «pure-input-rounded» al elemento <input> para mostrar un control de formulario con esquinas redondeadas. Se puede utilizar para crear un cuadro de búsqueda en su página web.

Sintaxis:

<form class="pure-form">  
    <input type="…" class="pure-input-rounded">  
</form>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
    integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
    crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Rounded Inputs</h1>
  
    <!--Rounded Inputs-->
    <form class="pure-form">
        <input type="text" 
          class="pure-input-rounded">
        <button type="submit" 
          class="pure-button-primary">
          Search
        </button>
    </form>
</body>
  
</html>

Producción:

Casillas de verificación y radios: para normalizar y alinear casillas de verificación y entradas de radio, agregue la clase «casilla de verificación pura» o «radio pura» al elemento <etiqueta>.

Sintaxis:

Checkbox:
<label for="..." class="pure-checkbox">  
    <input id="…" type="checkbox" value="">  
    . . .
</label>  
      
Radio-button:        
<label for="..." class="pure-radio">  
    <input id="…" type="radio" name="..." value="">  
    . . .
</label>

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
  
    <!--Import Pure CSS files-->
    <link rel="stylesheet" href=
"https://unpkg.com/purecss@1.0.0/build/pure-min.css" 
      integrity=
"sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" 
      crossorigin="anonymous">
</head>
  
<body>
    <h1>Pure CSS Checkboxes and Radio Inputs</h1>
    <form class="pure-form">
  
        <!--Checkbox-->
        <label for="firstOption" class="pure-checkbox">  
            <input id="firstOption"
                   type="checkbox" value="">  
                Click this checkbox  
        </label>
  
        <!--Radio buttons-->
        <label for="secondOption" class="pure-radio">  
            <input id="secondOption" type="radio" 
                   name="optionsRadios" value="option1" checked>  
                Click this radio button.  
        </label>
  
        <label for="thirdOption" class="pure-radio">  
            <input id="thirdOption" type="radio"
                   name="optionsRadios" value="option2">  
                ..Or this one!  
        </label>
    </form>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

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

HTML

HTML

HTML

HTML

HTML

Deja una respuesta Cancelar la respuesta