搜索

上面这段代码，网页是搜索我今天要聊的核心。别小看这十几行HTML，框代它决定了用户是网页痛快地找到东西，还是搜索烦躁地关掉页面。我见过太多网站，框代搜索框做得像迷宫入口——找半天找不到，网页找到了又不知道往哪儿输。搜索 先说最基础的框代逻辑。搜索框的网页本质是“用户输入→提交到服务器→返回结果”。HTML部分只需要管前两步：一个``标签接收文字，搜索一个``触发提交。框代但这里有个坑：很多人忘了给``加`name`属性。网页没有它，搜索你按回车时浏览器根本不知道该把输入的框代文字叫什么名字发给后端。就像你寄快递不写收件人姓名，邮局只能退回。 再说说`placeholder`这个属性。它显示灰色提示文字，比如“搜索商品”“输入书名”。别小看这几个字，它是用户唯一的行动指引。我见过一个电商网站，placeholder写“请输入”，用户愣是不知道能搜什么，转化率掉了一截。后来改成“搜连衣裙、T恤、牛仔裤”，订单量立刻涨了。具体比抽象管用，这是铁律。 还有个容易忽略的细节——`type`类型。默认是`text`，但如果你用`type="search"`，在部分浏览器里会自带一个清除按钮（就是那个小叉号）。这个细节很实用，用户输错了不用按退格键删半天，点一下就能清空。移动端尤其重要，手指操作比键盘麻烦多了。 接下来是表单的`method`。GET还是POST？搜索框几乎永远用GET。因为搜索行为是幂等的——同样的关键词，刷新页面应该得到同样的结果。GET会把参数拼在URL里，用户可以复制链接分享给别人，也能用浏览器前进后退键。POST则会把参数藏在请求体里，URL干干净净，但用户没法收藏这个搜索页。谁会在收藏夹里存一个搜索结果的链接？没人。所以用GET，别犹豫。 回车提交这个行为，很多人以为是浏览器自动处理的。其实不然。如果你把``放在`

`标签内，按回车才会自动提交。要是你图省事，只写了个``配一个`

`，没有``包裹，那回车键就完全失效——用户得专门去点按钮。这体验太糟糕了。我见过一个小型博客站，搜索框在页脚，回车没反应，气得用户直接去百度搜“site:xxx.com 关键词”。你说冤不冤？ 最后说样式。纯HTML的搜索框丑得没法见人——默认边框、默认字体、默认间距。但你不需要写多复杂的CSS，两三行就能让它像样：给`input`加个`border-radius: 20px`变成圆角，给`button`加个`background-color`换个颜色，再调一下内边距。完事。别过度设计，搜索框不是展示创意的舞台，是工具。用户要的是“一眼认出来，一按就出结果”。 对了，还有个移动端适配的坑。很多网站的搜索框在手机上会触发缩放，因为输入框字体小于16px。iOS Safari会在聚焦时自动放大页面，用户得手动缩小才能看全结果。解决办法很简单：给`input`设置`font-size: 16px`以上，或者加个`viewport` meta标签的`maximum-scale=1`。前者更优雅。 写代码这事，越简单的东西越容易出细节问题。搜索框就那几行，但每个属性背后都是一个用户场景。你多花三十秒想想“用户在这儿会怎么操作”，代码质量就能甩开一大截。别嫌啰嗦，我见过太多团队把时间花在炫酷的动画上，结果基础交互一塌糊涂。先把这十几行写对，再谈别的。