Personalização avançada de formulário

msdos · 6 de março de 2011

Po eu olho esse formulário e fico só sonhando. Como ele foi feito. Muito legal mesmo.

Os formulários que eu crio são bem........comuns.

Vejam esse, está muito bem personalizado:

Como eu posso personalizar um formulário para que fique com a caixa de seleção do jeito que esta neste site? Ou bem próximo. É com css mesmo?

DiF · 6 de março de 2011

exato, podes fazer isso com css e jquery. por exemplo o jquery você pode usar para arredondar os cantos do campo sem ter q usar uma imagem para arredondar... e com css você determina o tamanho do campo e a cor de fundo.

se quiser daria ate pra fazer só com jquery..

kikoalemao · 6 de março de 2011

Qual o site do formulário?

E se tiver como especificar o que precisamente te impressionou no formulário, ajudará a dizer como é feito ^^

DiF · 6 de março de 2011

Qual o site do formulário?
E se tiver como especificar o que precisamente te impressionou no formulário, ajudará a dizer como é feito ^^

tem um anexo ali viu? ele quis dizer a personalizaçao dos campos de texto ali do login.

aquilo é melhor usar jquery pra arredondar os cantos... ou se quiser usar direto no css.. pode usar os elementos do CSS3 que nao funciona no IE..

por exemplo pra arredondar no firefox usa-se:

-moz-border-radius

DiF · 7 de março de 2011

Aqui vai um exemplo:

no HTML:


html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<link rel="stylesheet" href="css/estilo.css" type="text/css"/>
</head>
<body>
<div id="head">
<div id="space"></div>
<div id="header-form">
	<form id="form">
		Login: <input type="text" id="login" name="login" size="20"/>
		Senha: <input type="text" id="senha" name="senha" size="15"/>
			<input type="submit" value="Entrar" id="submit"/>
	</form>
	</div>
</div>
<div id="body">
	<div id="teste">
	<form id="form">
		login: <input type="text" id="login" name="login" size="20"/>
		Senha: <input type="text" id="senha" name="senha" size="15"/>
		</form>
	</div>
</div>
</body>
</html>

no CSS:


@CHARSET "ISO-8859-1";

*{padding: 0; margin: 0; border: 0;}

#head{width: 100%; height:100px; background-color: #237; }
#space{height: 10px;}
#teste{
	width: 30%; 
	height: 300px; 
	border: solid 1px #000000;
	margin-top: 10px; 
	margin-left: 10px; 
	-moz-border-radius: 32px;
}
#header-form{
	margin-left: 1%;
	color: #ffffff;
	width: 35%; 
	height: 30px; 
	border: solid 1px #ffffff;  
	-moz-border-radius: 15px; padding-top: 10px;
}

#login{ 
	background-color: lightgray; 
	-moz-border-radius: 6px; 
	border: solid 1px #000000;
}
#senha{ 
	background-color:lightgray; 
	-moz-border-radius: 6px; 
	border: solid 1px #000000;
}
#submit{-moz-border-radius: 10px;}
#form{margin-left: 20px;}

Resultado:

msdos · 7 de março de 2011

Obrigado pelos script, eu até manjo um pouco de css, mas mais para layout.

Qual o site do formulário?

Esse site ai http://www.capcom-unity.com/ ,..de jogo. Bem da elite por sinal. Alias o melhor form login que ja vi.

Te, dois sim, um na esquerda, o simples, e o de cima o avançado.

kikoalemao · 7 de março de 2011

dif, perguntei pois não existe só estilo e bordas arredondadas em um formulário. Existe validação, usabilidade, atalhos, etc.

msdos, se tiver um pouco de habilidade com javascript, sugiro que dê uma olhada na biblioteca less.js ou no SASS , são duas ferramentas que auxiliam bastante construção de estilo com qualidade de código hoje, na minha opinião.

Qualquer dúvida pergunte!

PS: Nos <input ... /> que representem campo senha, lembre-se de usar type="password" !

DiF · 7 de março de 2011

Obrigado pelos script, eu até manjo um pouco de css, mas mais para layout.
Esse site ai http://www.capcom-unity.com/ ,..de jogo. Bem da elite por sinal. Alias o melhor form login que ja vi.

Te, dois sim, um na esquerda, o simples, e o de cima o avançado.

volto a falar amigo.. isso é puramente css aquele login do canto direito la em cima em cinza...

você pode fazer assim:

vamos supor q seu input de login tenha class="login_usuario"

ficaria assim a personalizaçao unica apenas para aquele input


 input.login_usuario{ 
     -moz-border-radius: 32px; 
      background-color: gray;
}

isso faz com que você arredonde os cantos, e deixo com o fundo cinza.. ainda você poderiapor uma imagem em degradê de fundo adicionando no css:

background-image: url('imagem.png') repeat-x;

para repetir a imagem na horizontal caso você tenha feito uma imagem, fina e altinha com o degradê.

simples

msdos · 8 de março de 2011

msdos, se tiver um pouco de habilidade com javascript, sugiro que dê uma olhada na biblioteca less.js ou no SASS , são duas ferramentas que auxiliam bastante construção de estilo com qualidade de código hoje, na minha opinião.

...eu nunca usei javascript para formulários para ser sincero. Só para functions operacionais kikoalemao. Eu vou ter de fazer uma pesquisa esse dias spbre estas bibliotecas.

E acho que pelas dicas passadas o form deve ser mais ou menos assim.

Primeiramente o alinhamentos usando uma div flutuante, com height: 120px; width:20px; (mais ou menos). E mando ela la para cima. (o alinhamento talvez seja o pior) pois existem uns 6 navegadores variados que são usados. Afinal é um site global.

Para a classe seria:

background-color: gray;

font-size: 8px;

font-family: Times New Roman;

-moz-border-radius: 32px; (dif isso só serve para Firefox?)

Nas tags acertar o tipo de type para cada input.

É preciso testar antes sim.

Será que tem algum site com formulário mais avançado que este que eu escolhi? Mas tem muitos formulários comuns usados nos sites. Ai achei esse o site mais super style.

DiF · 8 de março de 2011

-moz-border-radius: 32px; (dif isso só serve para Firefox?)

nesse caso sim, mas você pode adicionar -webkit-border-radius para chrome, safari e opera.

ja no IE , tem q usar um hack. pois os malditos da microsoft fizeram o IE para nao interpretar o CS3. pelo menos ainda nao com uma nova atualizaçao.

você mencionou nas validaçoes... com jquery validation você faz tudo

caso você nao saiba...o jquery é uma biblioteca javascript.

hj em dia.. podes ter a absoluta certeza.. que a maioria( senao todos) usam jquery para personalizaçao e validaçao. o que eu te passei foi apenas um básico de personalizaçao de formularios.

certamente estilizaçao com CSS e jquery é essêncial para ter um visual diferenciado... do comum.

leia isto: https://developer.mozilla.org/en/css/-moz-border-radius

vai entender melhor na tabela de uso

msdos · 9 de março de 2011

nesse caso sim, mas você pode adicionar -webkit-border-radius para chrome, safari e opera.
ja no IE , tem q usar um hack. pois os malditos da microsoft fizeram o IE para nao interpretar o CS3. pelo menos ainda nao com uma nova atualizaçao.

O Firefox é um ótimo navegador por essas razões. Traz mais liberdade.na hora de personalizar.

O site do sass e vi que tem uma espécie de dropdown vertical para blocos. Bem dinâmico.

E outra o site do Banco do Brasil tem um formulário muito bem feito também. Semelhante ao do "melhor"....(quando eu tenho uma ideia sobre algo não tem jeito).

Acho que vou passar a usar jquery junto com css nos formulários personalizados, antes preciso aprender as técnicas.

Obrigado a todos pelas respostas!

DiF · 9 de março de 2011

isso amigo, te atira de cabeça em jquery e css que vai ser muito bom pra você.

posso te dar dica de livro:

Jquery - A biblioteca do programador javascript de Mauricio Samy Silva pela editora NOvatec. site: www.maujor.com (com exemplos dos capítulos)

eu tenho a primeira ediçao.

jquery é muito prático principalmente quando você quer por efeitos dinamicos no site como por exemplo.. clicar numa div e deslizar para baixo o conteudo. usando o "toogle" ou slide up e slide down.... esconder div também é muito mais fácil.. por exemplo no css você tinha que esconder setando o display: none; correto? no jquery você pode apenas usar a funçao .hide() e .show()..

enfim para mim a combinaçao perfeita para criar um site bem dinamico:

php + jquery + ajax = site dinamico com retorno rápido.. ou seja.. quando você usa ajax.. ele nao re-carrega a pagina.. mas sim apenas uma parte dele... tornado a resposta mais rápida.