# 输入框

input text field text area

# Sketch library

component-form

Optional VS Required field

Do

  • 使用有帮助价值的标签名。
  • 使用简明的帮助文本,说明预期需要输入的内容。
  • 提供完整的控件状态(包括:正常、悬停、聚焦、输入中、不可用、错误)。
  • 标记可选输入的内容。
  • 提供清除单个表单的方法(比如:“”)
  • 允许 复制、粘贴、选择文本域数据。
  • 如果可以的话,尽可能的格式化输入的数据,比如:“四位数字验证码”,“11位电话号码”等……
  • 在长文本输入时,考虑文本溢出或文本框的扩展控制。
  • 确保在触摸、键盘、鼠标等操作方式下文本域都可以正常使用。
  • 确保屏幕阅读器或其他辅助工具的可防性。
  • 确保文本域的正确tab索引和提交按钮的access key 绑定。

Don‘t

  • 不要使用没有标签的文本域,还认为用户会理解要输入什么内容。
  • 不要使用行内文本域。
  • 帮助文本不要冗长。

# simples

  • 完整表单

    img

  • 聚焦输入框

    img

  • 只读输入框

    img

  • 选填输入框

    img

  • 禁用输入框

    img

  • 错误输入框

    img

  • label 信息提示输入框

    img

  • 前置图标输入框

    img

  • 后置图标输入框

    img

  • 前置+后置图标输入框

    img

  • 后置图标按钮输入框

    img

  • 后置文本按钮输入框

    img

  • 前置文本输入框

    img

  • 后置文本输入框

    img

  • 前置+后置文本输入框

    img

# Text area

最后更新: December 18 2021 23:27

——《论语》