Haga clic aquí para volver a la columna del tutorial Wulin.com HTML.
Arriba: Lenguaje de marcado - Citas
Formulario de origen original Capítulo 5
La interacción siempre ha sido el foco de Internet, lo que permite a los usuarios intercambiar información y comunicarse entre sí. Los formularios nos permiten organizar y recopilar información de los usuarios de la misma manera, por lo que al diseñar un sitio web, siempre pertenecemos a la categoría que puede usarse en cualquier situación. Por ejemplo, encontramos que hay alrededor de 10,000 formas diferentes de marcar formularios. Bueno, tal vez no tantos, pero aún podemos pensar en varias situaciones, lo que facilita que los usuarios usen estructuras de forma y también faciliten la gestión por parte de los propietarios de sitios web. Métodos para marcar los formularios A: Use formularios
<Form Action =/Path/To/Script Method = Post>
<Table>
<tr>
<th> Nombre: </th>
<td> <input type = text name = name /> </td>
</tr>
<tr>
<th> Correo electrónico: </th>
<td> <input type = text name = email /> </td>
</tr>
<tr>
<th> & nbsp; </th>
<td> <input type = shipt value = envit /> </td>
</tr>
</table>
</form>
Muchas personas tienen formas marcadas durante mucho tiempo con tablas. Debido a la alta frecuencia de uso, nos hemos acostumbrado a ver los formularios de tipo de esta manera: la columna izquierda es una descripción de texto alineada derecha, y la columna derecha es un elemento de forma alineado a la izquierda. Usar una forma simple de dos listas es una de las formas simples de completar la composición de complejos de forma fácil de usar.
Algunas personas piensan que la forma no es necesaria, y otras piensan que la forma debe considerarse un material de forma. No tenemos la intención de admitir ninguna de las afirmaciones, pero en algunos casos, la mejor manera de lograr un diseño de forma específico al usar una forma, especialmente formularios complejos con muchos elementos diferentes (formularios que usan cuadros de radio, cuadros desplegables, etc.). Confiar completamente en CSS para manejar tales formas puede ser frustrante, y a menudo requiere adicional <span> y <div> para consumir más etiquetas que la tabla.
A continuación, mira la Figura 5-1. Este es el efecto del método general de visualización del navegador visual A:
Figura 5-1: Efecto del método A que se muestra en el navegador
Encontrará que el uso de tablas puede organizar los elementos de texto de una manera muy ordenada. Sin embargo, para una forma tan simple, puedo evitar usar tablas y usar otros métodos que no requieren tantas etiquetas. A menos que el diseño visual del formulario requiera tal tipo de comprensión, el formulario puede no ser necesario. Al mismo tiempo, también debemos considerar varias facilidad de uso. Al estudiar los siguientes dos métodos, entraremos en contacto con esta parte.
<Form Action =/Path/To/Script Method = Post>
<p>
Nombre: <input type = text name = name /> <Br />
Correo electrónico: <input type = text name = correo electrónico /> <Br />>
<Entrada tipo = enviar value = enviar />
</p>
</form>
Usar un solo párrafo y algunas etiquetas <Br /> es una forma factible de separar todos los elementos, pero puede retratarse visualmente un poco. Figura 5-2 El efecto de visualización de la undécima versión del navegador:
Figura 5-2: Efecto del método de visualización del navegador B
Aunque podemos completar el diseño sin usar una mesa, se ve un poco lleno y feo. Al mismo tiempo, también encontramos el problema de que los elementos de forma no pueden alinearse perfectamente.
Pudimos agregar un parche adicional al elemento <put> con CSS para aliviar la sensación de hacinamiento. Como esto:
aporte{
margen: 6px 0;
}
El párrafo anterior agrega 6 píxeles de parches adicionales a las partes superior e inferior de cada elemento <input> (incluido el nombre, el cuadro de entrada de correo electrónico y el botón Enviar), y agrega espacio adicional entre los elementos. Al igual que la Figura 5-3:
Figura 5-3. Efecto del método B después de agregar parches adicionales al elemento de entrada
El método B en sí no tiene grandes problemas, pero también se puede ajustar para mejorar el formulario. El método C también utiliza estas técnicas de ajuste, así que echemos un vistazo.
<Form Action =/Path/To/Script ID = thisForm Method = Post>
<p> <etiqueta for = name> name: </label> <br />
<input type = text id = name name = name /> </p>
<p> <etiqueta for = correo electrónico> correo electrónico: </elabel> <r />
<Entrada tipo = text id = nombre de correo electrónico = correo electrónico /> </p>
<p> <input type = subt value = shipt /> </p>
</form>
Me gustan varias cosas sobre el método C. Primero, para una forma simple similar a este ejemplo, me pareció más conveniente colocar cada descripción y elemento de forma en un párrafo separado. Sin agregar pantalla de estilo, la distancia preestablecida entre los párrafos debería ser suficiente para que lea el contenido fácilmente. Más tarde, podemos establecer el intervalo usando CSS como las etiquetas <p> contenidas en el formulario.
Incluso fuimos un paso más allá y establecimos una identificación única = thisForm para el formulario. Por lo tanto, el intervalo exacto que mencioné ahora se puede escribir aproximadamente así:
#thisform P {
margen: 6px 0;
}
Esto significa establecer los parches superiores, inferiores y externos de la etiqueta <p> en esta forma a 6 píxeles, cubriendo los valores preestablecidos seleccionados por el navegador para párrafos generales.
Otra diferencia entre el método C y los dos primeros métodos es que, aunque cada grupo (instrucción y cuadro de entrada) se coloca en <p>, todavía los colocamos en una línea independiente. Usando <Br /> Para separar cada elemento, podemos evitar el problema de diferentes longitudes de texto, lo que resulta en la incapacidad de alinear perfectamente los elementos de entrada.
La Figura 5-4 muestra el efecto del método general de visualización del navegador C, donde se usaron los estilos establecidos para la etiqueta <p>.
Figura 5-4. Efecto del método de visualización del navegador C, usando CSS para la etiqueta P
Además del efecto visual del método C, la ventaja más importante es que mejora la facilidad de uso.
El uso de la etiqueta <Lelter> para mejorar la facilidad de uso del formulario requiere dos pasos, y el método C ha completado estos dos pasos. Primero, use <Lelicta> para conectar la descripción de texto con los elementos de formulario relevantes, ya sea el cuadro de entrada de texto (campo de texto), el cuadro de entrada de bloque de texto (área de texto), el cuadro de radio (radio), la casilla de verificación (casilla de verificación), etc. El método C usa la etiqueta <Lelabel> en el nombre: y el correo electrónico: Título, conectándolos con los elementos que ingresan los datos.
El segundo paso es agregar el atributo FOR a la etiqueta <Label> y completar la ID del cuadro de entrada correspondiente.
Por ejemplo, en el Método C, use la etiqueta <Label> para envolver el nombre: y complete el atributo for con el mismo valor que el cuadro de entrada después de él.
<Form Action =/Path/To/Script ID = thisForm Method = Post>
<p> <etiqueta for = name> name: </label> <br />
<input type = text id = name name = name /> </p>
<p> <etiqueta for = correo electrónico> correo electrónico: </elabel> <r />
<Entrada tipo = text id = nombre de correo electrónico = correo electrónico /> </p>
<p> <input type = subt value = shipt /> </p>
</form>
Tal vez he escuchado a otros decir que deberías agregar la etiqueta <label> en el formulario. La pregunta más importante es por qué debe usar la etiqueta <label>.
Es bueno establecer asociaciones de etiqueta/identificación que permitan a los lectores de pantalla leer la etiqueta correcta para cada elemento de formulario sin la influencia de la disposición de diseño. Al mismo tiempo, la etiqueta <label> se crea para marcar las etiquetas de la barra de formulario . Al usar esta etiqueta, estamos explicando el significado de cada elemento y fortaleciendo la estructura de la forma.
Hay un beneficio adicional de usar la etiqueta <label> al procesar cuadros de opción única y múltiples check, es decir, la mayoría de los navegadores también cambiarán el valor del elemento cuando el usuario haga clic en el texto en <Lel etiqueta>. Esto puede crear un área de clics más grande para el elemento de entrada, lo que facilita a los usuarios con inconvenientes de movilidad completar los formularios (marque Pilgrim, bucee en accesibilidad , http://diveintoaccessibility.org/day_28_labeling_form_elements.html).
Por ejemplo, si agrega un cuadro de múltiples check al formulario para que el usuario pueda elegir escribir esta información, entonces podemos usar la etiqueta <Lelicta> como esta:
<Form Action =/Path/To/Script ID = thisForm Method = Post>
<p> <etiqueta for = name> name: </label> <br />
<input type = text id = name name = name /> </p>
<p> <etiqueta for = correo electrónico> correo electrónico: </elabel> <r />
<Entrada tipo = text id = nombre de correo electrónico = correo electrónico /> </p>
<p> <input type = checkbox id = recordar name = recuerda /> <etiqueta for = recuerda> ¿Recuerdas esta información? </selablo> </p><p> <input type = subt value = shipt /> </p>
</form>
Al marcar cuadros de múltiples cheques de esta manera, se pueden obtener dos beneficios: el lector de pantalla puede leer el texto explicativo correcto (al igual que este ejemplo, el texto puede aparecer después del cuadro de entrada), y el rango de conmutación de cuadros de múltiples check ha aumentado. Ahora, además de los cuadros de múltiples cheques, la parte del texto también está incluida (la mayoría de los navegadores lo admiten).
La Figura 5-5 muestra el efecto de visualización de este formulario en el navegador. Indicamos específicamente el rango de conmutación de caja múltiple después de la ampliación:
Figura 5-5. Múltiples cuadros de selección que incluyen texto en el rango de conmutación
Además de los formularios y párrafos, también quiero mostrar otra forma de marcar el formulario, utilizando la lista de definiciones.
Página anterior 1 2 3 4 Página siguiente Lea el texto completo