用户界面(UI)是产品给用户的第一印象，它直接影响用户对产品的感受。因此，保持表单和对话框的清晰和明亮至关重要。本文将介绍一些技巧，帮助创建简单且用户友好的用户界面。
即使没有标签，使用占位符也有助于理解字段的含义。以下是一个使用占位符的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>
在这个例子中，HTML构建在Bootstrap布局上。类"form-group"用于分组字段，类"row"用于显示字段行。列大小由类"col-sm-4"和"col-sm-6"控制，而"label"和"input"控件则使用类"col-form-label"和"form-control"进行样式设置。"placeholder"是"input"控件的一个特殊属性，它告诉浏览器在控件上显示特定的文本提示。
当有多个字段时，使用TAB键在它们之间切换非常方便。大多数UI引擎都支持为自定义序列分配自定义顺序的TAB索引，这有助于使导航流畅清晰。
<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>
"input"控件具有"tabindex"属性，它定义了元素的制表顺序。
通常，当用户按下“Enter”键时，他们期望的是默认行为。例如，如果用户输入了所有必要的字段并按下了“Enter”，通常期望数据被提交到服务器。
<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>
表单使用类"center-panel"居中，并包含用于提交它的"button"控件。JavaScript代码使用jQuery事件"keypress"在按下"Enter"键时提交表单。参数"which"定义了按下的是哪个键，值13对应于"Enter"。
使用专门的控件/掩码来填充输入字段非常方便。
<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>
日期选择器控件在具有id"datepicker"的"input"上定义，通过jQuery插件"datepicker"初始化。
输入验证器应该足够灵活，以处理用户输入的任何内容，包括多余的空格、换行符、破折号等。
<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"。
当按钮被禁用时，它会让用户感到困惑，因为不清楚为什么功能不可用。最好使用错误消息或提示。
对于jQuery Validate，不需要代码更改，它将自动验证页面上的所有表单。
弹出窗口上的布局转换可能会分散用户的注意力。
最好一次性显示所有控件，并在必要时提供有用的提示。
<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($("")
.attr("value", "")
.attr("disabled", "")
.attr("selected", "")
.text("Enter Your State"));
stateSelection.append($("")
.attr("value", "CA")
.text("CA"));
}
})
</script>