Short Answer
Use a label. HTML semantics are important for accessibility, SEO and User Experience.
Long Answer
The first reason for needing labels is for screen readers.
These are tools that people with vision impairments use in order to access your website.
Screen Readers are basically advanced text to speech, or text to braille software.
So why do labels matter if there is a heading above?
Screen readers users navigate pages in different ways.
Where you might look at the page and make associations they do not have that luxury, they are reliant on your HTML markup being correct.
For example they may navigate by headings, or they may loop through all the hyperlinks on a page or they may search for forms on the page (especially in the example you gave where the page title would hopefully indicate that the page is a login page).
The last example (forms mode) is why your labels are essential.
Without them they may find your login form by using shortcuts to find the form and would immediately be met with "input". They may skip right over your headings, instructions etc.
No further information would be presented to them!
Placeholders work in around 90% of browser and screen reader combinations but that also means they do not work in 10% of them.
For this reason a properly associated label (either by wrapping the input in a label or by using for="idOfInput") is essential for a great user experience.
Another reason to use a label.
Screen reader users and not the only people you need to consider. What about people with cognitive disabilities and anxiety disorders?
If someone has an anxiety disorder that means that they may fill in your form, then worry that they have filled the wrong field in because your placeholder text has disappeared so are then forced to delete what they entered to double check that they filled the right field in.
More Reasons to use a label
Auto complete is a great tool built into browsers. A lot of the time this relies on the label of the form field in order to work out what to enter.
Login forms tend to be more robust and not require this due to poor development practices where developers don't add labels.
For this reason browser vendors have put lots of effort into guessing whether a combination of fields on a page are login information.
For any other form, labels are the quickest way to ensure auto complete works as expected.
Any more reasons?
Yup, the Web Content Accessibility Guidelines (WCAG 2.1) is the international standard for accessibility on websites. Properly associated labels are a level A (the basics) requirement.
Without them you could end up being taken to court and find yourself at the receiving end of a lawsuit.
I am not sure what country you are from, but if it is the USA there were over 3200 cases of discrimination because of inaccessible websites last year. This year there will almost certainly be more.
If you are in the UK (like me) or Europe, then your website is covered under the Equality Act 2010, meaning that you would also be at risk of being sued for discrimination. The risk is lower here at the moment but the bad press from people complaining is not good.
Oh and don't forget people with disabilities also have money to spend and want to use your services too. Why not make it easy for them when some of your competition may not so they become a loyal customer?
Anything else?
Oh yeah, labels above form fields tend to improve conversions as they reduce cognitive load. It may only be about 1% but for the sake of 30 seconds adding a label, it is one of the quickest wins you can make.
For context if you ever become lucky enough to have a site that generates £1 million a year (around 1.1 million USD) then adding labels could add £10,000 (11,000 USD) in revenue for free.
Conclusion
Use. A. Label.
No seriously, use labels, it is one of the easiest ways to improve your site. If you really don't want to ruin your design with a label (which is a silly excuse but I see it that often I have come to accept it) then at least use a visually hidden label.
This means your label is still accessible to screen readers, but it will not be visible. This can be done with the visually hidden class.
HTML
<label for="input1" class="visually-hidden">Form Field Label</label>
<input id="input1"/>
CSS
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap; /* added line */
}
