CSS | Formas de estilo

Posted on by Rudeus Greyrat

El formulario CSS se utiliza para crear un formulario interactivo para el usuario. Proporciona muchas formas de establecer el estilo.

Hay muchas propiedades CSS disponibles que se pueden usar para crear y diseñar formularios HTML para hacerlos más interactivos, algunos de los cuales se enumeran a continuación:

  • Selector de atributos: el tipo de atributo del formulario de entrada puede tomar una variedad de formas según la elección del usuario. Podría ser cualquiera de los tipos posibles, como texto, búsqueda, URL, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio, archivo, etc. El usuario debe especificar el tipo al crear un formulario.

    Ejemplo:

    <!DOCTYPE html>
    <html>
        <head>
            <style>
            body{
                background-color:green;
            }
            </style>
        </head>
      
        <body>
            <center>
                <b>Is Geeksforgeeks useful ?</b>
                <form>
                    <input type="radio" name="useful" value="yes" checked> 
                    Yes <br>
                    <input type="radio" name="useful" value="def_yes"> 
                    Definitely Yes  
                </form>
            </center>
        </body>
    </html>                    

    Salida :

    Considere otro ejemplo donde el tipo de entrada es simplemente un texto:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>Do you find Geeksforgeeks helpful?</b>   
                <br>
            <input type="text" name="info"><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Estilo del ancho de entrada : la propiedad de ancho se usa para establecer el ancho del campo de entrada. Considere el siguiente ejemplo donde el ancho se establece en el 10% de toda la pantalla.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>Do you find Geeksforgeeks helpful?</b>
                <br>
            <input type="text" name="info"><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Agregar relleno en las entradas : la propiedad de relleno se usa para agregar espacios dentro del campo de texto. Considere el siguiente ejemplo:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                padding: 12px;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <form>
                <b>Do you find Geeksforgeeks helpful?</b><br>
                <input type="text" name="info"><br>
            </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Establecer margen para entradas : la propiedad de margen se usa para agregar espacio fuera del campo de entrada. Es útil cuando hay muchas entradas. Considere el siguiente ejemplo con dos entradas y observe el espacio (margen) entre ellas.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                margin: 8px;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>Mention two topics that you liked on Geeksforgeeks</b>
                <br>
            <input type="text" name="info"><br>
            <input type="text" name="info"><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Agregar borde y radio de borde : la propiedad de borde se usa para cambiar el tamaño y el color del borde, mientras que la propiedad de radio de borde se usa para agregar esquinas redondeadas.

    Considere el siguiente ejemplo donde se crea un borde rojo sólido de 2px con un radio de borde de 4px .

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                margin: 8px;
                border: 2px solid red;
                border-radius: 4px;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <form>
                <b>
                    Mention two topics that you liked on 
                    Geeksforgeeks
                </b>
                <br>
                <input type="text" name="info"><br>
                <input type="text" name="info"><br>
            </form>
        </center>
    </body>
    </html>                    

    Salida :

    Nota: el usuario también puede tener un borde en cualquier lado en particular y eliminar otros o tener todos los bordes de diferente color. Considere el siguiente ejemplo donde el usuario desea un borde solo en la parte superior (color azul) y en la parte inferior (color rojo).

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                margin: 8px;
                border: none;
                border-top: 3px solid blue;
                border-bottom: 3px solid red;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
            <form>
                <b>
                    Mention two topics that you liked on 
                    Geeksforgeeks
                </b>
                <br>
                <input type="text" name="info"><br>
                <input type="text" name="info"><br>
            </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Agregar color al texto y al fondo : la propiedad de color se usa para cambiar el color del texto en la entrada y la propiedad de color de fondo se usa para cambiar el color del fondo del campo de entrada.

    Considere el siguiente ejemplo donde el color del texto es negro y el color de fondo es verde.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                margin: 8px;
                border: none;
                background-color: green;
                color: black;
            }
              
            body{
                background-color:white;
            }
        </style>
    </head>
      
    <body>
        <center>
            <form>
                <b>
                    Mention two topics that you liked 
                    on Geeksforgeeks
                </b>
                <br>
                <input type="text" name="info"><br>
                <input type="text" name="info"><br>
            </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Selector de enfoque : cuando hacemos clic en el campo de entrada, obtiene un contorno de color azul. Puede cambiar este comportamiento utilizando :selector de enfoque.

    Considere el siguiente ejemplo donde el usuario quiere un contorno rojo sólido de 3px y un fondo verde cuando se enfoca.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width:10%;
                margin: 8px;
                color: black;
            }
              
            input[type=text]:focus {
            border: 3px solid red;
            background-color: green;
            }
              
            body{
                background-color:white;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>
                Mention two topics that you liked 
                on Geeksforgeeks
            </b>
            <br>
            <input type="text" name="info"><br>
            <input type="text" name="info"><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Agregar imágenes en el formulario de entrada : la propiedad de imagen de fondo se puede usar para colocar una imagen dentro del formulario de entrada y se puede colocar usando la propiedad de posición de fondo y el usuario también puede decidir si repetir o no.

    Considere el siguiente ejemplo con la imagen en segundo plano con el modo sin repetición.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width: 20%;
                background-image: url('search.png');
                background-position: 10px 10px; 
                background-repeat: no-repeat;
                padding: 12px 20px 12px 40px;
            }
              
            body{
                background-color:white;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>Search on Geeksforgeeks</b><br>
            <input type="text" name="info" placeholder="Search.."><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :

  • Propiedad de transición : la propiedad de transición se puede usar sobre el campo de entrada para cambiar el tamaño del campo especificando el ancho relajado y el ancho enfocado junto con el período de tiempo durante el cual se llevará a cabo la operación.

    Considere el siguiente ejemplo donde el ancho del campo de entrada relajado es del 15%, que cuando se enfoca cambia al 30% en 1 segundo.

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            input{
                width: 15%;
                -webkit-transition: width 1s ease-in-out;
                transition: width 1s ease-in-out;
            }
              
            input[type=text]:focus {
                width: 30%;
                border:4px solid blue;
            }
              
            body{
                background-color:green;
            }
        </style>
    </head>
      
    <body>
        <center>
        <form>
            <b>Search on Geeksforgeeks</b><br>
            <input type="text" name="info" placeholder="Search.."><br>
        </form>
        </center>
    </body>
    </html>                    

    Salida :
    cuando está relajado,

    cuando está enfocado,

Publicación traducida automáticamente

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *