Para cada programador, proporcionar a los usuarios una interfaz de estilo unificada es un requisito inmutable. Sin embargo, es particularmente difícil lograr esta unificación de estilo en las páginas web, porque hay diferencias en la forma en que los diferentes sistemas operativos y navegadores expresan contenido de página web, y esta diferencia es casi irregular. Este problema es particularmente prominente en el proceso de procesamiento de elementos de formulario. Lo que hace que muchas personas impoten es el problema de los estándares de rendimiento unificados de los botones de envío.
Por ejemplo, la etiqueta de entrada con el atributo type = Enviar se ve muy fea en diferentes navegadores (en Firefox), o tiene un tipo de defecto (en Internet Explorer), o incluso actúa muy rígido (en Safari). La solución a este problema generalmente es establecer la propiedad de entrada a la imagen y luego diseñar una imagen de botón usted mismo. Pero tenemos que agregar mucho trabajo extra molesto cada vez que necesitamos usar los botones. Por lo tanto, necesitamos una mejor solución, un enfoque más flexible y significativo para los diseñadores. Afortunadamente, este método ya existe en la realidad, y lo que necesitamos es hacer un poco más de trabajo. ¡Amigos, por favor, permítanos presentarles a nuestro lindo amigo, compañero de clase <boton>!
Botón de entrada vs
Aquí está la etiqueta del botón de envío que está utilizando:
<Entrada tipo = enviar value = enviar />
Sus estilos de rendimiento en diferentes navegadores son los siguientes:
Y cuando usamos <boton> para crear el botón como arriba:
<button type = enviar> enviar </boton>
Se expresan en el siguiente estilo:
Estos botones no son diferentes de los botones que creamos anteriormente en su comportamiento de ejecución y presentación. Además de usarlos para enviar el formulario como, también puede configurarlos para que no estén disponibles, agregar atajos o establecer un tabindex, etc. Afortunadamente, además de los diferentes estilos de expresión, Safari admite estas funciones (en comparación con los botones de entrada, el botón en Safari carece del efecto líquido en la superficie). La función más genial de la etiqueta <botin> es que podemos colocar algunos elementos HTML útiles dentro de ella, como agregar imágenes usando el siguiente código:
<button type = subt> <img src = alt = /> Subt </boton>
Su aparición en el navegador es la siguiente:
Nada mal. De hecho, según la definición de W3C, el elemento <botón> surgió para resolver estas diferencias de rendimiento.
Botones creados con la función del elemento de botón al igual que los botones creados con el elemento de entrada, pero ofrecen posibilidades de representación más ricas: el elemento de botón puede tener contenido. Por ejemplo, un elemento de botón que contiene una imagen funciones como y puede parecerse a un elemento de entrada cuyo tipo está configurado en la imagen, pero el tipo de elemento de botón permite el contenido.
El elemento del botón - W3C
Por lo tanto, necesitamos encontrar una solución de diseño para esto, y afortunadamente, Internet con datos masivos puede proporcionarnos una ayuda útil para resolver este problema. Esto es de hecho muy conveniente, pero desafortunadamente, los diseñadores y desarrolladores de sitios web ni siquiera conocen la existencia de este elemento. Antes de que decidiera reemplazar Wufoo con el elemento de botón (un producto de red de este artículo, nota dudo), debo asegurarme de que esta etiqueta y CSS puedan satisfacer las siguientes necesidades:
Requisitos:
1. Deben tener la apariencia de botones
2. Hay los mismos estilos de expresión en diferentes navegadores
3. Los estilos aplicados en el botón también se pueden usar en hipervínculos (porque las interacciones en Wufoo siempre usan el método de envío de formulario y el contacto de enlace para enviar el método AJAX, a menudo pueden estar juntas, por lo que necesito que tengan el mismo estilo de expresión)
4. La etiqueta puede ser flexible y fácil de modificar en diferentes circunstancias
5. Para los eventos que ocurren durante la transmisión de información, puede distinguirlos efectivamente por iconos y colores.
Frente a los problemas anteriores, primero escribí algunos CSS y luego resolví el problema del navegador cruzado. A continuación veremos:
Resultado finalNo hay nada que se preocupe por esto, es muy simple, pero es muy efectivo. La razón por la que me gusta usar este método y los botones de manejo es porque no tengo que iniciar la creación de Photoshop uno por uno para crear 10,000 iconos. Si miramos el código con cuidado, encontrará que los dos botones detrás son en realidad dos enlaces.
<Div class = Botones>
<button type = enviar class = positivo>
<img src =/images/icons/tick.png alt =/>
Ahorrar
</botón>
<a href =/contraseña/restablecimiento/
<img src =/imágenes/icons/textfield_key.png alt =/>
Cambiar la contraseña
</a>
<a href =# class = negativo>
<img src =/imágenes/icons/cross.png alt =/>
Cancelar
</a>
</div>
El propósito de esto se debe a que muchas acciones en aplicaciones web están impulsadas por eventos (REST), por lo que enviar solicitudes de usuarios a través de una URL específica puede inicializar estas acciones. El uso de estilos que se pueden aplicar en ambos elementos hace que nuestra unificación de estilo sea más flexible al mantener la interacción causada por AJAX y los botones de envío estándar.
Ahora podría preguntar, ¿por qué dejo el atributo ALT del elemento de imagen en blanco? Alt es un atributo necesario del elemento IMG. Se usa para explicar el contenido de la imagen, pero no hay una descripción relevante de la imagen aquí, lo cual es un poco confuso. Sin embargo, a diferencia de los atributos faltantes, el valor del atributo vacío está completamente en línea con el estándar. Le dijo al navegador que estas imágenes representan una información completamente insignificante, lo que también evita que el navegador no pueda encontrar el botón siguiente debido a la oclusión de la información rápida. Dado que los íconos aquí son completamente redundantes, preferimos no perder el tiempo de los usuarios viendo este icono que se usa por completo para lograr un estilo de interfaz unificado.
Hoja de estilo CSSLa mayor parte del contenido de CSS utilizado para controlar estos estilos de botones es muy intuitivo. Una ligera diferencia en diferentes navegadores conducirá a la aplicación de diferentes valores de relleno para ellos en el siguiente código. Afortunadamente, todo esto es completamente posible.
/ * Botones */
.buttons a, .buttons {
Pantalla: bloque;
flotante: izquierda;
margen: 0 7px 0 0;
Color de fondo:#F5F5F5;
borde: 1px sólido #dedede;
Border-Top: 1px Solid #EEE;
Border-izquierda: 1px Solid #EEE;
Font-Family: Lucida Grande, Tahoma, Arial, Verdana, Sans-Serif;
tamaño de fuente: 100%;
Alganche de línea: 130%;
Decoración de texto: ninguna;
Font-Weight: Bold;
Color:#565656;
cursor: puntero;
relleno: 5px 10px 6px 7px; / * Enlaces */
}
Botón .Buttons {
Ancho: Auto;
desbordamiento: visible;
relleno: 4px 10px 3px 7px; / * Ie6 */
}
Botón .Buttons [tipo] {
relleno: 5px 10px 5px 7px; / * Firefox */
Línea de altura: 17px; / * Safari */
}
*: botón HTML de primer hijo [tipo] {
relleno: 4px 10px 3px 7px; / * Ie7 */
}
.button button img, .buttons a img {
margen: 0 3px -3px 0! IMPORTANTE;
relleno: 0;
borde: ninguno;
Ancho: 16px;
Altura: 16px;
}
Otro problema es que hay algunos errores en Internet Explorer al renderizar botones largos. Puede encontrar esta información sobre Jehiah.cz, pero en el código CSS anterior, evitaremos el problema hasta cierto punto declarando los valores de ancho y desbordamiento.
Agregue un poco de color al botónEn Wufoo, establecemos el valor de desplazamiento de la acción neutral (aquí, el autor llama a la contraseña de cambio y otras acciones como acción neutral, el tipo de confirmación y sumisión como acción positiva, y el tipo de abandono y cancelación como acción negativa) a azul, y la acción positiva y la acción negativa se establecen en verde y rojo respectivamente. El siguiente código de estilo utiliza diferentes colores para distinguir entre agregar, guardar y cancelar y eliminar un tipo de acciones negativas. Se siente bastante bien, por supuesto que también puedes elegir el color que te gusta usar.
/* ESTÁNDAR */
Botón: Hover, .Buttons A: Hover {
Color de fondo:#dff4ff;
borde: 1px sólido #c2e1ef;
Color:#336699;
}
.buttons a: activo {
Color de fondo:#6299C5;
borde: 1px Solid #6299C5;
Color: #ffff;
}
/* POSITIVO */
botón. positivo, .buttons a. positivo {
Color:#529214;
}
.buttons a.positive: hover, botón. Positivo: Hover {
Color de fondo:#E6EFC2;
borde: 1px Solid #C6D880;
Color:#529214;
}
.buttons a. positivo: activo {
Color de fondo:#529214;
borde: 1px Solid #529214;
Color: #ffff;
}
/* NEGATIVO */
.Buttons a.Negative, Button.Negative {
Color:#D12F19;
}
.Buttons a.Negative: Hover, Button.Negative: Hover {
Antecedentes:#FBE3E4;
borde: 1px sólido #fbc2c4;
Color:#D12F19;
}
.buttons a.negative: activo {
Color de fondo:#D12F19;
borde: 1px sólido #d12f19;
Color: #ffff;
}
ResumirFinalmente, esta es solo una solución que diseñamos para tratar las necesidades en Wufoo, pero funcionó bien con nuestros esfuerzos. Pero esa no es la única forma, puede encontrar formas más interesantes de convertir los botones en esquinas redondeadas o incluso más coloridas. Dado que casi cualquier otro elemento se puede colocar entre las etiquetas <boton>, también puede crear un botón tridimensional redondeado verdaderamente atractivo insertando la etiqueta <span> y siguiendo los últimos métodos proporcionados por Alex Griffioen. Para ser honesto, espero que este sea solo el comienzo para todos los diseñadores que trabajan en la reutilización de la interfaz del programa. De todos modos, espero que puedas pensar más en ello antes de abrir el botón de entrada de Photoshop y echar un vistazo a esta etiqueta <botón> casi olvidada, tal vez te sorprenda.
Apéndice:<botón> Elemento en html4.0/xhmtl1.0
Definición y usoDefina un botón. Dentro del elemento del botón, puede colocar contenido, como texto o imágenes. Esta es la diferencia entre este elemento y los botones creados con el elemento de entrada.
El control <botón> proporciona características más potentes y contenido más rico que <input type = button>. Todo el contenido entre las etiquetas <boton> y </boton> es el contenido del botón, que incluye cualquier contenido de cuerpo aceptable, como texto o contenido multimedia. Por ejemplo, podemos incluir una imagen y un texto relacionado en el botón, y usarlos para crear una atractiva imagen de marcado en el botón.
El único elemento que está prohibido es el mapeo de imágenes, porque sus acciones sensibles al mouse y el teclado pueden interferir con el comportamiento de los botones de forma.
Propiedades seleccionables Valor de atributo Descripción DTDdeshabilitado deshabilitado deshabilitado Deshabilitar este botón. STF
NameButton_Name especifica el nombre único de este botón. STF
Tipo de botón*
* El reinicio define el tipo de botón. STF
* entregar
Valor Some_Value Especifica el valor inicial del botón. Este valor puede ser modificado por el script. STF
Atributos estándar:ID, clase, título, estilo, Dir, Lang, XML: Lang, AccessKey, Tabindex
Propiedades del evento:Onfocus, Onblur, OnClick, OndBlick, Onmousedown, OnMouseUp, OnMouseOver, OnmouseMove, OnMouseOut, OnKeyPress, OnKeydown, OnKeyUp