5 replies to this topic

[tanem]

Galera,

galera estou desenvolvendo um sistema em PHP qeu tera formularios em varias paginas.
Li varios exemplos de uso de forms com CSS, fiz alguns aqui e beleza.
Gostaria de saber se voces tem alguns legais para me ajudar como exemplo.

outra coisa....

Existe o jeito de colocar o ... Label em cima do input.
e colocar o label do lado direito do input..
Voces tem alguns exemplos??

Preciso de tentar criar um modelo CSS que eu precise alterar muito alinhamento etc... nas outras paginas....

O br depois do input, foge da regra do CSS? é usado?

Obrigado...

Estou enviando um exemplo com 2 modelos que citei no texto.

no 2º Exemplo eu consigo fazer, porem tenh que dar br depois o input.

e o 1º Exemplo não consigo fazer....


OBS: só usando css nada de tabela...


valeu rapaziada, desculpas se estou pedindo muito, é que entrei nessa area agora ( estou trabalhando com isso e terminando os cursos)... acabei de sair da minha area nativa que era redes, e estou meio perdido...

valeu.

Attached Files

•  formularios.jpg   11.21KB   6 downloads

Edição feita por: tanem, 09/04/2009, 00:37.

[Xico - WCS Design]

Bom vou tentar exemplificar como eu faço os forms...

Olha o html

<fieldset>
   <label>Nome: <input type="text" name="nome" id="nome_fld"></label>
   <label>Email: <input type="text" name="email" id="email_fld"></label>
</fieldset>

Bom agora é soh você manipular via CSS os tamanhos e a orientação dos objetos. Por exemplo com o nome do campo encima dele é soh ajustar o tamanho do input em 100%. Coloquei o tamanho da label em 400px assim ela fica com um tamanho mediano. para dar tamanho as layer de maneira correta você deve atribuir o display:block...

label{
	display:block;
	width:400px;
}
input{
	width:100%;	
}

Depois claro, você ajusta as propriedades como queira...

Bom pra colocar na frente também é simples. Só colocar um alinhamento a direita... o padding no codigo abaixo eu soh coloqueia pra dar um espaço de uma label pra outra. Ah note que eu diminui o tamanho do input pra 80%... você tem que diminuir pra que caiba o input e o texto na mesma linha!

label{
	display:block;
	width:400px;
	text-align:right;
	padding:2px 0 2px 0;
}
input{
	width:80%;
}

espero ter ajudado!

acbrax!

[tanem]

Xico,

Show de bola, valeu pela resposta.

Fiz os testes aqui e funcionou como voce disse, gostaria de saber como faço para usar esse estilo "label em cima do input", e ter mais de um input na mesma linha?.
Estou tentando fazer um padrão do formularios que não tenha que colocar classes em objetos separados, consegui montar um jeito que ficou ate legalzinho. Porem esta no estilo "label ao lado do input", e usei br para garantir o posicionamento os objetos.

Cara meu sistema esta em fase de desenvolvimento, tem como voce da uma olhadinha no link???
OBS: os dados estão incorretos, não coloquei dados legitimos, a ideia seria voces darem uma analizada no form.

Se puder salve a pagina como completa, pegue o css, e veja como fiz. Do jeito que fiz ficou bem facinho de dar manutenção e estruturar os demais formularios ( lembrando que serão mais de 15)

segue o link

http://tanemhomologa...cad_cliente.php


Obrigado mesmo por ter respondido. valeu.

[Édipo Costa Rebouças]

dá uma olhada no css desse form que fiz, carinhosamente apelidei de form-lego-lego

http://www.richmondcadastro.com.br/

[tanem]

Édipo,

Muito bom gostei desse modelo hem.... Acho que essa questão dos forms é parte mais dificil no css.
è o que estou encontrando maior dificuldade ja que tento fazer modelos que com apenas algumas classes consiga controlar todos os forms dos meus sistemas....


Mas, o fato de estar usando o br faz com que meu css fique "sujo" ?


Galera valeu pela ajuda, acho que esse tipo de topico tem que ser bastante comentado, ja que um dos maiores problemas em relação a sistemas web e a contrução de formularios bem acessiveis.


Édipo,

Mais uma vez gostei muito, vou estudar o css que voce usou rsrsrsrsrsrsrsrs..

valeu gente.

[Édipo Costa Rebouças]

acho uma tag não necessario para os forms, mas claro que vamos aperfeiçoando isso ao passar do tempo, meu form mesmo nao é perfeito se for falar em semantica, pois usa div para cada linha de input.

http://www.w3.org/TR...#s_xhtmlmodules

esse documento do xhtml 1.1 separa as tags em modulos, e seria bom você usar elas no contexto de se encontram, e esquecendo as tags do modulo de apresentação, pois nao teem siginificado semântico algum.