前言

创建一个不需要JavaScript的登录注册表单。通过HTML5带来的强大表单功能和CSS实现该登录注册表单。使用 HTML 和 CSS 可能比引入 JavaScript 具有更好的性能，避免了 JavaScript 执行带来的潜在开销。

设计分析

通过HTML5中新增的表单相关属性placeholder、required和pattern分别给用户输入提示、设置必填项和使用正则表达式设置输入规范。这样可以减少JavaScript代码。

当点击登录或注册将隐藏的部分缓慢移动出现。也就是通过将登录和注册设置为两个单选框，当被选中时，通过改变样式实现登录和注册的切换。

登录注册效果：

动画6.gif

HTML部分

将表单分成两部分，一部分是登录注册选择部分，另一部分是信息输入部分。

登录注册选择部分

定义两个单选框，一个用于登录选择，一个用于注册选择。但是需要有一个被默认选择，这可以通过给登录单选按钮添加checked属性实现默认选择。

在两个单选按钮上添加hidden属性可以隐藏单选按钮，让其在页面上不可见。都设置为不可见了，那要怎么选中呢？其实可以通过将input的id属性的属性值和label的for属性的属性值设置为相同的值，实现点击 label 元素时，触发与之关联的单选按钮的选中操作。

用一个em标签显示下划线，在这里起着占位的作用。通过CSS实现下划线的绘制。

<input type="radio" id="login-btn" hidden name="auth" checked />
<input type="radio" id="register-btn" hidden name="auth" />
<div class="auth-title">
    <label for="login-btn">登录</label>
    <label for="register-btn">注册</label>
    <em></em>
</div>

信息输入部分

信息输入部分又可以分成两部分，分别是登录信息输入部分和注册信息输入部分。

登录信息输入部分

在登录时需要输入两个信息，分别是账号和密码。

为了让用户知道需要输入的信息，可以通过设置input的placeholder属性提示用户进行输入操作。当输入框为空且未获得焦点时，placeholder属性会在输入框中显示一段提示性的文本，用于提示用户该输入框期望输入的内容信息。当用户开始在输入框中输入时，该提示文本会自动消失。
因为登录需要账号和密码都不为空，所以给input添加了required属性。required 属性的作用是规定输入字段不能为空。当表单提交时，如果带有 required 属性的输入字段为空，浏览器会显示提示信息，提醒用户必须输入内容，从而确保用户提供必填的信息。
因为账号和密码都是有严格的规范的，所以需要给账号和密码设置规范。一般可以使用JavaScript实现，但是在HTML5中增加了新属性pattern也可以实现。通过将pattern的属性值设置为正则表达式可以用于验证输入字段的值是否符合指定的规范。

<form>
    <div>
        <input type="text" placeholder="请输入账号" required pattern="^1[3-9]\d{9}$">
        <label>账号</label>
    </div>
    <div>
        <input type="passsword" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
        <label>密码</label>
    </div>
    <button type="submit">登录</button>
</form>

^表示是字符串匹配的开始；$表示字符串匹配的结束；\d表示匹配任意数字，等价于 [0-9]；[]表示在一个字符串里可能出现的任意一个字符；{}表示前面的元素的出现次数。

正则表达式^1[3-9]\d{9}$的含义：确保字符串以1开始，第二位是3到9之间的数字，之后紧跟着9个数字，且刚好构成11位数字的完整手机号，无多余字符，实现从起始到结束的精确匹配。
正则表达式^[a-zA-Z0-9]{6,12}$的含义：检查字符串是否由6到12个字符组成，这些字符必须是大小写字母或数字，且字符串必须正好满足这个长度要求。

注册信息输入部分

在注册时，需要输入一次账号和两次一样的密码才能完成注册。

<form>
    <div>
        <input type="text" placeholder="请输入账号" required pattern="^1[3-9]\d{9}$">
        <label>账号</label>
    </div>
    <div>
        <input type="passsword" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
        <label>密码</label>
    </div>
    <div>
        <input type="passsword" placeholder="请再次输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
        <label>重复密码</label>
    </div>
    <button type="submit">注册</button>
</form>

html代码

<div class="auth">
    <input type="radio" id="login-btn" hidden name="auth" checked />
    <input type="radio" id="register-btn" hidden name="auth" />
    <div class="auth-title">
        <label for="login-btn">登录</label>
        <label for="register-btn">注册</label>
        <em></em>
    </div>
    <div class="auth-form">
        <form>
            <div>
                <input type="text" placeholder="请输入账号" required pattern="^1[3-9]\d{9}$">
                <label>账号</label>
            </div>
            <div>
                <input type="passsword" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                <label>密码</label>
            </div>
            <button type="submit">登录</button>
        </form>
        <form>
            <div>
                <input type="text" placeholder="请输入账号" required pattern="^1[3-9]\d{9}$">
                <label>账号</label>
            </div>
            <div>
                <input type="passsword" placeholder="请输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                <label>密码</label>
            </div>
            <div>
                <input type="passsword" placeholder="请再次输入密码" required pattern="^[a-zA-Z0-9]{6,12}$">
                <label>重复密码</label>
            </div>
            <button type="submit">注册</button>
        </form>
    </div>
</div>

CSS部分

通过有弹性布局的flex: 1;和overflow: hidden;实现了信息输入部分的隐藏。

.auth {
  overflow: hidden;
  width: 320px;
  background: #f0f0f0;
}
.auth .auth-form {
  display: flex;
  width: 200%;
  height: 250px;
  transition: all 0.3s ease-in-out;
}
.auth .auth-form form {
  flex: 1;
  padding: 20px;
}

在没有overflow: hidden;时的效果是这样的

动画7.gif

当选中注册按钮时，使第二个标签文字变成红色标签加粗。
```
#register-btn:checked ~ .auth-title label:nth-child(2) {
  color: #f66;
  font-weight: bold;
}
```
通过:checked伪类表示被选中的状态；通过~选择器选择某个元素之后的兄弟元素，只要这些元素共享同一个父元素，并且符合选择器中的条件，不论它们之间间隔了多少其他元素；通过label:nth-child(2)选择在某元素中第二个子元素并且是label元素。

当选中注册按钮时，下划线平移 160 像素。

#register-btn:checked ~ .auth-title em {
  transform: translateX(160px);
}

当选中注册按钮时，表单向左平移。

#register-btn:checked ~ .auth-form {
  transform: translateX(-50%);
}

登录和注册的CSS设计是一样的。当登录按钮被选中时，使第一个标签加粗且文字变红，使下划线回到初始位置，使表单回到初始位置。

#login-btn:checked ~ .auth-title label:nth-child(1) {
  font-weight: bold;
  color: #f66;
}
#login-btn:checked ~ .auth-title em {
  transform: translateX(0);
}
#login-btn:checked ~ .auth-form {
  transform: translateX(0);
}

纯CSS 实现登录注册表单

前言