简单的技巧，用于更可用的形式

> Web表单：开发人员的恐惧和用户的挫败感。 但是聪明的CSS和JavaScript可以显着改善这种常见的网络体验。本文探讨了简单的技术，以提高可用性，激发您创建自己的增强功能。

密钥改进：

>
• >自动焦点：模拟Google的方法，通过自动将重点的注重量集合到页面加载上。这提高了效率。
有效标签：
• 利用元素来提高可用性和可访问性。单击标签应聚焦或切换关联的字段。 带有CSS的视觉提示<label></label>>
：
• 使用CSS更改焦点上的边框颜色，清楚地表明了当前有效的字段。> JavaScript反馈和验证：使用JavaScript进行动态反馈。 例如，更改输入标签颜色以反映数据有效性。
• 实时数据格式：使用JavaScript在提交前实时使用JavaScript进行格式化输入数据（例如，电话号码，日期）。
• 小变化，很大的影响
>

>让我们从一个共同的增强开始：自动将主输入字段聚焦。 假设您的目标字段具有ID“ Myfield”。以下是实现这一目标的几种方法：

方法1（Google的方法）：

>

方法2（使用）：

>

window.onload>方法3（使用函数 - 最适合多个

事件）：

window.onload = function() { document.getElementById('myfield').focus(); };

> addEventonload>方法4（内联位置）：>

addEvent(window, 'load', function() { document.getElementById('myfield').focus(); });
// addEvent function (from previous article) would be included here.

这些方法根据您的项目结构提供灵活性。 随后的示例将主要显示内联方法，但请记住这些替代方法存在。

利用标签

<input type="text" id="myfield" ...>  <!-- Place this JavaScript AFTER the input field -->

>

>元素通常被忽略但至关重要。 他们将描述性文本链接到形成字段。单击标签聚焦关联的字段（或切换复选框/无线电按钮）。 例如：

为提高标签可见度，使用CSS更改光标：>

视觉焦点提示<label></label>

<label for="username">Username:</label> <input type="text" id="username">

>用CSS突出显示活动输入字段：

label { cursor: pointer; cursor: hand; } /* handles IE compatibility */

对于IE的兼容性（缺少

支持），请使用JavaScript： 或，对于带有许多字段的清洁代码，请使用上一节中所示的

方法。

。

input { border: 2px solid #ccc; }
input:focus { border: 2px solid #000; }

>增强文本字段

:focus

• >选择焦点上的选择：自动在焦点上选择默认文本：

• >动态标题更新：>以用户类型更新页面标题：

window.onload = function() { document.getElementById('myfield').focus(); };

• > 派生的字段值：自动基于另一个字段（例如，从标题生成URL）：>

addEvent(window, 'load', function() { document.getElementById('myfield').focus(); });
// addEvent function (from previous article) would be included here.

验证和反馈

>始终在服务器端验证，但是客户端验证提供了立即的反馈。 使用图标指示字段状态（必需，错误，完成）。

>

（CSS，JavaScript和HTML示例此处都将包括在内，类似于原始文本，但有可能简化或重组，以清晰。

数据格式

实时重新格式化数据（例如，美国电话号码）： （此处包括电话号码格式的JavaScript示例。）

>本文提供了基础。 探索这些技术并以它们为基础，以创建更具用户友好和高效的形式。 切记始终优先考虑安全端验证的安全性。

>

（FAQS部分将包括在这里，类似于原始但有可能改写的，以获得更好的流动和简洁性。）

以上是简单的技巧，用于更可用的形式的详细内容。更多信息请关注PHP中文网其他相关文章！