Personalizar um formulário graficamente

Perguntaram-me como personalizar uma forma gráfica, na caixa de pesquisa especial um como o que neste blog. A técnica utilizada, ou melhor, que eu uso, é, obviamente, válido para qualquer tipo de forma de módulos. O que muda é apenas a complexidade do trabalho a ser feito, dependendo da complexidade do próprio formulário.

O Básico

Utilizando folhas de estilo você pode personalizar completamente o layout de qualquer forma de módulos. Um dos obstáculos que podem surgir, como muitas vezes acontece, é a sua compatibilidade com navegadores diferentes no mercado e terminar com resultados diferentes dependendo do navegador utilizado.
Por esta razão, muitas vezes, você optar por uma solução substancialmente gráficos, imagens que são exploradas para redefinir o layout do formulário. As imagens, de fato, são as únicas entidades que, exceto casos rai até à data são sempre exibidos os mesmos em todos os navegadores.

Nenhuma imagem

Antes de ver como alterar o layout de um formulário com as imagens que vemos o que "iria" pode fazer com apenas CSS. Um módulo é feita sob a forma de casos pelos tribunais maggiornza INPUT . No entanto o que vemos é, em geral, se aplicam a qualquer outro campo. Utilizando CSS podemos redefinir a aparência de nosso acampamento INPUT agindo em seu tamanho, no limite, o fundo, a fonte, etc ...
Por exemplo, você pode melhorar o desempenho simplesmente definindo:

1
2
3
4
5
6
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;
}

Mozilla FireFox e Safari também permite que você facilmente ajustar o arredondamento das bordas (ver também CSS3: alguém viu o Internet Explorer )

1
2
3
4
5
6
7
8
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

; -Moz-border-radius: 6px;
; -Webkit-border-radius: 6px;

Além disso, podemos inserir uma imagem de fundo para torná-lo mais "acessível" o significado do próprio campo:

1
2
3
4
5
6
7
8
9
10
11
input {
1px solid #aaa ; border: 1px solid # aaa;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

; -Moz-border-radius: 6px;
; -Webkit-border-radius: 6px;

url ( images/icon.png ) no-repeat ; background: url (images / icon.png) no-repeat;
20px ; padding-left: 20px;

permettiamo di posizionarla all'inizio del campo ma fuori dal testo. Se icon.png ícone é de 16 pixels de largura, por meio do padding gostaria de estar no início do campo, mas fora do texto.

As imagens na forma

O exemplo mais recente visto levaria a uma solução simples quando decidimos fazer o layout do nosso campo INPUT Completamente em gráficos. De fato, em teoria, seria suficiente para eliminar a borda do campo e inserir uma imagem de fundo diretamente na INPUT :

1
2
3
4
5
6
7
input {
none ; border: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat;

Eu digo em tese porque, enquanto esta técnica funciona (veja o Firefox), o outro produz efeitos estranhos em outro navegador (Microsoft Internet Explorer).
: A esperança para o obstáculo torna-se completamente transparente campo INPUT ea imagem está associada com a tag diretamente para o FORM :

1
2
3
4
5
6
7
8
9
10
11
12
13
input {
none ; border: none;
none ; background: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;
}
forma {
block ; display: block;
200px ; width: 200px;
24px ; height: 24px;
url ( images/custominput.png ) no-repeat ; background: url (images / custominput.png) no-repeat;
}

Todos com uma "marcação" do HTML como esta:

1
2
3
< formulário >
"text" name = "cerca" / > < input type = "text" name = "search" />
</ forma >

Dependendo da escolha dos gráficos e complexidade da forma, você só precisa de "pilha" corretamente, e em seguida, coloque, no campo INPUT imagem gráfica como pano de fundo do e-mail formulário abaixo. Isso é possível com margens adequadas para o campo INPUT si mesmo, para coincidir com o nosso layout:

1
2
3
4
5
6
7
8
9
10
input {
none ; border: none;
none ; background: none;
4px ; padding: 4px;
200px ; width: 200px;
12px ; font-size: 12px;

12px ; margin-top: 12px;
24px ; margin-left: 24px;
}

5 comentários para "Personalizando um formulário graficamente"

  1. 4 de dezembro de 2009 Napolux :

    Muito bom, como de costume. Como você personalizar um arquivo de entrada? Este artigo é muito bom, mas quando eu quero algo custom-made botões pequenos tendem a usar flash.

    Responder Citação
  2. 4 de dezembro de 2009 Giovambattista Fazioli :

    @ Napolux:

    Como você personalizar um arquivo de entrada?

    Um arquivo de entrada do campo não podem ser personalizados diretamente, como evidenciado pelo link que você me deixou. O Flash é a solução mais adotada, mesmo quando o filme do Flash está escondida eo layout é realizado através de um simples campo INPUT , ou totalmente em gráficos, e desencadeia a seleção de arquivos via de comunicação Javascript -> Flash. A seleção de arquivos, é claro, o processo inverso; Flash -> JavaScript.
    Além disso, a solução para permitir que o Flash para apoiar multiselect, então eu acho uma opção muito válida, a menos que contra-apropriado (ver por exemplo o backend WordPress quando você carrega uma mídia, é só usar Flash).
    (alias Ajax) non era ancora noto… Caso contrário - como mostrado no link que você deixou nos comentários - forçando um uso completamente HTML dell'artifizio de campo oculto arquivo de entrada ... que me lembra tanto o uso de IFRAME quando o objeto HTTPRequest (aka Ajax) não foi conhecida ... : D

    Responder Citação
  3. 06 de dezembro de 2009 As melhores posts da semana # 49 | EmaWebDesign:: Web Design / Programação Web / SEO :

    [...] 06) Personalizando um formulário graficamente [...]

  4. 27 de dezembro de 2009 francodane :

    Não campos de entrada personalizável?
    Desculpe eu me perdi ou algo ou algo não está certo, porque as propriedades cmq são personalizáveis.
    O que você fez referência?

    Responder Citação
  5. 27 de dezembro de 2009 Giovambattista Fazioli :

    @ Francodane: Eu nunca disse que o campo de input não são personalizáveis. O campo input tipo de arquivo, no entanto, é uma exceção ... isso não é customizável no sentido de que ele mostra uma layouts completamente diferentes dependendo do navegador. Para outros, entretanto, que a regra de compatibilidade ... ou, personalizar o que quiser, mas certifique-se o resultado em todos os navegadores.

    Responder Citação

Deixe um comentário

XHTML PERMIT TAG: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> CÓDIGO DE INSERÇÃO: 
 <pre></pre> // blocco generico <code></code> // blocco generico [cc_actionscript][/cc_actionscript] // Actionscript [cc_actionscript3][/cc_actionscript3] // Actionscript 3 [cc_css][/cc_css] // CSS Style Sheet [cc_html][/cc_html] // HTML [cc_js][/cc_js] // Javascript [cc_objc][/cc_objc] // Objective-C [cc_php][/cc_objc] // PHP [cc_sql][/cc_sql] // SQL