2 selection buttons 1 preferred but with different input types

Question

I have 2 login forms in the same page: login with username&password, login with emailaddress&password.

I separated forms with tabs but 1 of the login forms is always selected as default behavior of a tab.

The one with the username&password is the default selected form.

However people type their email address to the form that I ask for username&password and I got a lot of faield login attempts.

I thought I could have an accordion menu that are collapsed as default or with navigation pills. Another option would be having 2 buttons and when clicked the login form open for each of them.

Any suggestions?

Answer 1

I think most of the business websites and big social websites use an email instead of the username, but in your case try to do not confuse the user, you can just place over the username field Email/Username, and your system must apply some simple methods of AI to detect the username field content, for example:

If you start typing something in the username field, you must start to exam the context in steps: As an example!

1- If start to type "@" after some letters so tell the system to switch the mode to accept the email.

2- Then if he finishes typing the email, not in a proper way you can guide him to correct his email formate or it will be accepted as normal text.

I think this is it all! login area must be simple enough to do not make the user feel the complication.

Important to know: As must time you spend in the backend this will simplify the front end and vice-versa.

Answer 2

Is it possible to combine the fields into one input, and figure out which they used server side? That way, you can eliminate half the fields, and the user doesn't have to make a decision or remember whether they login with their email or username.