layui多步骤表单_建立多步骤表单界面

layui多步骤表单

表单可用性是Web设计中一个非常重要的主题。 作为提供给用户的主要输入界面之一，表单的可用性对于良好的用户体验至关重要。

今天，我们将构建一个包含验证和动画功能的多部分表单。 我们会覆盖很多地面，所以要系好安全带！

---

形成高级最佳实践

表单界面设计是可用性障碍的一部分。 在开始之前，让我们先讨论一些表单最佳实践。

不要让您的用户想得太硬

形式通常不是鼓励独特互动的地方。 好的表格提供了明显的导航技术和完全的透明度。 好的表格标签明确，易于浏览。

不要太花哨

重要的是不要偏离默认的表单行为。 有一些标准是表单默认行为的基础。 违反这些标准可能会对可访问性产生负面影响，因此请考虑尽可能保留这些默认样式。

请记住，用户不必停留

您表单的用户不必停留。 他们选择留下。 填写表格比较麻烦，因此请放轻松。 （如果可能，请使其有趣！）请勿混淆或要求用户； 而是围绕表单提出的问题建立对话。 要有礼貌。

何时使用多节技术

有时，多节形式肯定是个好技术。 对于“我应该分解表格之前需要多少输入”，没有一个唯一的答案。 取而代之的是，始终考虑将表格分为几个部分是有助于还是阻碍可用性。 其次，考虑它是否有助于或阻碍交互设计的其他方面。

如果您的表单具有截然不同的部分，则可能值得将其分为多个部分。 结帐流程是这种情况的常见示例。 （个人信息，运输信息，付款信息和确认信息非常不同，通常都是实质性的部分。）

---

计划互动

我们将创建一个包含任意字段的注册表单。 我们需要知道当前正在哪个部分，因此我们需要在表单顶部添加一个指示器。 我们要水平转换表单部分，从右向左滑动。 为此，我们将不同的部分设置为在“窗口”元素中具有绝对位置。 我们还希望有两个按钮； 一个是普通的提交按钮。 另一个是“下一部分”按钮。

---

标记

这是我们的表格：

    

      
1. Creds
      
2. Deets
      
3. Settings
      
4. Last Words
    
  

  

    Email:
    
    Password:
    
  
  

    Username:
    
    Short Bio:
    
  
  

    Basic Interests:
    
    
Receive newsletter?

      yes
      no
    
  
  

    Referred by:
    
    Daytime Phone:
    
  
  Next Section ▷
  &