让 HTML 用户界面更友好。
4.63/5 (22投票s)
文章介绍了使 UI 用户友好的有用技巧。
让 HTML 用户界面更友好。
从客户端的角度来看，用户界面 (UI) 的重要性不亚于后端功能。它创造了产品的第一印象 – 客户可以看和感受到的东西。因此，保持表单和对话框清晰明了非常重要。
本文介绍了一些帮助使用户界面简单易用的技巧。
1. 使用占位符
即使字段没有标签，使用占位符也有助于理解字段的含义。
HTML
<div class="form-group row"> <label for="FirstName" class="col-sm-4 col-form-label">First Name</label> <div class="col-sm-6"> <input name="FirstName" type="text" class="form-control" placeholder="Enter Your First Name" required> </div> </div> <div class="form-group row"> <label for="LastName" class="col-xs-4 col-form-label">Last Name</label> <div class="col-xs-6"> <input name="LastName" type="text" class="form-control" placeholder="Enter Your Last Name" required> </div> </div> <div class="form-group row"> <label for="AddressLine1" class="col-xs-4 col-form-label">Address Line 1</label> <div class="col-xs-6"> <input name="AddressLine1" type="text" class="form-control" placeholder="Enter Your Address Line 1" required> </div> </div>
此处和以下示例中的 HTML 均基于 Bootstrap 布局。 类 form-group 用于对字段进行分组，类 row 用于显示成行的字段。 列的大小由类 col-sm-4 和 col-sm-6 调整。<label> 和 <input> 是使用类 col-form-label 和 form-control 设置样式的控件。placeholder 是控件 <input> 的特殊属性，它告诉浏览器在控件上显示特定的文本提示。
2. 使用 TAB 键切换输入字段。
当有多个字段时，使用 TAB 键在它们之间切换非常方便。大多数 UI 引擎都支持为自定义序列分配自定义顺序的 TAB 索引，这可能有助于使导航流畅清晰。
HTML
<div class="form-group row"> <label for="FirstName" class="col-sm-4 col-form-label">First Name</label> <div class="col-sm-6"> <input name="FirstName" type="text" class="form-control" placeholder="Enter Your First Name" tabindex="1" required> </div> </div> <div class="form-group row"> <label for="LastName" class="col-xs-4 col-form-label">Last Name</label> <div class="col-xs-6"> <input name="LastName" type="text" class="form-control" placeholder="Enter Your Last Name" tabindex="2" required> </div> </div> <div class="form-group row"> <label for="AddressLine1" class="col-xs-4 col-form-label">Address Line 1</label> <div class="col-xs-6"> <input name="AddressLine1" type="text" class="form-control" placeholder="Enter Your Address Line 1" tabindex="3" required> </div> </div>
<input> 控件具有属性 tabindex，该属性定义元素的 Tab 顺序。
3. 使用“Enter”键作为默认行为
通常，当用户按下“Enter”键时，他或她期望默认行为。例如，如果用户输入了所有必要的字段并按下“Enter”键，通常期望将数据提交到服务器。
HTML
<form class="center-panel" id="centerform">
.....
<div class="form-group row">
<div class="offset-xs-4 col-xs-10">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).keypress(function (e) {
if (e.which == 13) {
$("#centerform").submit();
}
});
</script>
<form> 使用类 center-panel 集中，并包含用于提交它的 <button> 控件。 Javascript 代码使用 jQuery 事件 keypress 在按下“Enter”键时提交表单。参数 which 定义按下了哪个键，值 13 对应于“Enter”。
4. 为日期/时间/货币/颜色等使用特定的控件和掩码。
使用专用控件/掩码来填写输入字段非常方便。
从 jQuery UI 使用日期选择器的 HTML (https://jqueryui.jqueryjs.cn/datepicker/)
<div class="form-group row">
<label for="Date" class="col-xs-4 col-form-label">Date</label>
<div class="col-xs-6">
<input name="Date" type="text" id="datepicker" class="form-control" placeholder="Enter Date" tabindex="4" required>
</div>
</div>
<script type="text/javascript">
$("#datepicker").datepicker();
</script>
通过在 Javascript 中通过 jQuery 插件 datepicker 初始化，在带有 id datepicker 的 <input> 上定义控件 datepicker，该插件由 jQuery UI 提供。
5. 使用容错用户输入验证
输入验证器应该足够灵活，可以处理任何用户输入，包括过多的空格、中断、破折号等。
使用 jQuery Validate 进行验证的 HTML (https://jqueryvalidation.org/)
<form class="center-panel" id="centerform">
<div class="form-group row">
<label for="PhoneNumber" class="col-xs-4 col-form-label">Phone Number</label>
<div class="col-xs-6">
<input name="PhoneNumber" type="text" class="form-control" placeholder="Enter Your Phone Number" tabindex="3" required>
</div>
</div>
</form>
<script type="text/javascript">
$.validator.addMethod("phoneNumberFormat", function(value, element) {
return value && value.replace(/\D+/g, "").length == 10;
}, "Phone number should be a number with 10 digits");
$("#centerform").validate({
rules: {
PhoneNumber: {
phoneNumberFormat: true,
}
}
});
</script>
jQuery Validate 函数 addMethod 添加一个新的验证方法，并接受验证名称、验证函数和验证消息作为参数。验证函数接受两个参数：目标元素及其值。在代码片段中，验证函数检查电话号码值是否为 10 位数字。使用正则表达式替换所有不必要的符号（空格、破折号等）。最后一个块执行 $("#centerform").validate() 只是在 id 为 centerform 的表单和名称为 PhoneNumber 的元素上注册规则。
6. 使用错误消息而不是禁用按钮。
禁用按钮会使用户感到困惑，因为无法清楚地知道功能不可用的原因。最好使用错误消息或提示。
对于 jQuery Validate，无需更改任何代码，它会在提交时自动验证页面上的所有表单。
7. 一次显示所有控件，而不是在输入时弹出。
弹出窗口上的布局转换可能会分散用户的注意力。
最好一次显示所有控件，并在必要时提供有用的提示。
HTML
<div class="form-group row">
<label for="Country" class="col-xs-4 col-form-label">Country</label>
<div class="col-xs-6">
<select class="form-control" name="Country" id="countrySelection">
<option value="" disabled selected>Enter Your Country</option>
<option value="USA">USA</option>
</select>
</div>
</div>
<div class="form-group row">
<label for="State" class="col-xs-4 col-form-label">State</label>
<div class="col-xs-6">
<select class="form-control" name="State" id="stateSelection">
<option value="">-- Select Country --</option>
</select>
</div>
</div>
<script type="text/javascript">
$("#countrySelection").change(function () {
var stateSelection = $("#stateSelection");
var selected = this.value;
if (selected) {
stateSelection.empty();
stateSelection.append($("<option></option>")
.attr("value", "")
.attr("disabled", "")
.attr("selected", "")
.text("Enter Your State"));
stateSelection.append($("<option></option>")
.attr("value", "CA")
.text("CA"));
}
})
</script>
此示例包含两个字段：国家/地区和州/省，其行为在 Javascript 块中定义。 jQuery 事件 change 用于订阅国家/地区 <select> 组合框的更改。 当事件触发时，状态组合框将填充表示 <select> 项的 <option> 元素。 为第一个元素设置属性 disabled 和 selected，使其成为选择提示。
兴趣点
还有很多其他的技巧可以让用户界面简单易用。