La estandarización web ha recibido cada vez más atención y atención por parte de todos. Al crear páginas web que cumplen con los estándares web, a menudo nos encontramos con una falta de conocimiento en esta área. Espero que ayude al diseño CSS de todos.
1. Utilice etiquetas de leyenda y conjunto de campos
En el formulario, a menudo agrupamos la información en el formulario. Por ejemplo, en el formulario de registro, podemos agrupar la información de registro en información básica (generalmente requerida) e información detallada (generalmente opcional). Entonces, ¿cómo podemos hacerlo mejor? ¿él? Podemos considerar agregar las siguientes dos etiquetas al formulario:
conjunto de campos: formularios de grupo. Un formulario puede tener varios conjuntos de campos.
leyenda: describe el contenido de cada grupo
| El siguiente es el contenido citado: <formulario id="demoform" class="democss" action=""> <conjunto de campos> <legend>Registro Básico</legend> <p>Nombre: <input type="text" name="fname" value="" /></p> ... </conjunto de campos> <conjunto de campos> <legend>Registro detallado</legend> <p>Interés: <input type="text" name="interés" value="" /></p> ... </conjunto de campos> ... </formulario> |
El conjunto de campos tiene un borde de forma predeterminada y la leyenda generalmente se muestra en la esquina superior izquierda de forma predeterminada. Pero en algunos casos, es posible que no desee permitir que los estilos predeterminados o los diseños predeterminados de conjuntos de campos y leyendas afecten la estética del diseño.
Solución: establezca los bordes del conjunto de campos en 0 y la visualización de la leyenda en ninguno en CSS.
2. Utilice etiquetas de etiquetas
Le damos una etiqueta a la etiqueta de texto en el formulario y usamos el atributo for para asociarla con el componente del formulario. El efecto es que cuando se hace clic en la etiqueta de texto, el cursor se muestra en el componente del formulario correspondiente.
| El siguiente es el contenido citado: <formulario id="demoform" class="democss" action=""> <conjunto de campos> <legend>Registro Básico</legend> <p> <label for="fname">Nombre:</label> <tipo de entrada="texto" id="fname" nombre="fname" valor="" /> </p> ... </conjunto de campos> <conjunto de campos> <legend>Registro detallado</legend> <p> <label for="interest">Interés:</label> <tipo de entrada="texto" id="interés" nombre="interés" valor="" /> </p> ... </conjunto de campos> ... </formulario> |
Además de los métodos anteriores, también podemos usar la etiqueta para anidar todo el componente del formulario y la etiqueta de texto, como por ejemplo:
| El siguiente es el contenido citado: <etiqueta para="fname"> Nombre de pila: <tipo de entrada="texto" id="fname" nombre="fname" valor="" /> </etiqueta> |
Según la especificación, el texto se asociará automáticamente con los componentes del formulario adyacentes, pero desafortunadamente, el navegador principal actual IE6 no admite esta función.
3. Utilice atributos de clave de acceso y tabindex
Los sitios web deben tener en cuenta más situaciones de uso. Por ejemplo, cuando no hay un dispositivo de cursor (como un mouse), el formulario se puede completar mediante operaciones de teclado. En este momento, hacer clic no tiene sentido para ellos. En este momento, elegimos la clave de acceso de la etiqueta (tecla de acceso directo, alt+valor del atributo de clave de acceso en IE, alt+shift+ valor del atributo de clave de acceso en FF) y el atributo tabindex (tecla Tab, el valor del atributo tabindex es secuencia) para agregar a la etiqueta del formulario. como etiqueta, entrada, etc.
| El siguiente es el contenido citado: <label for="fname" accesskey="f" tabindex="1" >Nombre:</label> <tipo de entrada="texto" id="fname" nombre="fname" valor="" /> |
4. Utilice la etiqueta optgroup
La función de la etiqueta optgroup es definir un conjunto de opciones en una lista de selección. Podemos usar la etiqueta optgroup para clasificar las opciones del elemento seleccionado y usar el atributo de etiqueta. El valor del atributo se mostrará como un título sangrado no seleccionable en la lista desplegable (seleccionar). Nota: los grupos de opciones no admiten el anidamiento.
| El siguiente es el contenido citado: <seleccione nombre="China"> <optgroup etiqueta="Jiangsu"> <option value="nj">Nanjing</option> <option value="sz">Suzhou</option> </optgrupo> <optgroup etiqueta="Zhejiang"> <option value="hz">Hangzhou</option> <option value="wz">Wen zhou</opción> </optgrupo> </seleccionar> |
Hay un pequeño error en IE6.0 (no presente en FireFox): cuando se usan las teclas de flecha del teclado para seleccionar, en IE, cuando el elemento seleccionado se cambia de una opción de un grupo de opciones a una opción de otro grupo de opciones, el cambio no ser desencadenado. La solución es: agregar eventos onkeydown o onkeyup para ayudar a resolver el problema.
5. Utilice etiquetas de botones
Definición y uso
Definido como un botón de envío. Dentro del elemento del botón puedes colocar contenido, como texto o imágenes. Ésta es la diferencia entre este elemento y el botón del elemento de entrada.
<button><img src="images/click.gif" alt="¡Haz clic en mí! />¡Haz clic en mí!</button>
El botón proporciona más funciones y contenido más rico que la entrada. El botón separa el texto del botón y puede agregar imágenes dentro del botón, dando al texto y a las imágenes más estilos para elegir, haciendo que el botón rígido sea más vívido.
Y el uso de etiquetas de botones será más semántico que los botones de entrada y puede entenderse simplemente por el significado literal.