在HTML中,使用户界面用户友好

分享于 

10分钟阅读

Web开发

  繁體

在HTML中使用户界面用户友好

从客户端UI的角度来看,比后端功能更重要。 这就是产品的第一印象- 什么顾客能看到和感觉。 这就是为什么保持表单和对话框清晰清晰的原因。

本文介绍了一些帮助用户界面简单和用户友好的技巧。

1.使用占位符

即使没有标签,使用占位符也可以帮助理解字段的含义。

html :

<divclass="form-group row"><labelfor="FirstName"class="col-sm-4 col-form-label">First Name</label><divclass="col-sm-6"><inputname="FirstName"type="text"class="form-control"placeholder="Enter Your First Name"required></div></div><divclass="form-group row"><labelfor="LastName"class="col-xs-4 col-form-label">Last Name</label><divclass="col-xs-6"><inputname="LastName"type="text"class="form-control"placeholder="Enter Your Last Name"required></div></div><divclass="form-group row"><labelfor="AddressLine1"class="col-xs-4 col-form-label">Address Line 1</label><divclass="col-xs-6"><inputname="AddressLine1"type="text"class="form-control"placeholder="Enter Your Address Line 1"required></div></div>

HTML和下面的示例是基于 Bootstrap 布局构建的。 类 form-group 用于分组字段,类 row 用于显示所列字段。 按 col-sm-4col-sm-6<label> 调整列大小,<input> 是控件样式,是控件的特殊属性,控件 <input> 显示控件的特定文本提示。

2.使用制表符输入字段。

当有多个字段时,使用TAB按钮在它们之间切换是非常方便的。 对于定制序列,大多数UI引擎支持为定制顺序指定索引,这有助于使导航变得平滑和清晰。

html :

<divclass="form-group row"><labelfor="FirstName"class="col-sm-4 col-form-label">First Name</label><divclass="col-sm-6"><inputname="FirstName"type="text"class="form-control"placeholder="Enter Your First Name"tabindex="1"required></div></div><divclass="form-group row"><labelfor="LastName"class="col-xs-4 col-form-label">Last Name</label><divclass="col-xs-6"><inputname="LastName"type="text"class="form-control"placeholder="Enter Your Last Name"tabindex="2"required></div></div><divclass="form-group row"><labelfor="AddressLine1"class="col-xs-4 col-form-label">Address Line 1</label><divclass="col-xs-6"><inputname="AddressLine1"type="text"class="form-control"placeholder="Enter Your Address Line 1"tabindex="3"required></div></div>

<input> 控件具有属性 tabindex,它定义元素的制表符顺序。

3。默认使用"输入"按钮

当用户推"输入"按钮时,他或者她期望默认行为。 例如如果用户输入所有必需的字段并按下"输入",则通常期望将数据提交到服务器。

html :

<formclass="center-panel"id="centerform">. . ...
 <divclass="form-group row"><divclass="offset-xs-4 col-xs-10"><buttontype="submit"class="btn btn-primary">Submit</button></div></div></form><scripttype="text/javascript"> $(document).keypress(function (e) {
 if (e.which == 13) {
 $("#centerform").submit();
 }
 });
 </script>

<form> 是集中的类 center-panel,包含用于提交它的<button> 控件。 Javascript代码使用jQuery事件 keypress 在"输入"键被按下时提交表单。 参数 which 定义了按下的键,值 13对应于"输入""

4.为 DateTime/Currency/Colors 使用特定的控件和遮罩。

使用专用控件/掩码填充输入字段是非常方便的。

使用 jQuery UI ( https://jqueryui.com/datepicker/ ) 中的datepicker的HTML:

<divclass="form-group row"><labelfor="Date"class="col-xs-4 col-form-label">Date</label><divclass="col-xs-6"><inputname="Date"type="text"id="datepicker"class="form-control"placeholder="Enter Date"tabindex="4"required></div></div><scripttype="text/javascript"> $("#datepicker").datepicker();</script>

通过使用 jQuery UI 提供的jQuery插件 datepicker<input> 上初始化 by,在上定义了具有 by datepicker的控件

5.使用容错用户输入验证

输入验证器应该足够灵活,可以处理输入过大空间。刹车。破折号等输入的任何用户输入。

使用jQuery验证验证( https://jqueryvalidation.org/ )的HTML:

<formclass="center-panel"id="centerform"><divclass="form-group row"><labelfor="PhoneNumber"class="col-xs-4 col-form-label">Phone Number</label><divclass="col-xs-6"><inputname="PhoneNumber"type="text"class="form-control"placeholder="Enter Your Phone Number"tabindex="3"required></div></div></form><scripttype="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>

验证函数 addMethod 添加了新的验证方法,并接受验证 NAME。验证函数和验证消息作为参数。 验证函数接受两个参数: 目标元素及其值。 在代码段验证函数检查电话号码值是否为数字,长度为 10. 常规异常用于替换所有unneccessary符号( 空白。虚线。等等 )。 最后一个 block 执行 $("#centerform").validate() 只是用 id centerform 和带有 NAME PhoneNumber的元素对表单上的规则进行 registeres。

6.使用错误消息而不是禁用按钮。

禁用按钮时,它将迷惑用户,因为功能不可用的原因不清楚。 最好使用错误消息或者提示。

jQuery不需要修改代码,它将自动在submittion上验证页面上的所有表单。

7.一次显示所有控件,而不是弹出输入。

弹出的布局转换可能会分散用户的注意力。

最好同时显示所有控件,并在必要时提供有用的提示。

html :

<divclass="form-group row"><labelfor="Country"class="col-xs-4 col-form-label">Country</label><divclass="col-xs-6"><selectclass="form-control"name="Country"id="countrySelection"><optionvalue=""disabledselected>Enter Your Country</option><optionvalue="USA">USA</option></select></div></div><divclass="form-group row"><labelfor="State"class="col-xs-4 col-form-label">State</label><divclass="col-xs-6"><selectclass="form-control"name="State"id="stateSelection"><optionvalue="">-- Select Country --</option></select></div></div><scripttype="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 block 中定义。 事件触发器用于在事件触发状态框填充代表项的<option> 元素时,订阅国家 <select> 组合框。 属性 disabledselected 设置为第一个元素,使之成为选择的提示。

Points of Interest

还有很多其他技巧可以让UI简单且用户友好。


相关文章