前言
先前写了一篇《被遗忘的CSS和HTML（一）》，后来因为各种事情，懒得写。最近把文章分享到掘金收获了不少点赞和鼓励，决定就再写点，希望从另一个角度去看一些问题的解决方法，还是那句话：
各种技术都有其适用场景
这里更多的是探讨另一种思考问题和解决问题。
最近几年，前端的发展向Javascript侧重，基本上一个问题过来，JS唰唰地写起来。确实，JS的势头很猛，跟页面相关的问题，基本上是可以用JS解决，而CSS和HTML往往会被忽略，虽然CSS3有时候给人也很厉害的方案。
好的，话也不多说，能抓老鼠的都是厉害的猫，咱们就聊聊用CSS和HTML这两只小猫能不能抓一些不一样的老鼠吧。
表单验证
最常见的表单就是登录和注册表单了。以登录这例，基本过程就是：
用户输入 => 用户提交 => 验证输入 => 提交后端
至于后端的处理及之后的动作，我们就不讨论了。
用户提交表单，通常有两种方式：
- 点击表单的登录按钮
- 敲回车键
没有去了解过这两种方式哪种更普遍，于我个人而言，我都是敲回车键。除非这个网站或应用本身不支持，我才会去点击登录按钮。如果是后者，一般给我的第一印象就是，这个网站或应用的体验不好。这个当然是个人的习惯哈……
这里，我们要讨论的验证指的是从开发角度讲，什么时候验证，也就是表单验证的时机问题。从交互讲，有四种方式：
- 即时验证：用户边输入边验证
- 失焦验证：用户的输入焦点离开时验证，通俗讲就是blur时验证
- 提交验证：用户输入完表单，操作提交后验证
- 后端验证：前端不做验证，直接将数据提交给后端，由后端验证
每种方式的优劣，我就不讲了，不在本文的讨论范围，这里只针对第3种提交验证。上面也说了，提交表单无非两种方式，对应到代码上就是click/touch事件和keyup/down/press事件。
我不下一次看到有人使用监听这两类事件，然后在他们的回调里去做验证逻辑，比如，某知名房产中介公司，他们的代码里有这样一行：
$("#con_login_user").delegate("input", "keyup", function(e) {
13 == e.keyCode && $(".login-user-btn").click()
});
首先，不去猜测别人的意图哈，最佳的表单提交callback，事实上并不需要任何input/keyup/click这类事件去处理，form本身自带响应提交功能，只是后来前端用多了，似乎有的人忘了这回事。
form表单天生带有submit事件，表单验证只是表单提交前的一个交互动作（验证用户输入的合法性，及早提示，避免多余请求），而要触发submit事件，表单元素天生具有触发功能：
- input/radio/checkbox等元素focus时，只要form表单是一个正常表单，回车即可
- button[type=submit]/input[type=submit]，点击即可触发，不需要onclick
记得这两点，你的表单验证功能就只需要声明form的submit事件，在submit回调中去做验证，对失败的验证，操作错误提示，并preventDefault即可。
细心的人会发现，上面提到了正常表单，怎么理解一个form是正常表单呢，需要保证以下两规则：
- 声明form[action]和form[method]
- 表单内具有[type=submit]的buton或input
养成个好习惯，多用上面两条规则，在某些你们认为的奇葩问题里，也许，它们就是“解决方案”。打个比方，先前在美团时候，看到那个美团技术博客（你们应该知道是哪个，我是忘了全称了）里有提到
iOS里，input[type=search]不会触发虚拟键盘的Enter键显示
搜索的图标
我当时就觉得吧，这人写博客是不是有点太草率了，关键还说这是iOS的bug。后来我去他们的微信公众号上找到了这篇文章，并评论了，然而，人家不理我哈。。呵呵。
事实上，这并非所谓的bug，而是我们在使用input[type=search]时，太过于随便了。早些年还好，现在写JS的人，好多总是莫名其妙的依赖JS，而把HTML和CSS置于“能用就好”的位置，而在这样简单的例子里，却也没有能用。我简单说一下怎么解决这个“问题”：
- input[type=search]元素放在
form元素内form元素声明action和method属性，不要为空，好好写个正常值
关于第二点，你可能会发现在不同版本的iOS里，可能并不用两个属性都声明，但是，由于iOS各版本表现的不一致性，最好还是老老实实写完整来。
定位
这里说的定位不是position。
定位：指的是快速定位到页面的某个位置。说白了就是让浏览器滚动条快速滚动到特定位置。
最觉见的定位功能是返回顶部，这个功能可以说是长页面的标配功能了，通常是在页面的右下角，有一个按钮，点击后可以快速返回到顶部，如下图：
图中的第一个小icon便是返回顶部。通常，这种功能就是一句话：
theButton.onclick = () => window.scrollTo(0, 0)
核心功能就是这么简单。现在，我们想想，如果不要写JS呢，能不能实现。
当然可以，事实上，HTML自带有定位功能。说到这里，相信你一定会想到：锚点。
是的，这是一个原生HTML定位功能，锚点，就好比船只的锚，将船只固定在特定位置。锚点定位我就不再讲了，我想说，还有吗？
事实上，还有一个需要换个角度想：input/textarea。
当input或textarea聚集(focus)时，实际上是会触发浏览器的滚动条定位的，也就是说，如果你的inupt或textarea不在当前视窗内，那浏览器会将页面滚动到特定位置，以便于input和textarea显示在视窗内。
换个角度，这是一种定位。使用input或textarea定位和锚点一样的简单：
<input type="text" id="fast-position-test" />
<!-- ...这里就是一堆的HTML了，很长很长，长到有滚动条 -->
<label for="fast-position-test">返回顶部</label>
使用label[for]，我们就可以将返回顶部置于页面的任何地方，而将input放置在页面顶部，如果页面有滚动，必然input框会显示在视窗外，当我们点击返回顶部时候，浏览器就会将页面滚动到顶部了。
当然，我们的input应该是隐藏的，这个加个CSS就可以了。
显示和隐藏
曾经，在前公司有个这样的需求：
- 顶部有个通栏banner位
- banner上有个x，用来关闭该banner
- 页面右下角有几个通用按钮，如返回顶部、客服按钮、APP二维码
- 点击2中提到的x，关闭banner，并在3中添加一个按钮，用于重新打开banner
- 点击4中添加的按钮，打开banner
简单来讲，就大概像下面这两个图：
为了避免广告植入，上述图1被模糊了。
当点击图中右上角的x，就会变成：（请仔细看x的右上角，有个二维码样的icon）
二维码样的icon上面多出了一个小程序下单的icon，点击这个icon，就会恢复前面的底部通栏Banner。
功能大体上是这样的。类似这样的功能，其实在某宝手机端也是有的：
点击左图红色框中的“1/100”，就会出现底部变了个样子，点击右图的那个紫色框，就会恢复到左图了。
这种功能，在很多地方都会有，比如各大OTA网站上，相当常见底部放个通栏banner，然后点击关闭换了个展示，新展示又可以再展开banner。。。
这很简单啊，加个onclick事件，display none和block一下就行了。代码逻辑大概就长这样：
theBannerCloseBtn.onclick = () => {
theBanner.style.display = "none"
theAsideIcon.style.display = "block"
}
theAsideIcon.onclick = () => {
theBanner.style.display = "block"
theAsideIcon.style.display = "none"
}
现在的问题是，不要用任何JS代码呢，只使用HTML和CSS，怎么实现？
如果你有看我之前的一篇文章被遗忘的CSS和HTML（一）介绍的锚点与:target，你应该会想，可以通过锚点和:target实现。确实，这是其中的一种方法。只是我也提到过，锚点也有自身的问题，其中之一便是：历史记录。
前一篇文章的场景是，我们确实想要利用历史记录的功能来实现返回。
这个场景里，我们并不希望出现历史记录，而仅是简单的点击交互。
其实，控制显示隐藏，本来就是CSS的专长，你用JS，本质上只是通过JS操作DOM元素，依然是CSS在处理显示隐藏。
仔细分析这个简单的功能，事实上，它是这样的：
- 点击
- 显示和隐藏
刚已经说了，第二点就是CSS做的。要让一个元素显示隐藏CSS很简单:
.el {
display: none;
}
.el.show {
display: block;
}
问题就是，怎么触发
点击，如何让CSS响应到点击的操作？
这更多的不是一个技术问题，而是思路转换的问题。毫无疑问，CSS（至少目前为止）并不能像JS那样，通过onclick事件去响应用户的操作。但是，CSS是有一些响应用户操作的功能，比如：:hover，就是CSS响应用户的鼠标滑过操作。怎样理解CSS响应用户操作呢，我概况为下面一句话：
用户操作引起了UI界面的变更，这些变更可以通过CSS属性定义，便是
CSS响应用户操作
打个比方，你点击了一个未访问过的a链接，a标签实际上会有一连串的响应：hover -> active -> visited。在没有自定义CSS样式时，不同的响应，会有不同的UI变化，比如，hover会让a链接字体变蓝。
回到我们的问题，现在我们知道，CSS是有响应用户操作的功能，对于本题，我们需要的是响应用户点击操作，反应速度快的，一定会想到，a:visited就可以响应用户的点击了。换个角度看，这确实是响应了用户点击操作，只是很遗憾，在这个问题上，a:visited很难满足。
我就直说了，label元素。
点击label[for]（或<label>Test<input /></label>）元素，for所指的表单元素实际上就会响应这个点击操作，input[type=text]会聚焦(focus)，出现光标，input[type=submit]会触发form表单的提交（相当于点击了input），input[type=radio | checkbox]会被选中等等。
看到这里，相信大家心里有数了，这里，我们要用的就是label[for]+input[type=checkbox]+:checked。完整的代码我就不弄了，大体是这样的：
HTML结构：
<!-- 我们的HTML类似这样 -->
<aside>
<input type="checkbox" class="toggler-box" id="toggler-box" />
<div class="banner">
<label for="toggler-box">x</label>
</div>
<div class="aside-container">
<label for="toggler-box" class="miniapp-btn">小程序下单</label>
<button>others</button>
</div>
</aside>
CSS代码：
<!-- 主要的CSS代码 -->
.aside-container .miniapp-btn {
display: none;
}
.toggler-box:checked ~ .banner {
display: none;
}
.toggler-box:checked ~ .aside-container .miniapp-btn {
display: block;
}
至于动画神马，也只是把display: none | block换成transition或animation而已。
自定义表单元素
相当简单哈，一个div，border-radius: 50%; 再加上onclick事件，点击时候切换一下class，一个radio就可以了，简直是简单的不要太爽。
确实，相当简单的，对于移动端来讲，这是挺好的。然而，如果是PC，是不是应该多想下还有没有其他的问题：
- 支持tab吗
- 支持键盘选中和取消吗
- 支持键盘enter提交数据吗
这3点都是表单元素自带功能，如果你的自定义表单元素不能实现这些功能，那……也可以。只是，更完善的模拟表单元素，给用户提供更好的体验，不是更好吗。
要实现上面的三点，其实，我们可以保留表单元素，配合:checked，:focus这些伪类，还原表单元素固有交互。以一个checkbox来讲：
HTML结构：
<label>
<input type="checkbox" name="box" class="test-box" />
<span class="box-simulator"></span>
选我吧
</label>
CSS样式：
.simulator {
position: relative;
}
.test-box {
position: absolute;
z-index: -1;
left: 0;
top: 0;
/* 使用visibility: hidden 来隐藏，是为了让tab键可以捕获到，如果使用display: none，无法捕获，也可以opcity: 0 */
visibility: hidden;
}
.box-simulator {
color: #999;
border: 1px solid;
display: inline-block;
width: .7em;
height: .7em;
border-radius: 2px;
}
.test-box:checked + .box-simulator {
/* 这里只是简单填充成一个色块来代表选中 */
color: #ff920b;
background-color: #ff920b;
}
.test-box:focus + .box-simulator {
/* focus就是tab捕获到后触发的，tab键捕获，实际上就是focus */
color: #ff3333;
}
至于支持键盘enter提交数据，在上面的基础上，将HTML放到正常表单里就好了。（正常表单上面提到过）
思考
在显示和隐藏这个点子上，我给了一个小例子来展开，我的本意只是做一个启发，显示隐藏还有好多种场景需求，并不是一种方法就可以涵盖所有的需求的。这里，再提一个很常见的需求：
点击某个元素X，显示某些隐藏的内容Y，点击页面其他位置（非X、非隐藏内容Y），隐藏Y
图文配合解释下这样的需求场景就是：
看着上图，需求描述是这样的：
- 点击红框，显示绿框（默认隐藏）
- 点击页面其他位置（非红绿框），隐藏绿框（当然，绿框内的某些元素是有交互的，这不关这个需求的事）
就是这样的，然后，只有一个要求：
不使用JS
各位可以看看怎么实现哈。欢迎评论发表解决方案哈~~
