Favour .form-hints over input placeholder attributes

Fixes #2180.

Input placeholders are a generally problematic UI convention, and we’ve
accidentally started using them in more and more parts of FMS over the
last few years.

In some cases, the placeholders simply repeated text from the input’s
existing label element. In cases like those, the placeholder attribute
could just be removed.

In other cases, we broke the placeholder text out into a .form-hint
element, between the input and its label, so that the text is easily
accessible and falls into the top-to-bottom reading flow.

Notable changes:

* Form hint on main postcode search form, instead of placeholder.
* Form hint on alert search form, instead of placeholder.
* Form hints in reporting form (problem summary and description),
  instead of placeholders.
* Removed placeholders from most login/password inputs.
* The character limit for "Inspector" report updates is no longer
  displayed in the textarea placeholder.
* Form hints now `#666` grey, and better spaced when immediately
  following a label element.

31 files changed, 101 insertions, 67 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3b9dd2caf..f727686f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
         - Show message on reports closed to updates.
         - Only display last 6 months of reports on around page by default #2098
         - Always show all reports by default on /my.
+        - Much less reliance on input placeholders, for better accessibility #2180
     - Admin improvements:
         - Mandatory defect type selection if defect raised.
         - Send login email button on user edit page #2041
diff --git a/templates/web/base/alert/index.html b/templates/web/base/alert/index.html
index 1442e6bdc..ca1b26e60 100644
--- a/templates/web/base/alert/index.html
+++ b/templates/web/base/alert/index.html
@@ -30,8 +30,10 @@ within a certain distance of a particular location.', "%s is the site name"), si
 </p>
 <form method="get" action="/alert/list" class="form-box js-geolocate">
   <fieldset>
+    <label for="pc">[% loc('Postcode or street name and area') %]</label>
+    <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p>
     <div class="form-txt-submit-box">
-      <input class="form-control" type="text" name="pc" value="[% pc | html %]" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]">
+      <input class="form-control" type="text" name="pc" value="[% pc | html %]" aria-describedby="pc-hint">
       <input class="green-btn" type="submit" value="[% loc('Go') %]">
     </div>
   </fieldset>
diff --git a/templates/web/base/alert/updates.html b/templates/web/base/alert/updates.html
index 82e99d49a..a77f8d0f9 100644
--- a/templates/web/base/alert/updates.html
+++ b/templates/web/base/alert/updates.html
@@ -19,7 +19,7 @@
         <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label>
 
         <div class="form-txt-submit-box">
-            <input class="form-control" type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]" placeholder="[% loc('Your email') %]">
+            <input class="form-control" type="email" name="rznvy" id="alert_rznvy" value="[% email | html %]">
             <input class="green-btn" type="submit" value="[% loc('Subscribe') %]">
         </div>
 
diff --git a/templates/web/base/around/postcode_form.html b/templates/web/base/around/postcode_form.html
index 1293028d0..ca82f3388 100644
--- a/templates/web/base/around/postcode_form.html
+++ b/templates/web/base/around/postcode_form.html
@@ -10,8 +10,9 @@
 
         <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm" class="js-geolocate">
             <label for="pc">[% question %]:</label>
+            <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p>
             <div>
-                <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" required>
+                <input type="text" name="pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" required aria-describedby="pc-hint">
                 <input type="submit" value="[% loc('Go') %]" id="sub">
             </div>
 
diff --git a/templates/web/base/auth/general.html b/templates/web/base/auth/general.html
index 1e44bb68e..4dbdb179f 100644
--- a/templates/web/base/auth/general.html
+++ b/templates/web/base/auth/general.html
@@ -80,10 +80,10 @@
     <div id="form_sign_in_yes" class="form-box">
         <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
 
-        <label class="hidden-js n" for="password_sign_in">[% loc('Password:') %]</label>
+        <label for="password_sign_in">[% loc('Your password') %]</label>
 
         <div class="form-txt-submit-box">
-            <input type="password" name="password_sign_in" class="form-control" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+            <input type="password" name="password_sign_in" class="form-control" id="password_sign_in" value="">
             <input class="green-btn" type="submit" name="sign_in_by_password" value="[% loc('Sign in') %]">
         </div>
 
@@ -112,8 +112,8 @@
         <h5>[% loc('<strong>No</strong> let me sign in by email') %]</h5>
       [% END %]
 
-        <label for="name">[% loc('Name') %]</label>
-        <input class="form-control" type="text" name="name" value="" placeholder="[% loc('Your name') %]">
+        <label for="name">[% loc('Your name') %]</label>
+        <input class="form-control" type="text" name="name" value="">
 
         <label for="password_register">[% loc('Password (optional)') %]</label>
       [% IF field_errors.password_register %]
@@ -125,7 +125,7 @@
         </div>
 
         <div class="form-txt-submit-box">
-            <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+            <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="">
             <input class="green-btn" type="submit" name="sign_in_by_code" value="[% loc('Sign in') %]">
         </div>
 
diff --git a/templates/web/base/questionnaire/index.html b/templates/web/base/questionnaire/index.html
index 4305f05c9..4b6ce82f9 100644
--- a/templates/web/base/questionnaire/index.html
+++ b/templates/web/base/questionnaire/index.html
@@ -70,7 +70,7 @@
 <p>3. [% loc('If you wish to leave a public update on the problem, please enter it here
 (please note it will not be sent to the council).') %]</p>
 
-<p><textarea class="form-control" name="update" rows="7" cols="30" placeholder="[% loc('What was your experience of getting the problem fixed?') %]">[% update | html %]</textarea></p>
+<p><textarea class="form-control" name="update" rows="7" cols="30">[% update | html %]</textarea></p>
 
 [% IF c.cobrand.allow_photo_upload %]
     <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
diff --git a/templates/web/base/report/_inspect.html b/templates/web/base/report/_inspect.html
index 252fde5ea..adb56190d 100644
--- a/templates/web/base/report/_inspect.html
+++ b/templates/web/base/report/_inspect.html
@@ -162,9 +162,14 @@
           </select>
         </p>
         <p>
-          <label for="detailed_information">[% loc('Extra details') %]</label> <span id="detailed_information_length"></span>
+          <label for="detailed_information">[% loc('Extra details') %]</label>
+        [% IF max_detailed_info_length %]
+          <span id="detailed_information_length">
+              [% tprintf(loc('%d characters maximum'), max_detailed_info_length) %]
+          </span>
+        [% END %]
           <textarea rows="2" name="detailed_information" id="detailed_information" class="form-control"
-            [% IF max_detailed_info_length %]data-max-length="[% max_detailed_info_length %]" placeholder="[% tprintf(loc('%d characters maximum'), max_detailed_info_length) %]"[% END %]>[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
+            [% IF max_detailed_info_length %]data-max-length="[% max_detailed_info_length %]"[% END %]>[% problem.get_extra_metadata('detailed_information') | html %]</textarea>
         </p>
         [% END %]
 
diff --git a/templates/web/base/report/_main.html b/templates/web/base/report/_main.html
index 25bbd4c33..fe0fe74d5 100644
--- a/templates/web/base/report/_main.html
+++ b/templates/web/base/report/_main.html
@@ -106,8 +106,8 @@
             </label>
         </p>
         <p>
-            <label for="moderation_reason">[% loc('Moderation reason:') %]</label>
-            <input type="text" class="form-control" name="moderation_reason" placeholder="[% loc('Describe why you are moderating this') %]">
+            <label for="moderation_reason">[% loc('Describe why you are moderating this') %]</label>
+            <input type="text" class="form-control" name="moderation_reason">
         </p>
         <p>
             <input type="submit" class="green-btn" value="[% loc('Save changes') %]">
diff --git a/templates/web/base/report/display_tools.html b/templates/web/base/report/display_tools.html
index e0d8e3f99..eaf45fdf3 100644
--- a/templates/web/base/report/display_tools.html
+++ b/templates/web/base/report/display_tools.html
@@ -43,10 +43,10 @@
         </a>
         [% loc('Receive email when updates are left on this problem.' ) %]</p>
         <fieldset>
-        <label class="hidden n" for="alert_rznvy">[% loc('Your email') %]</label>
+        <label for="alert_rznvy">[% loc('Your email') %]</label>
         <div class="form-txt-submit-box">
           [% IF NOT c.user_exists %]
-            <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30" placeholder="[% loc('Your email') %]">
+            <input type="email" class="form-control" name="rznvy" id="alert_rznvy" value="[% email | html %]" size="30">
           [% END %]
             <input class="green-btn" type="submit" value="[% loc('Subscribe') %]">
         </div>
diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html
index d6efac423..9526b677c 100644
--- a/templates/web/base/report/new/form_report.html
+++ b/templates/web/base/report/new/form_report.html
@@ -49,12 +49,13 @@
 [% TRY %][% PROCESS 'report/new/after_photo.html' %][% CATCH file %][% END %]
 
     [% DEFAULT form_detail_label = loc('Explain what’s wrong') %]
+    [% DEFAULT form_detail_placeholder = loc('e.g. ‘This pothole has been here for two months and…’') %]
     <label for="form_detail">[% form_detail_label %]</label>
+    <p class="form-hint" id="detail-hint">[% form_detail_placeholder %]</p>
 [% IF field_errors.detail %]
     <p class='form-error'>[% field_errors.detail %]</p>
 [% END %]
-    [% DEFAULT form_detail_placeholder = loc('This pothole has been here for two months and…') %]
-    <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% form_detail_placeholder %]" required>[% report.detail | html %]</textarea>
+    <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" aria-describedby="detail-hint" required>[% report.detail | html %]</textarea>
 
 [% TRY %][% PROCESS 'report/new/inline-tips.html' %][% CATCH file %][% END %]
 
diff --git a/templates/web/base/report/new/form_title.html b/templates/web/base/report/new/form_title.html
index 88996fd3f..b436092d8 100644
--- a/templates/web/base/report/new/form_title.html
+++ b/templates/web/base/report/new/form_title.html
@@ -1,7 +1,8 @@
 [% DEFAULT form_title = loc('Summarise the problem') %]
+[% DEFAULT form_title_placeholder = loc('e.g. ‘10 inch pothole on Example St, near post box’') %]
 <label for="form_title">[% form_title %]</label>
+<p class="form-hint" id="title-hint">[% form_title_placeholder %]</p>
 [% IF field_errors.title %]
     <p class='form-error'>[% field_errors.title %]</p>
 [% END %]
-[% DEFAULT form_title_placeholder = loc('10 inch pothole on Example St, near post box') %]
-<input class="form-control" type="text" value="[% report.title | html %]" name="title" id="form_title" placeholder="[% form_title_placeholder %]" required>
+<input class="form-control" type="text" value="[% report.title | html %]" name="title" id="form_title" aria-describedby="title-hint" required>
diff --git a/templates/web/base/report/new/form_user_loggedout_by_email.html b/templates/web/base/report/new/form_user_loggedout_by_email.html
index 7bf1f5fdd..7ede54cd1 100644
--- a/templates/web/base/report/new/form_user_loggedout_by_email.html
+++ b/templates/web/base/report/new/form_user_loggedout_by_email.html
@@ -25,12 +25,12 @@
   [% IF field_errors.password_register %]
     <p class='form-error'>[% field_errors.password_register %]</p>
   [% END %]
-    <div class="general-notes form-focus-hidden">
+    <div class="general-notes form-focus-hidden" id="password_register_hint">
         <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
     </div>
 
     <div class="form-txt-submit-box form-focus-hidden">
-        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" aria-describedby="password_register_hint" value="">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
     </div>
 
diff --git a/templates/web/base/report/new/form_user_loggedout_password.html b/templates/web/base/report/new/form_user_loggedout_password.html
index a4d1aefe0..16b6fdaad 100644
--- a/templates/web/base/report/new/form_user_loggedout_password.html
+++ b/templates/web/base/report/new/form_user_loggedout_password.html
@@ -2,12 +2,12 @@
 
     <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
 
-    <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+    <label for="password_sign_in">[% loc('Your password') %]</label>
     [% IF field_errors.password %]
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value="">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]">
     </div>
 
diff --git a/templates/web/base/report/update.html b/templates/web/base/report/update.html
index de8699802..4a2642c9a 100644
--- a/templates/web/base/report/update.html
+++ b/templates/web/base/report/update.html
@@ -47,9 +47,8 @@
             </div>
             [% IF permissions.moderate %]
                 <div class="moderate-edit">
-                    <label for="moderation_reason">[% loc('Moderation reason:') %]</label>
-                    <input type="text" class="form-control" name="moderation_reason"
-                        placeholder="[% loc('Describe why you are moderating this') %]">
+                    <label for="moderation_reason">[% loc('Describe why you are moderating this') %]</label>
+                    <input type="text" class="form-control" name="moderation_reason">
                     <input type="submit" class="green-btn" value="[% loc('Save changes') %]">
                     <input type="button" class="btn cancel" value="[% loc('Discard changes') %]">
                 </div>
diff --git a/templates/web/base/report/update/form_name.html b/templates/web/base/report/update/form_name.html
index 218ce4149..fa6595d74 100644
--- a/templates/web/base/report/update/form_name.html
+++ b/templates/web/base/report/update/form_name.html
@@ -24,13 +24,13 @@
     <input class="form-control" name="username" id="form_username" type="text" value="[% c.user.email | html %]">
   [% END %]
 
-<label for="form_name">[% loc('Name') %]</label>
+<label for="form_name">[% loc('Your name') %]</label>
 [% IF field_errors.name %]
     <p class='form-error'>[% field_errors.name %]</p>
 [% END %]
 
 <input type="text" class="form-control validNameU js-form-name"
-    name="name" id="form_name" value="[% update.name || c.user.name | html %]" placeholder="[% loc('Your name') %]">
+    name="name" id="form_name" value="[% update.name || c.user.name | html %]">
 
 [% INCLUDE 'report/_show_name_label.html' %]
 
diff --git a/templates/web/base/report/update/form_update.html b/templates/web/base/report/update/form_update.html
index 06104c9e9..ed5b83355 100644
--- a/templates/web/base/report/update/form_update.html
+++ b/templates/web/base/report/update/form_update.html
@@ -33,7 +33,7 @@
 [% IF field_errors.update %]
     <div class='form-error'>[% field_errors.update %]</div>
 [% END %]
-<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea>
+<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" required>[% update.text | html %]</textarea>
 
 [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %]
     <label for="state">[% loc( 'State' ) %]</label>
diff --git a/templates/web/base/report/update/form_user_loggedout_by_email.html b/templates/web/base/report/update/form_user_loggedout_by_email.html
index d038cdb23..63e6e3e4f 100644
--- a/templates/web/base/report/update/form_user_loggedout_by_email.html
+++ b/templates/web/base/report/update/form_user_loggedout_by_email.html
@@ -12,12 +12,12 @@
     <p class='form-error'>[% field_errors.password_register %]</p>
   [% END %]
 
-    <div class="general-notes">
+    <div class="general-notes" id="password_register_hint">
         <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
     </div>
 
     <div class="form-txt-submit-box">
-        <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" aria-describedby="password_register_hint">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/base/report/update/form_user_loggedout_password.html b/templates/web/base/report/update/form_user_loggedout_password.html
index d24f8bd15..c68163fa7 100644
--- a/templates/web/base/report/update/form_user_loggedout_password.html
+++ b/templates/web/base/report/update/form_user_loggedout_password.html
@@ -1,12 +1,12 @@
 <div id="form_sign_in_yes" class="form-box">
     <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5>
 
-    <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+    <label for="password_sign_in">[% loc('Your password') %]</label>
     [% IF field_errors.password %]
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+        <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/borsetshire/around/postcode_form.html b/templates/web/borsetshire/around/postcode_form.html
index bda1c1f1d..0126d8cac 100644
--- a/templates/web/borsetshire/around/postcode_form.html
+++ b/templates/web/borsetshire/around/postcode_form.html
@@ -17,9 +17,10 @@
 
         <form action="[% c.uri_for('/around') %]" method="get" name="postcodeForm" id="postcodeForm">
             <label for="pc">[% question %]:</label>
+            <p class="form-hint" id="pc-hint">[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]</p>
             <div>
                 <input type="hidden" name="pc" value="[% c.cobrand.problems.first.postcode | html %]">
-                <input type="text" name="_pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" placeholder="[% tprintf(loc('e.g. ‘%s’ or ‘%s’'), c.cobrand.example_places) %]" required>
+                <input type="text" name="_pc" value="[% pc | html %]" id="pc" size="10" maxlength="200" aria-describedby="pc-hint" required>
                 <input type="submit" value="[% loc('Go') %]" id="sub">
             </div>
 
diff --git a/templates/web/bromley/report/new/form_user_loggedout_by_email.html b/templates/web/bromley/report/new/form_user_loggedout_by_email.html
index 7e33a5a89..7613ca339 100644
--- a/templates/web/bromley/report/new/form_user_loggedout_by_email.html
+++ b/templates/web/bromley/report/new/form_user_loggedout_by_email.html
@@ -21,12 +21,12 @@
   [% IF field_errors.password_register %]
     <p class='form-error'>[% field_errors.password_register %]</p>
   [% END %]
-    <div class="general-notes form-focus-hidden">
+    <div class="general-notes form-focus-hidden" id="password_register_hint">
         <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report future problems, leave updates and manage your reports.') %]</p>
     </div>
 
     <div class="form-txt-submit-box form-focus-hidden">
-        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" aria-describedby="password_register_hint">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
     </div>
 
diff --git a/templates/web/bromley/report/new/form_user_loggedout_password.html b/templates/web/bromley/report/new/form_user_loggedout_password.html
index a4255f647..900fc5d9d 100644
--- a/templates/web/bromley/report/new/form_user_loggedout_password.html
+++ b/templates/web/bromley/report/new/form_user_loggedout_password.html
@@ -2,12 +2,12 @@
 
     <h5>Confirm my report with my FixMyStreet password</h5>
 
-    <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+    <label for="password_sign_in">[% loc('Your password') %]</label>
     [% IF field_errors.password %]
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value="">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]">
     </div>
 
diff --git a/templates/web/bromley/report/new/form_user_name.html b/templates/web/bromley/report/new/form_user_name.html
index 8102c0ea7..26dd235f3 100644
--- a/templates/web/bromley/report/new/form_user_name.html
+++ b/templates/web/bromley/report/new/form_user_name.html
@@ -3,10 +3,10 @@
 [% IF field_errors.first_name %]
     <p class='form-error'>[% field_errors.first_name %]</p>
 [% END %]
-<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( first_name || names.first ) | html %]" name="first_name" id="form_first_name" placeholder="[% loc('Your first name') %]">
+<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( first_name || names.first ) | html %]" name="first_name" id="form_first_name">
 
 <label for="form_last_name">[% loc('Last Name') %]</label>
 [% IF field_errors.last_name %]
     <p class='form-error'>[% field_errors.last_name %]</p>
 [% END %]
-<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( last_name || names.last ) | html %]" name="last_name" id="form_last_name" placeholder="[% loc('Your last name') %]">
+<input class="form-control js-form-name [% extra_class %]" type="text" value="[% ( last_name || names.last ) | html %]" name="last_name" id="form_last_name">
diff --git a/templates/web/bromley/report/update/form_name.html b/templates/web/bromley/report/update/form_name.html
index a33d144bd..07166a431 100644
--- a/templates/web/bromley/report/update/form_name.html
+++ b/templates/web/bromley/report/update/form_name.html
@@ -10,13 +10,13 @@
 [% IF field_errors.first_name %]
     <p class='form-error'>[% field_errors.first_name %]</p>
 [% END %]
-<input class="js-form-name form-control" type="text" value="[% names.first || first_name | html %]" name="first_name" id="form_first_name" placeholder="[% loc('Your first name') %]">
+<input class="js-form-name form-control" type="text" value="[% names.first || first_name | html %]" name="first_name" id="form_first_name">
 
 <label for="form_last_name">[% loc('Last Name') %]</label>
 [% IF field_errors.last_name %]
     <p class='form-error'>[% field_errors.last_name %]</p>
 [% END %]
-<input class="js-form-name form-control" type="text" value="[% names.last || last_name | html %]" name="last_name" id="form_last_name" placeholder="[% loc('Your last name') %]">
+<input class="js-form-name form-control" type="text" value="[% names.last || last_name | html %]" name="last_name" id="form_last_name">
 
 <div class="checkbox-group">
     <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF name_public %]>
diff --git a/templates/web/bromley/report/update/form_update.html b/templates/web/bromley/report/update/form_update.html
index 06d7c455e..190993a0f 100644
--- a/templates/web/bromley/report/update/form_update.html
+++ b/templates/web/bromley/report/update/form_update.html
@@ -43,7 +43,7 @@
 [% IF field_errors.update %]
     <div class='form-error'>[% field_errors.update %]</div>
 [% END %]
-<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" placeholder="[% loc('Please write your update here') %]" required>[% update.text | html %]</textarea>
+<textarea rows="7" cols="30" name="update" class="form-control" id="form_update" required>[% update.text | html %]</textarea>
 
 [% IF c.user && c.user.belongs_to_body( problem.bodies_str ) %]
     <label for="state">[% loc( 'State' ) %]</label>
diff --git a/templates/web/bromley/report/update/form_user_loggedout_by_email.html b/templates/web/bromley/report/update/form_user_loggedout_by_email.html
index 393d8e4cc..b70749d87 100644
--- a/templates/web/bromley/report/update/form_user_loggedout_by_email.html
+++ b/templates/web/bromley/report/update/form_user_loggedout_by_email.html
@@ -7,12 +7,12 @@
   [% IF field_errors.password_register %]
     <p class='form-error'>[% field_errors.password_register %]</p>
   [% END %]
-    <div class="general-notes">
+    <div class="general-notes" id="password_register_hint">
         <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report future problems, leave updates and manage your reports.') %]</p>
     </div>
 
     <div class="form-txt-submit-box">
-        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+        <input class="form-control js-password-validate" type="password" name="password_register" id="password_register" value="" aria-describedby="password_register_hint">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/bromley/report/update/form_user_loggedout_email.html b/templates/web/bromley/report/update/form_user_loggedout_email.html
index 228ca7509..f088bd63d 100644
--- a/templates/web/bromley/report/update/form_user_loggedout_email.html
+++ b/templates/web/bromley/report/update/form_user_loggedout_email.html
@@ -5,4 +5,4 @@
 [% IF field_errors.username %]
     <p class='form-error'>[% field_errors.username %]</p>
 [% END %]
-<input class="form-control" type="email" name="username" id="form_username" value="[% update.user.email | html %]" placeholder="[% loc('Your email address' ) %]" required>
+<input class="form-control" type="email" name="username" id="form_username" value="[% update.user.email | html %]" required>
diff --git a/templates/web/bromley/report/update/form_user_loggedout_password.html b/templates/web/bromley/report/update/form_user_loggedout_password.html
index 3b7adb84e..c18b45ff0 100644
--- a/templates/web/bromley/report/update/form_user_loggedout_password.html
+++ b/templates/web/bromley/report/update/form_user_loggedout_password.html
@@ -2,12 +2,12 @@
 
     <h5>Confirm my report with my FixMyStreet password</h5>
 
-    <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label>
+    <label for="password_sign_in">[% loc('Your password') %]</label>
     [% IF field_errors.password %]
         <p class='form-error'>[% field_errors.password %]</p>
     [% END %]
     <div class="form-txt-submit-box">
-        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+        <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value="">
         <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Post') %]">
     </div>
 
diff --git a/templates/web/fixamingata/report/new/form_user_loggedout.html b/templates/web/fixamingata/report/new/form_user_loggedout.html
index dd6ecf1e7..cc869e2be 100644
--- a/templates/web/fixamingata/report/new/form_user_loggedout.html
+++ b/templates/web/fixamingata/report/new/form_user_loggedout.html
@@ -2,7 +2,7 @@
 [% IF field_errors.username %]
     <p class='form-error'>[% field_errors.username %]</p>
 [% END %]
-<input type="email" class="form-control" value="[% report.user.email | html %]" name="username" id="form_username" placeholder="[% loc('Please enter your email address') %]" required>
+<input type="email" class="form-control" value="[% report.user.email | html %]" name="username" id="form_username" required>
 
 <div id="form_sign_in">
     <h3>[% loc("Now to submit your report&hellip;") %]</h3>
@@ -18,7 +18,7 @@
             <p class='form-error'>[% field_errors.name %]</p>
         [% END %]
 
-        <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+        <input type="text" class="form-control form-focus-trigger validName js-form-name" value="[% report.name | html %]" name="name" id="form_name">
 
         [%# if there is nothing in the name field then set check box as default on form %]
         <div class="checkbox-group">
@@ -27,7 +27,7 @@
         </div>
 
         <label for="form_phone">[% loc('Phone number (optional)') %]</label>
-        <input type="text" class="form-control" value="[% report.user.phone_display | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]">
+        <input type="text" class="form-control" value="[% report.user.phone_display | html %]" name="phone" id="form_phone">
 
         <div class="general-notes form-focus-hidden">
             <p>Vi visar inte din e-postadress eller ditt telefonnummer publikt.</p>
@@ -38,12 +38,12 @@
         <p class='form-error'>[% field_errors.password_register %]</p>
       [% END %]
 
-        <div class="general-notes form-focus-hidden">
+        <div class="general-notes form-focus-hidden" id="password_register_hint">
             <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p>
         </div>
 
         <div class="form-txt-submit-box">
-            <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+            <input type="password" class="form-control js-password-validate" name="password_register" id="password_register" aria-describedby="password_register_hint" value="">
         <input class="green-btn js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]">
         </div>
 
@@ -62,7 +62,7 @@
             [% IF field_errors.password %]
                 <p class='form-error'>[% field_errors.password %]</p>
             [% END %]
-            <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value="">
+            <input type="password" class="form-control" name="password_sign_in" id="password_sign_in" value="">
             <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]">
         </div>
 
diff --git a/templates/web/zurich/auth/general.html b/templates/web/zurich/auth/general.html
index 555a72374..2b183b953 100644
--- a/templates/web/zurich/auth/general.html
+++ b/templates/web/zurich/auth/general.html
@@ -17,11 +17,11 @@
           [% ELSIF sign_in_error %]
             <div class="form-error">[% loc('There was a problem with your login information. If you cannot remember your password, or do not have one, please fill in the &lsquo;No&rsquo; section of the form.') %]</div>
           [% END %]
-            <input type="email" class="required email" id="username" name="username" value="[% username | html %]" placeholder="[% loc('Your email address') %]" autofocus>
+            <input type="email" class="required email" id="username" name="username" value="[% username | html %]" autofocus>
 
             <label for="password_sign_in">[% loc('Password (optional)') %]</label>
             <div class="form-txt-submit-box">
-                <input type="password" class="required" name="password_sign_in" id="password_sign_in" value="" placeholder="[% loc('Your password') %]">
+                <input type="password" class="required" name="password_sign_in" id="password_sign_in" value="">
                 <input class="green-btn" type="submit" name="sign_in_by_password" value="[% loc('Sign in') %]">
             </div>
 
@@ -45,21 +45,21 @@
           [% IF loc_username_error  %]
             <div class="form-error">[% loc_username_error %]</div>
           [% END %]
-            <input type="email" class="required email" id="username2" name="username" value="[% username | html %]" placeholder="[% loc('Your email address') %]">
+            <input type="email" class="required email" id="username2" name="username" value="[% username | html %]">
 
             <label for="name">[% loc('Name') %]</label>
-            <input type="text" class="required" name="name" value="" placeholder="[% loc('Your name') %]">
+            <input type="text" class="required" name="name" value="">
 
             <label for="password_register">[% loc('Password (optional)') %]</label>
           [% IF field_errors.password_register %]
             <p class='form-error'>[% field_errors.password_register %]</p>
           [% END %]
             <div class="form-txt-submit-box">
-                <input type="password" class="required js-password-validate" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]">
+                <input type="password" class="required js-password-validate" name="password_register" id="password_register" value="" aria-describedby="password_notes">
                 <input class="green-btn" type="submit" name="sign_in_by_code" value="Registrieren">
             </div>
 
-            <div class="general-notes">
+            <div class="general-notes" id="password_notes">
                 <p>[% tprintf(loc('Your password should include %d or more characters.'), c.cobrand.password_minimum_length) %]</p>
             </div>
 
diff --git a/templates/web/zurich/report/new/fill_in_details_form.html b/templates/web/zurich/report/new/fill_in_details_form.html
index fd21e0fff..6d75674c4 100644
--- a/templates/web/zurich/report/new/fill_in_details_form.html
+++ b/templates/web/zurich/report/new/fill_in_details_form.html
@@ -46,7 +46,7 @@
             [% IF field_errors.detail %]
                 <p class='form-error'>[% field_errors.detail %]</p>
             [% END %]
-            <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" placeholder="[% loc('Please fill in details of the problem.') %]" required>[% report.detail | html %]</textarea>
+            <textarea class="form-control" rows="7" cols="26" name="detail" id="form_detail" required>[% report.detail | html %]</textarea>
 
             [% PROCESS "report/new/category_wrapper.html" %]
 
@@ -54,19 +54,19 @@
                 [% IF field_errors.username %]
                     <p class='form-error'>[% field_errors.username %]</p>
                 [% END %]
-                <input class="form-control" type="email" value="[% report.user.email | html %]" name="username" id="form_username" placeholder="[% loc('Please enter your email address') %]" required>
+                <input class="form-control" type="email" value="[% report.user.email | html %]" name="username" id="form_username" required>
 
                 <label for="form_name">[% loc('Name') %] [% loc('(optional)') %]</label>
                 [% IF field_errors.name %]
                     <p class='form-error'>[% field_errors.name %]</p>
                 [% END %]
-                <input class="form-control js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]">
+                <input class="form-control js-form-name" type="text" value="[% report.name | html %]" name="name" id="form_name">
 
                 <label for="form_phone">[% loc('Phone number') %]</label>
                 [% IF field_errors.phone %]
                     <p class='form-error'>[% field_errors.phone %]</p>
                 [% END %]
-                <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]" required>
+                <input class="form-control" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" required>
 
                 <div class="form-txt-submit-box">
                     [%# class of submit_sign_in so name can be optional, name of submit_register so it doesn't try and sign us in %]
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 4af940039..4d7ff2c37 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -645,8 +645,15 @@ ul.error {
   }
 }
 
-#report-updates-data img {
+#report-updates-data {
+  img {
     float: $right;
+  }
+
+  // Avoid double margin between opening paragraph and label.
+  label {
+    margin-top: 0;
+  }
 }
 
 #report-share {
@@ -1736,6 +1743,16 @@ label .muted {
   font-weight: normal;
 }
 
+.form-hint {
+  color: #666;
+
+  // Reduce space between labels and their form-hints
+  label + &,
+  #front-main label + & {
+    margin-top: -0.5em;
+  }
+}
+
 .description_tips {
   @include clearfix;
 
@@ -1775,8 +1792,10 @@ label .muted {
   display: inline-block;
 }
 
-#problem_form > label:first-child {
-  margin-top: 0;
+#problem_form {
+  & > label:first-child {
+    margin-top: 0;
+  }
 }
 
 .extra-category-questions {
@@ -1813,6 +1832,7 @@ label .muted {
 
   #detailed_information_length {
     float: #{$right};
+    margin-top: 0.25em; // match the label next to it
     &.error {
       color: red;
     }
@@ -1927,6 +1947,9 @@ label .muted {
     label {
       margin:0;
     }
+    .form-hint {
+      margin-bottom: 0.5em;
+    }
     div {
       display:table;
       width:100%;