支持邮箱或用户名输入的登录表单应选用何种input类型？

直接用type="text"是最优选择，原因如下：

• type="email"会触发浏览器自带的格式校验，当用户输入非邮箱格式的用户名时，浏览器会弹出“请输入有效的邮箱地址”这类错误提示，完全不符合你同时支持两种输入的需求。
• type="text"没有格式限制，用户可以自由输入邮箱或任意格式的用户名，不会被浏览器的默认校验打断操作。

你可以搭配这些优化细节提升体验：

• 在placeholder里明确提示“邮箱或用户名”，让用户清楚输入规则
• 添加autocomplete="username email"属性，帮助浏览器识别该字段可以填充用户名或邮箱信息，提升自动填充的准确性
• 后端逻辑单独处理输入内容：判断输入是否符合邮箱格式，再分别走邮箱登录或用户名登录的校验流程

示例代码：

<input type="text" id="login-identity" name="login-identity" placeholder="邮箱或用户名" autocomplete="username email">

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