HTML + CSS (Layout de Formulário)

 Tópico anterior Próximo tópico Novo tópico

HTML + CSS (Layout de Formulário)

ASP CLASSICO

 Compartilhe  Compartilhe  Compartilhe
#488186 - 07/04/2019 19:51:14

JCM0867
BALNEARIO CAMBORIU
Cadast. em:Março/2012


Última edição em 07/04/2019 20:21:28 por JCM0867

 Anexos estao visíveis somente para usuários registrados

Olá Pessoal,
Parece simples de resolver, Estou na aprendizagem e estou tendo uma certa dificuldade de arrumar o layout

Tenho por exemplo o seguinte formulário em HTML:

<form method="post" id="fContato">
    <fieldset id="usuario">
    <legend>Identificação do Usuário</legend>
           <p><label for="cNome">Nome:<input type="text" name="tNome" id="cNome" size="20" maxlength="30" placeholder="Nome Completo"></p>
           <p><label for="csenha">Senha 1:<input type="password" name="tSenha" id="cSenha" size="8" maxlength="8" placeholder="8 Digitos"></p>
           <p><label for="cEmail">E-mail:<input type="email" name="cEmail" id="cEmail" size="40" maxlength="40" placeholder="Email Válido"></p>
    </fieldset>
</form>

três perguntas:
1- Como faço um id única para os três label assim poderei leva-los para a esquerda de uma vez usando o CSS
Até poderia fazer um id igual para os três, mas imaginem um formulário com uns 30 campos.
Seria como se eles fossem um grupo, bastaria criar um id para o grupo e levar o grupo todo para a esquerda
2- Gostaria de alinhar a margem esquerda dos inputs.
Também daria para fazer um por um através dos id, mas me parece trabalhoso. Deve haver uma maneira mais fácil de alinhar.
3 - Como aproximo os parágrafos

Na imagem tem o antes e como gostaria que ficasse.

Grato





#488188 - 07/04/2019 22:56:12

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Bem vamos lá:
Entendo que está aprendendo HTML e CSS, isso é muito legal! Então a primeira dica: use elementos apropriados para cada tarefa. O elemento "<p>" é para um parágrafo e não deve ser usado como linha do jeito que está fazendo. Sugiro o uso do elemento <div> ou <span>, eles são mais apropriados para uso como placeholders e mais fáceis de serem estilizados. CSS é algo que está bastante avançado hoje em dia e não é necessário ser criado na unha, sugiro frameworks prontos e testados como o bootstrap. Para isso, basta incluir o CSS e JS do bootstrap, bem simples, assim:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>

Você pode também baixar esse CSS e JS para uma pasta da sua aplicação(uma pasta adjacente de onde está seu HTML) e usar localmente. Para exemplificar, fiz um fiddle pra você



_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#488189 - 08/04/2019 00:00:02

JCM0867
BALNEARIO CAMBORIU
Cadast. em:Março/2012


Muito bom, estou vendo uns videos sobre bootstrap
obrigado pelo fiddle, está começando a clarear as idéias
Aqueles tipos Cores, Data, botões, etc já tinha feitos testes, mas usando dentro de parágrafos <p>



#488190 - 08/04/2019 08:56:46

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Bootstrap tem muita coisa e estudar ele vale muito à pena! Veja aqui essa parte de Grid(grid mesmo, não tabelas) aqui

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#488195 - 08/04/2019 11:18:14

JCM0867
BALNEARIO CAMBORIU
Cadast. em:Março/2012


Última edição em 08/04/2019 11:28:02 por JCM0867

Deixa ver se eu entendi, Se instala o Bootstrap e depois se procura o que precisa, copia e cola e faz alguma alteração caso necessário?

Não entendi direito onde coloco estes códigos: Entre o <head> e o <body> como os outros scripts?
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>




#488196 - 08/04/2019 11:27:56

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Estes códigos, são as referências para o CSS e o jquery necessário para o bootstrap. Coloque no seu HTML, na seção header de preferência.

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#488197 - 08/04/2019 11:28:55

GUIMORAES
ITAPETININGA
Cadast. em:Agosto/2009


No site do bootstrap tem vários exemplos, além da documentação.

https://getbootstrap.com/docs/4.3/examples/

As referencias você deve adicionar na tag <head>.





#488202 - 08/04/2019 12:53:10

JCM0867
BALNEARIO CAMBORIU
Cadast. em:Março/2012


Não consegui fazer os Grids. Com certeza estou fazendo algo errado



#488203 - 08/04/2019 13:05:03

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Poste seu html pra vermos ou faça um fiddle

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


#488207 - 08/04/2019 18:19:41

JCM0867
BALNEARIO CAMBORIU
Cadast. em:Março/2012


Eu peguei o arquivos HTML, e joguei no <body>, referenciei o arquivo CSS.
parece só rodar o HTML sem o CSS. O CSS está com 75 erros.
Vou dar mais uma estuda num passo a passo, tem inúmeros na internet.
Eu não preciso instalar o Bootstrap? pode ser isso?



#488208 - 08/04/2019 18:20:28

KERPLUNK
RIO GRANDE DO SUL
Cadast. em:Junho/2009


Membro da equipe
Espera... o que você entende por HTML e o que você entende por CSS?

_______________________________________________________________________
Virei Oráculo!
The end is nigh, be ready for the nukes!


 Tópico anterior Próximo tópico Novo tópico


Tópico encerrado, respostas não sao permitidas
Encerrado por JCM0867 em 28/01/2020 23:06:33