登录表单：用input-email实现移动端友好键盘并保留必填验证

直接修改输入框属性即可满足需求，核心是用type="email"唤起移动端专用键盘，同时通过pattern属性绕过邮箱格式验证，保留required实现必填校验：

<div class="form-floating">
    <input required autofocus type="email" class="form-control" 
    id="username" name="username" placeholder="username or email" pattern=".*">
    <label for="username">username or email</label>
</div>

关键属性说明： #

• type="email"：触发移动端设备显示带有@和.快捷键的专用键盘，提升输入效率；
• pattern=".*"：用匹配任意字符的正则表达式，覆盖浏览器默认的邮箱格式校验规则，让非邮箱格式的用户名也能通过前端校验；
• required：保留原生必填字段验证逻辑，确保用户无法空提交。

这个方案无需额外JavaScript代码，纯HTML就能实现需求，兼容性覆盖绝大多数现代浏览器。

内容的提问来源于stack exchange，提问作者GiLA3