Largura de entrada CSS

As folhas de estilo em cascata usam várias propriedades para estilizar qualquer conteúdo HTML. Um dos efeitos básicos usados ​​é aumentar a dimensão do conteúdo em qualquer direção específica (e.g., largura e altura.) Este artigo discutirá a propriedade de largura que é o deslocamento no tamanho original do conteúdo na direção horizontal.

Campo de entrada:

Ao criar um formulário na página da web, geralmente usamos diferentes campos de texto para inserir os dados nesse campo pelo usuário. Isso é feito pelo tipo de entrada do campo, 'texto'. Usaremos a propriedade de largura para aumentar o tamanho dos campos de entrada do HTML.

Exemplo 1:

Este exemplo incluirá a implementação de amostra de uma caixa de texto declarada no corpo HTML junto com um CSS embutido. CSS embutido é o tipo de CSS que é declarado dentro da tag html do corpo. Primeiro, declararemos uma caixa de texto simples usando a propriedade de largura diretamente na tag do tipo de entrada. Este código terá uma parte do corpo diretamente no código, pois não há necessidade de usar uma seção da cabeça. Dentro do corpo, uma cor de fundo é aplicada.

Ao preencher um formulário online, você deve ter notado que um pequeno texto está escrito de lado com a caixa de texto ou o campo de texto. Este texto descreve o objetivo da caixa de texto e o tipo de texto que o usuário deve inserir. Por exemplo, o nome, idade e endereço são as informações necessárias para os campos do texto. Esses nomes de todos os campos são conhecidos como rótulo. No HTML, uma etiqueta de etiqueta especificada é usada para declarar o rótulo para cada campo de texto, respectivamente.

Esta tag usa o nome do campo de texto a quem pertence e aparecerá antes que o campo especificado seja declarado na página da web. Então, o nome da etiqueta é mencionado. Depois disso, declararemos o conteúdo da caixa de texto. Enquanto escrevemos o texto, o campo de entrada é salvo ou buscado pelo sistema. O tipo de entrada, usando o ID dele, será um texto com o nome do campo.

A terceira propriedade nesta tag pertence ao CSS. A propriedade de largura é adicionada com a declaração de estilo para adicionar a dimensão horizontal da caixa de texto. Isso é feito através da largura.

Salve este código no editor de texto com a extensão HTML para visualizar a página da web deste código em qualquer navegador. Abra este código com uma opção no navegador.

Você verá que uma caixa de texto simples com a etiqueta é formada. Uma largura especificada é dada à caixa, caso contrário, teria uma pequena área para obter informações.

Esse conceito também pode ser feito usando um código de estilo separado na parte da cabeça para tornar o código facilmente compreensível. Esse tipo de CSS em que o estilo é adicionado separadamente na seção da cabeça é conhecido como CSS interno. Isso é realizado usando IDs e classes para a tag específica na qual queremos adicionar o efeito. Por exemplo, a classe 'Helo' é criada para adicionar largura à caixa de entrada.

O nome desta classe 'Helo' será adicionado à tag de entrada como uma referência para adicionar todas as propriedades a esta caixa de texto do tipo de entrada.

Na execução, a mesma caixa de texto é criada.

Exemplo 2: seletor CSS

Ao contrário do conceito anterior de declarar a propriedade de largura na caixa de texto como CSS embutido e interno através do fenômeno da classe, há outro recurso usado para aplicar qualquer efeito ao conteúdo HTML. Este é um seletor CSS. Este seletor é diferente para cada conteúdo HTML. A declaração seletora também é feita como o CSS interno dentro da etiqueta de estilo na seção da cabeça.

Isso é feito usando a entrada de palavras -chave dentro dos colchetes. O tipo de entrada é mencionado que especifica a declaração de um campo de texto. Dentro desta declaração, a largura do campo é aplicada.

Dentro do corpo, não há necessidade de adicionar nenhum nome de classe ou mais detalhes para referência. Quando declaramos o tipo de entrada para a criação da caixa de texto, ela é automaticamente conectada à tag de estilo dentro da seção da cabeça.

Exemplo 3:

Há outro exemplo de aplicação da largura na caixa de texto. Isso é feito usando a etiqueta de estilo dentro da tag de conteúdo de entrada HTML e adicionando mais margem e preenchimento aos campos de texto para aprimorar a propriedade de largura. A propriedade de largura é aplicada a um campo de texto apenas enquanto a outra contém as configurações padrão. Isso mostrará a diferença na declaração de uma caixa de tipo de entrada de texto com e sem estilo de largura. Agora vamos começar com o código corporal HTML para elaborar o funcionamento da tag de estilo de largura.

Primeiro, dentro do corpo, declaramos um título. Em seguida, use um recipiente de div na página da web. A principal função deste contêiner é adicionar conteúdo html a ele com alinhamento especificado para mantê -los no lugar apropriado. Dentro da tag, use a etiqueta da etiqueta para adicionar o nome. Em seguida, use a tag de entrada para o campo de texto e adicione um tamanho de 10 a ele. A diferença de tamanho e largura é que a largura aumenta a caixa de texto em pixels. Considerando que o tamanho também é usado para aumentar as dimensões de qualquer objeto, mas é para ampliações verticais e horizontais.

Faça uma pausa no
marcação. Em seguida, use novamente outra caixa de texto para os dados. Adicione o campo de entrada do tipo de dados para que o usuário possa adicionar apenas a data de acordo com o formato. O símbolo do calendário também será formado, que é um recurso interno.

Na parte CSS, a fonte para o rótulo é adicionada. E para o campo de entrada, usamos as propriedades de margem e preenchimento.

Na execução, você verá que o atributo de tamanho aumentou o tamanho geral da caixa de texto de nome. Considerando que a propriedade de largura aumentou o tamanho horizontal.

Conclusão:

Uma largura de entrada CSS é um recurso usado para melhorar o tamanho dos campos do tipo de entrada, esses campos são caixas de texto, áreas de texto e caixas de seleção também. Usamos as caixas de texto para elaborar o funcionamento da propriedade de largura em CSS embutido e CSS interno. A diferença entre o tamanho e o recurso de largura também é explicada. A propriedade de largura desempenha um papel importante no alinhamento do formulário, mantendo o valor da proporção de largura a mesma para todos os campos de texto.