Ancho de entrada CSS
Las hojas de estilo en cascada usan varias propiedades para diseñar cualquier contenido HTML. Uno de los efectos básicos que se usan es aumentar la dimensión del contenido en cualquier dirección específica (e.gramo., anchura y altura.) Este artículo discutirá la propiedad de ancho que es el desplazamiento en el tamaño original del contenido en la dirección horizontal.
Campo de entrada:
Al crear un formulario en la página web, a menudo usamos diferentes campos de texto para que el usuario ingrese los datos en este campo. Esto se hace por el tipo de entrada del campo, 'texto'. Utilizaremos la propiedad de ancho para mejorar el tamaño de los campos de entrada de HTML.
Ejemplo 1:
Este ejemplo incluirá la implementación de la muestra de un cuadro de texto que se declara en el cuerpo HTML junto con un CSS en línea. En línea CSS es el tipo de CSS que se declara dentro de la etiqueta HTML del cuerpo. Primero, declararemos un cuadro de texto simple utilizando la propiedad de ancho directamente en la etiqueta de tipo de entrada. Este código tendrá una parte del cuerpo directamente en el código, ya que no es necesario usar una sección principal. Dentro del cuerpo, se aplica un color de fondo.
Al completar un formulario en línea, debe haber notado que se escribe un texto pequeño con el cuadro de texto o el campo de texto. Este texto describe el propósito del cuadro de texto y el tipo de texto que se supone que el usuario debe ingresar. Por ejemplo, el nombre, la edad y la dirección son los campos de información requeridos del texto. Estos nombres de todos los campos se conocen como etiqueta. En HTML, se usa una etiqueta de etiqueta especificada para declarar la etiqueta para cada campo de texto, respectivamente.
| 1 | < label for = "name"> Ingrese un valor: |
Esta etiqueta utiliza el nombre del campo de texto a quien pertenece y aparecerá antes de que el campo especificado se declare en la página web. Entonces, se menciona el nombre de la etiqueta. Después de eso, declararemos el contenido del cuadro de texto. Mientras escribimos el texto, el sistema guarda o lo busca en el sistema. El tipo de entrada, mediante el uso de la identificación, será un texto con el nombre del campo.
| 1 |
La tercera propiedad en esta etiqueta pertenece al CSS. La propiedad de ancho se agrega con la instrucción de estilo para agregar la dimensión horizontal del cuadro de texto. Esto se hace a través del ancho.
Guarde este código en el editor de texto con la extensión HTML para ver la página web de este código en cualquier navegador. Abra este código con una opción en el navegador.
Verá que se forma un cuadro de texto simple con la etiqueta. Se da un ancho especificado en el cuadro, de lo contrario, tendría un área pequeña para recibir entrada.
Este concepto también se puede hacer utilizando un código de estilo separado en la parte del cabezal para que el código sea fácilmente comprensible. Este tipo de CSS en el que el estilo se agrega por separado en la sección de la cabeza se conoce como CSS interno. Esto se logra utilizando IDS y clases para la etiqueta específica en la que queremos agregar el efecto. Por ejemplo, la clase 'Helo' se crea para agregar ancho al cuadro de entrada.
| 1 2 3 4 5 6 7 8 9 |
El nombre de esta clase 'Helo' se agregará a la etiqueta de entrada como referencia para agregar todas las propiedades a este cuadro de texto Tipo de entrada.
| 1 |
En la ejecución, se crea el mismo cuadro de texto.
Ejemplo 2: Selector CSS
A diferencia del concepto anterior de declarar la propiedad de ancho al cuadro de texto como CSS en línea e interno a través del fenómeno de clase, hay otra característica que se utiliza para aplicar cualquier efecto al contenido HTML. Este es un selector CSS. Este selector es diferente para cada contenido HTML. La declaración del selector también se realiza como el CSS interno dentro de la etiqueta de estilo en la sección de la cabeza.
| 1 2 3 4 5 | Entrada [type = "text"] Ancho: 200px; |
Esto se hace utilizando la entrada de palabras clave dentro de los soportes. Se menciona el tipo de entrada que especifica la declaración de un campo de texto. Dentro de esta declaración, se aplica el ancho del campo.
Dentro del cuerpo, no hay necesidad de agregar ningún nombre de clase o más detalles para referencia. Cuando declaramos el tipo de entrada para la creación del cuadro de texto, se conecta automáticamente a la etiqueta de estilo dentro de la sección de la cabeza.
Ejemplo 3:
Hay otro ejemplo de aplicar el ancho al cuadro de texto. Esto se hace utilizando la etiqueta de estilo dentro de la etiqueta de contenido de entrada HTML y agregando más margen y acolchado a los campos de texto para mejorar la propiedad de ancho. La propiedad de ancho se aplica a un campo de texto solo mientras el otro contiene la configuración predeterminada. Esto mostrará la diferencia al declarar un cuadro de bandeja de entrada de texto con y sin estilo de ancho. Ahora comencemos con el código de cuerpo HTML para elaborar el funcionamiento de la etiqueta de estilo de ancho.
Primero, dentro del cuerpo, hemos declarado un encabezado. Luego, use un contenedor DIV en la página web. La función principal de este contenedor es agregarle contenido HTML con alineación especificada para mantenerlos en el lugar adecuado. Dentro de la etiqueta, use la etiqueta de la etiqueta para agregar el nombre. Luego, use la etiqueta de entrada para el campo de texto y agregue un tamaño de 10. La diferencia en tamaño y ancho es que el ancho amplía el cuadro de texto en píxeles. Mientras que el tamaño también se usa para aumentar las dimensiones de cualquier objeto, pero se aplica a los agrandamientos verticales y horizontales.
Tómese un descanso en el
etiqueta. Luego, use nuevamente otro cuadro de texto para los datos. Agregue el campo de entrada de tipo de datos para que el usuario pueda agregar solo la fecha de acuerdo con el formato. El símbolo del calendario también se formará que es una característica incorporada.
En la porción CSS, se agrega la fuente de la etiqueta. Y para el campo de entrada, hemos utilizado las propiedades de margen y acolchado.
| 1 2 3 4 5 6 7 | Aporte Margen: 7px; Relleno: 2px; |
En la ejecución, verá que el atributo de tamaño ha ampliado el tamaño general del cuadro de texto de nombre. Mientras que la propiedad de ancho ha aumentado el tamaño horizontal.
Conclusión:
Un ancho de entrada CSS es una característica que se utiliza para mejorar el tamaño de los campos de tipo de entrada, estos campos son cuadros de texto, áreas de texto y casillas de verificación. Utilizamos los cuadros de texto para elaborar el funcionamiento de la propiedad de ancho en CSS en línea y CSS interno. La diferencia entre el tamaño y la función de ancho también se explica. La propiedad de ancho juega un papel importante en la alineación de la forma manteniendo el valor de la relación de ancho igual para todos los campos de texto.