HTML + CSS (Layout de Formulrio)

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

HTML + CSS (Layout de Formulrio)

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 formulrio em HTML:

<form method=[]post[] id=[]fContato[]>
    <fieldset id=[]usuario[]>
    <legend>Identificao do Usurio</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 Vlido[]></p>
    </fieldset>
</form>

trs perguntas:
1- Como fao um id nica para os trs label assim poderei leva-los para a esquerda de uma vez usando o CSS
At poderia fazer um id igual para os trs, mas imaginem um formulrio 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.
Tambm daria para fazer um por um atravs dos id, mas me parece trabalhoso. Deve haver uma maneira mais fcil de alinhar.
3 - Como aproximo os pargrafos

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! Ento a primeira dica: use elementos apropriados para cada tarefa. O elemento []<p>[] para um pargrafo e no deve ser usado como linha do jeito que est fazendo. Sugiro o uso do elemento <div> ou <span>, eles so mais apropriados para uso como placeholders e mais fceis de serem estilizados. CSS algo que est bastante avanado hoje em dia e no necessrio 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 tambm baixar esse CSS e JS para uma pasta da sua aplicao(uma pasta adjacente de onde est seu HTML) e usar localmente. Para exemplificar, fiz um fiddle pra voc



_______________________________________________________________________
Virei Orculo!
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 comeando a clarear as idias
Aqueles tipos Cores, Data, botes, etc j tinha feitos testes, mas usando dentro de pargrafos <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, no tabelas) aqui

_______________________________________________________________________
Virei Orculo!
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 alterao caso necessrio?

No entendi direito onde coloco estes cdigos: 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 cdigos, so as referncias para o CSS e o jquery necessrio para o bootstrap. Coloque no seu HTML, na seo header de preferncia.

_______________________________________________________________________
Virei Orculo!
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 vrios exemplos, alm da documentao.

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


No 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 faa um fiddle

_______________________________________________________________________
Virei Orculo!
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 inmeros na internet.
Eu no 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 Orculo!
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