Para cada programador, fornecer aos usuários uma interface de estilo unificado é um requisito imutável. No entanto, é particularmente difícil alcançar essa unificação de estilo nas páginas da web, porque existem diferenças na maneira como diferentes sistemas operacionais e navegadores expressam o conteúdo da página da web, e essa diferença é quase irregular. Esse problema é particularmente proeminente no processo de processamento de elementos de formulário. O que deixa muitas pessoas impotentes é a questão dos padrões de desempenho unificados dos botões de envio.
Por exemplo, a tag de entrada com o atributo type = envie parece muito feia em diferentes navegadores (no Firefox) ou tem um tipo de falha (no Internet Explorer), ou mesmo age muito rígido (no Safari). A solução para esse problema é geralmente definir a propriedade de entrada para a imagem e, em seguida, projetar uma imagem de botão sozinho. Mas temos que adicionar muito trabalho muito irritante toda vez que precisamos usar os botões. Portanto, precisamos de uma solução melhor, uma abordagem mais flexível e significativa para os designers. Felizmente, esse método já existe na realidade, e o que precisamos é fazer um pouco mais de trabalho. Amigos, por favor, permita -nos apresentar a você nosso amiguinho fofo, colega de classe <butter>!
Botão de entrada vs.
Aqui está o rótulo do botão de envio que você está usando:
<Tipo de entrada = Submete Valor = Enviar />
Seus estilos de desempenho em diferentes navegadores são os seguintes:
E quando usamos <butter> para criar o botão como acima:
<Button Type = Enviar> Envie </butut>
Eles são expressos no seguinte estilo:
Esses botões não são diferentes dos botões que criamos acima em seu comportamento de corrida e apresentação. Além de usá -los para enviar o formulário como, você também pode configurá -los como indisponíveis, adicionar atalhos ou definir um Tabindex, etc. Felizmente, além dos diferentes estilos de expressão, o Safari suporta essas funções (em comparação com os botões de entrada, o botão de botão no Safari não tem o efeito líquido na superfície). A função mais legal da etiqueta <butter> é que podemos colocar alguns elementos HTML úteis dentro dela, como adicionar imagens usando o seguinte código:
<Button Type = submit> <img src = alt = /> submeter </botão>
Sua aparência no navegador é a seguinte:
Nada mal. De fato, de acordo com a definição de W3C, o elemento <button> surgiu para resolver essas diferenças de desempenho.
Os botões criados com a função do elemento do botão, assim como os botões criados com o elemento de entrada, mas oferecem possibilidades de renderização mais ricas: o elemento do botão pode ter conteúdo. Por exemplo, um elemento de botão que contém uma imagem funções como e pode se parecer com um elemento de entrada cujo tipo é definido como imagem, mas o tipo de elemento do botão permite o conteúdo.
O elemento do botão - W3c
Portanto, precisamos encontrar uma solução de design para isso e, felizmente, a Internet com dados maciços pode nos fornecer alguma ajuda útil para resolver esse problema. Isso é realmente muito conveniente, mas, infelizmente, designers e desenvolvedores de sites nem sabem a existência desse elemento. Antes de decidir substituir o Wufoo pelo elemento do botão (um produto de rede deste artigo, Dudo Note), tenho que ter certeza de que essa tag e CSS podem atender às seguintes necessidades:
Requisitos:
1. Eles devem ter a aparência dos botões
2. Existem os mesmos estilos de expressão em diferentes navegadores
3. Os estilos aplicados no botão também podem ser usados em hiperlinks (porque as interações no wufoo sempre usam o método de envio de formulário e vincula o contato para enviar o método Ajax, eles geralmente podem estar próximos, então eu preciso que eles tenham o mesmo estilo de expressão)
4. A tag pode ser flexível e fácil de modificar em diferentes circunstâncias
5. Para eventos que ocorrem durante a transmissão de informações, você pode distingui -los efetivamente por ícones e cores.
Diante dos problemas acima, escrevi alguns CSs pela primeira vez e depois resolvi o problema do navegador cruzado. Em seguida, veremos:
Resultado finalNão há nada para fazer uma confusão sobre isso, é muito simples, mas é muito eficaz. A razão pela qual eu gosto de usar esse método e manipular os botões é porque não preciso iniciar a criação do Photoshop, um por um para criar 10.000 ícones. Se olharmos para o código com cuidado, você descobrirá que os dois botões por trás são na verdade dois links.
<div class = botões>
<Button Type = Enviar classe = positivo>
<img src =/imagens/icons/tick.png alt =/>
Salvar
</button>
<a href =/senha/redefinir/
<img src =/imagens/icons/textfield_key.png alt =/>
Alterar a senha
</a>
<a href =# class = negativo>
<img src =/imagens/icons/cross.png alt =/>
Cancelar
</a>
</div>
O objetivo disso ocorre porque muitas ações nos aplicativos da Web são orientadas pelo evento (REST); portanto, enviar solicitações de usuário através de um URL específico pode inicializar essas ações. O uso de estilos que pode ser aplicado em ambos os elementos torna nossa unificação de estilo mais flexível ao manter a interação causada pelo AJAX e botões de envio padrão.
Agora você pode perguntar: por que deixo o atributo alt do elemento de imagem em branco? Alt é um atributo necessário do elemento IMG. É usado para explicar o conteúdo da imagem, mas não há descrição relevante da imagem aqui, o que é realmente um pouco confuso. No entanto, diferentemente dos atributos ausentes, o valor de atributo vazio está completamente alinhado com o padrão. Ele disse ao navegador que essas imagens representam algumas informações completamente insignificantes, o que também impede que o navegador não consiga encontrar o próximo botão devido à oclusão das informações rápidas. Como os ícones aqui são completamente redundantes, preferimos não desperdiçar o tempo dos usuários visualizando esse ícone que é usado inteiramente para obter um estilo de interface unificado.
CSS STILELEETA maioria do conteúdo CSS usada para controlar esses estilos de botão é muito intuitiva. Uma pequena diferença em diferentes navegadores levará à aplicação de diferentes valores de preenchimento para eles no código a seguir. Felizmente, tudo isso é completamente possível.
/ * Botões */
.Buttons A, .Buttons Button {
exibição: bloco;
flutuar: esquerda;
margem: 0 7px 0 0;
Background-Color:#f5f5f5;
borda: 1px sólido #dedede;
Top de fronteira: 1px sólido #eee;
Liberagem de borda: 1px Solid #EEE;
Fonte-família: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
tamanho de fonte: 100%;
altura da linha: 130%;
Decoração de texto: Nenhum;
Peso da fonte: negrito;
Cor:#565656;
Cursor: Ponteiro;
preenchimento: 5px 10px 6px 7px; / * Links */
}
.Buttons Button {
Largura: Auto;
transbordamento: visível;
preenchimento: 4px 10px 3px 7px; / * Ie6 */
}
.Buttons Button [Type] {
preenchimento: 5px 10px 5px 7px; / * Firefox */
altura de linha: 17px; / * Safari */
}
*: botão HTML da primeira criança [Type] {
preenchimento: 4px 10px 3px 7px; / * Ie7 */
}
.Buttons Button img, .BUTTONS A IMG {
margem: 0 3px -3px 0! IMPORTANTE;
preenchimento: 0;
fronteira: nenhuma;
Largura: 16px;
Altura: 16px;
}
Outro problema é que existem alguns bugs no Internet Explorer ao renderizar botões longos. Você pode encontrar essas informações sobre o Jehiah.cz, mas no código CSS acima, evitaremos o problema até certo ponto, declarando os valores de largura e transbordamento.
Adicione um pouco de cor ao botãoNo Wufoo, definimos o valor pairar da ação neutra (aqui, o autor chama a senha de alteração e outras ações como ação neutra, o tipo de confirmação e envio como ação positiva, e o abandono e o tipo de cancelamento como ação negativa) para azul, e a ação positiva e a ação negativa são definidas como verde e vermelho, respectivamente. O código de estilo a seguir usa cores diferentes para distinguir entre adicionar, salvar e cancelar e excluir um tipo de ação negativa. É muito bom, é claro que você também pode escolher a cor que gosta de usar.
/* PADRÃO */
Botão: Passe o mouse, .Buttons A: Passe o mouse {
Background-Color:#dff4ff;
borda: 1px sólido #c2e1ef;
Cor:#336699;
}
.Buttons A: ativo {
Background-Color:#6299C5;
borda: 1px Solid #6299C5;
Cor: #ffff;
}
/ * Positivo */
Button.PoSitive, .Buttons A.Positivo {
Cor:#529214;
}
.Buttons A.Positivo: Passe o mouse, Button.PoSitive: Hover {
Background-Color:#e6efc2;
borda: 1px Solid #C6D880;
Cor:#529214;
}
.BUTTONS A.Positivo: ativo {
Background-Color:#529214;
borda: 1px Solid #529214;
Cor: #ffff;
}
/ * Negativo */
.BUTTONS A.Negativo, Button.Negative {
Cor:#d12f19;
}
.BUTTONS A.Negativo: Passe, Button.Negative: Hover {
Antecedentes:#fbe3e4;
borda: 1px sólido #fbc2c4;
Cor:#d12f19;
}
.BUTTONS A.Negativo: ativo {
Background-Color:#D12F19;
borda: 1px sólido #d12f19;
Cor: #ffff;
}
ResumirFinalmente, esta é apenas uma solução que projetamos para lidar com as necessidades em Wufoo, mas teve um bom desempenho com nossos esforços. Mas essa não é a única maneira, você pode encontrar maneiras mais interessantes de transformar botões em cantos arredondados ou ainda mais coloridos. Como quase qualquer outro elemento pode ser colocado entre as tags <butter>, você também pode criar um botão tridimensional realmente bonito, inserindo a tag <man> e seguindo os métodos mais recentes fornecidos por Alex Griffioen. Para ser sincero, espero que este seja apenas o começo para todos os designers que trabalham na reutilização da interface do programa. De qualquer forma, espero que você possa pensar mais sobre isso antes de abrir o botão de entrada do Photoshop e dar uma olhada nesta tag quase esquecida <butter>, talvez isso o surpreenda.
Apêndice:elemento <butter> em html4.0/xhmtl1.0
Definição e usoDefina um botão. Dentro do elemento do botão, você pode colocar conteúdo, como texto ou imagens. Essa é a diferença entre esse elemento e os botões criados com o elemento de entrada.
O controle <butter> fornece recursos mais poderosos e conteúdo mais rico que <tipo de entrada = botão>. Todo o conteúdo entre as tags <butter> e </botão> é o conteúdo do botão, que inclui qualquer conteúdo do corpo aceitável, como texto ou conteúdo multimídia. Por exemplo, podemos incluir uma imagem e texto relacionado no botão e usá -los para criar uma imagem de marcação atraente no botão.
O único elemento proibido é o mapeamento de imagens, porque suas ações sensíveis ao mouse e teclado podem interferir no comportamento dos botões de formulário.
Propriedades selecionáveis Valor do atributo Descrição DTDDesativados desativados desativados Desativar este botão. STF
NameButton_Name Especifica o nome exclusivo deste botão. STF
Botão Tipo*
* Redefinir define o tipo de botão. STF
* enviar
Valor Algum_Value especifica o valor inicial do botão. Este valor pode ser modificado pelo script. STF
Atributos padrão:ID, classe, título, estilo, dir, lang, xml: lang, accessKey, tabindex
Propriedades do evento:Onfocus, Onblur, OnClick, OnDblClick, Onmousedown, OnMouseUp, OnMouseOver, OnMouseMove, OnMouseOut, OnKeypress, OnKeydown, OnKeyUp