search

wingmeng / front-end-quiz

前端小测试答题收集
0 stars 0 forks source link

CSS基础测试3：登录页HTML结构 #5

Open wingmeng opened 5 years ago

wingmeng commented 5 years ago

题目：

image

我的答案：

<div class="panel login-box">
    <div class="panel-head">
        <h3 class="panel-title">登录</h3>
    </div>
    <div class="panel-body">
        <form id="loginForm">
            <div class="form-group">
                <input type="text" class="form-input" placeholder="账号/手机" autofocus required>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="password" class="form-input" placeholder="密码" required>
                    <a href="..." class="input-group-addon">忘记密码？</a>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <input type="text" class="form-input" placeholder="验证码" autocomplete="off" required>
                    <a href="..." class="input-group-addon">
                        <img src="..." alt="验证码" id="validCode" width="86" height="28">
                    </a>
                </div>
            </div>
            <p id="tipMsg">&nbsp;</p>
            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">登录</button>
                <a href="..." class="btn btn-link btn-block">立即注册</a>
            </div>
        </form>
    </div>
</div>
wingmeng commented 5 years ago

自我评分：良好

优秀、良好、一般、差劲

不足之处：

  1. 轻视了 fieldset 这个 ARIA 无障碍访问标签的作用

学习收获：

  1. 刷新了对 fieldset 的认识；
  2. 使用 autofocus 聚焦第一个文本框，节省用户时间；
  3. 关闭验证码文本框的自动完成功能 autocomplete="off"，避免干扰用户。
wingmeng commented 5 years ago

最佳实践

<fieldset>
  <legend>登录</legend>
  <form>
    <div class="form-group">
      <input type="text" name="username" placeholder="账号/手机" autofocus required>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="password" name="password" placeholder="密码" required>
        <a href="..." class="input-group-addon">忘记密码？</a>
      </div>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="text" name="validCode" placeholder="验证码" autocomplete="off" required>
        <a href="..." class="input-group-addon">
          <img src="..." alt="验证码">
        </a>
      </div>
    </div>
    <p id="tipMsg">&nbsp;</p>
    <div class="form-group">
      <button type="submit">登录</button>
      <a href="...">立即注册</a>
    </div>
  </form>
</fieldset>
wingmeng commented 5 years ago

查缺补漏：

  1. 验证码的文本框要加上 autocomplete="off" 来关闭自动填写功能。因为验证码每次都是不同的，对输入而言自动填写是没有任何意义的，反而会影响用户体验。
  2. 登录页面为第一个文本框（一般是用户名）加上 autofocus="true"，这样页面加载后用户可以直接用键盘进行输入了。
  3. 登录页面的文本框要加上 spellcheck="false" 来关闭语法检查功能，避免对用户的干扰。
  4. 不区分大小写的验证码，使用 text-transform: uppercase 声明，这样无论用户输入大写还是小写，都会自动转为大写字母。