Home-theater-designers
CSS pertence a uma classe única de linguagens, conhecidas como linguagens de folha de estilo. É usado principalmente para definir a apresentação de sua página da web. Embora o HTML permita que você especifique como sua página deve ser estruturada, é o CSS que é usado para estilizá-la. Caso contrário, você acabará com um site bastante desagradável.
Focar em CSS é uma das melhores maneiras de melhorar o apelo de seu site, especialmente quando se trata de aprimorar a experiência do usuário. Dessa forma, você também pode aumentar seu tráfego. Para começar, você pode usar um formulário empilhado.
O que é um formulário empilhado?
Um formulário empilhado permite que você crie um formulário especializado onde você pode colocar seus rótulos e entradas uns sobre os outros, em vez de colocá-los em um padrão horizontal.
Veja como você pode fazer isso.
Codifique o HTML
Use o elemento HTML, , para processar suas informações. Adicione rótulos para os campos relevantes e atribua os campos de entrada relevantes. Neste exemplo, estamos pedindo aos usuários que forneçam seus nomes completos e endereços de e-mail com o tipo de entrada do formulário texto , enquanto um menu suspenso é criado por meio de selecione id para ajudá-los a escolher seu setor.
What Is a Stacked Form?
Here's how you create a stacked form.
Full Name
Email Address
Department
Information Technology
Customer Support
Sales
No entanto, a execução desse código produzirá apenas uma forma branda, sem empilhar os campos verticalmente. E é aí que você terá que adicionar CSS.
como um comentário é destacado no youtube
Codifique a parte CSS
Agora, crie uma folha de estilo separada e adicione-a ao seu HTML antes da tag body:
Em seguida, selecione o corpo do seu HTML, tipos de entrada e contêiner e estilize-os por meio de CSS. Isso incluirá experimentar diferentes propriedades CSS, como família de fontes, largura, preenchimento, margem, exibição, borda, etc, e adicionar seus valores preferidos. Dessa forma, você acabará com um formulário empilhado que se adapta às suas preferências exatas. Aqui está um exemplo.
body {
font-family: Calibri;
}
input[type=text], select {
width: 25%;
padding: 12px 20px;
margin: 8px 10;
display: list-item;
border: 4px double #39A9DB;
border-radius: 8px;
box-sizing: border-box;
}
input[type=submit] {
width: 25%;
background-color: #F8E2E6;
color: #0000FF;
padding: 12px 18px;
margin: 20px 0;
border: none;
border-radius: 6px;
cursor: pointer;
}
div.container {
border-radius: 10px;
background-color: #39A9DB;
padding: 40px;
}
Verifique a saída abaixo.
Agora você pode criar um formulário empilhado em CSS
Com este artigo, você aprendeu como criar um formulário empilhado em CSS. Com a prática, você poderá refinar seus formulários e tornar seu site mais amigável.
aplicativos de transferência do Android para cartão SD
O nome do jogo de programação é 'prática'. Aprimore suas habilidades em CSS dia após dia com projetos de exibição para se tornar um web designer estiloso e um desenvolvedor web mais eficiente.
Compartilhado Compartilhado Tweet O email 10 exemplos de código CSS simples que você pode aprender em 10 minutosPrecisa de ajuda com CSS? Experimente estes exemplos básicos de código CSS para começar e, em seguida, aplique-os às suas próprias páginas da web.
Leia a seguir Tópicos relacionados- Programação
- Desenvolvimento web
- CSS
Usman é um profissional de marketing de conteúdo que ajudou várias empresas com crescimento orgânico em plataformas digitais. Ele gosta tanto de programar quanto de escrever, o que significa que a escrita técnica é algo de que gosta muito. Quando não está trabalhando, Usman gosta de passar o tempo assistindo programas de TV, acompanhando o críquete e lendo sobre análise de dados.
Mais de Usman GhaniAssine a nossa newsletter
Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!
Clique aqui para se inscrever