Insecure Passwords MDN page
The HTTPS protocol is designed to protect user data from eavesdropping (breach of confidentiality) and from modification (breach of integrity) on the network. Websites that handle user data should use HTTPS to protect their users from hackers. Without it, it is trivial to steal user information (such as their login credentials). This was famously demonstrated by Firesheep.
Serving insecure login forms is especially dangerous because of the wide variety of attacks that can be used against them. Network eavesdroppers steal a user's credentials directly by sniffing the network, or modify the served page in transit to enable a plethora of attacks.
The security panel in the Firefox Web Console warns developers if they serve pages that request passwords, like login forms, over an insecure connection. There are several scenarios in which a web developer can fail to protect their user's login experience:
1. Serving the login form over HTTP. Even if the form action is an HTTPS URL, the user's login form is not protected because an attacker can modify the page received by the user (for example, attackers can insert a keylogging script that exfiltrates their password as they type it, or they can change the form destination to post the sensitive data to a server that they control). Here is a screenshot presenting the problem with the relevant warning messages displayed in the security tab of the web console:
Login Fields on an Insecure Page
2. Using an HTTP URL in the form action. In this case, any data the user enters is sent through the network in cleartext. The user's password is clearly visible to anyone sniffing the network from the time the password leaves the user's computer to the time it reaches your website's servers. Here is another screenshot presenting the html source of the form and the relevant warning message:
Login fields on a form with an http:// action
3. Serving the login form in an HTTP iframe (or an HTTPS frame that is embedded in an HTTP frame). Even if the topmost page is HTTPS, including the password field in an HTTP iframe is equivalent to including it in an HTTP page. Attackers can modify the page and steal the user's credentials.
Login fields on an http:// iframe
Sometimes websites require username and passwords, but don't actually store data that is very sensitive. For example, a news site may save which news articles a user wants to go back and read, but not save any other data about a user. Web developers of the news site may be less motivated to secure their site and their user credentials. Unfortunately, password reuse is a big problem [link?]. Users use the same password across multiple sites (news websites, social networks, email providers, banks). Hence, even if access to the username and password to your site doesn't seem like a huge risk to you, it is a great risk to users who have used the same username and password to login to their bank accounts. Attackers are getting smarter; they steal username/password pairs from one site, and then try reusing them on more lucrative sites.