Merge pull request #3311 from lyubomir-popov/867-autocomplete

Add autocomplete and fix types in a few places

templates/_layouts/_header.html

@@ -25,7 +25,7 @@
       </ul>
       {% if path.startswith('/docs') %}
       <form class="p-search-box" action="/docs/search">
-        <input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation" required />
+        <input type="search" id="search-docs" class="p-search-box__input" name="q" {% if query %}value="{{ query }}"{% endif %} placeholder="Search the docs" title="Search the documentation" autocomplete="on" required />
         <button type="reset" id="search-docs-reset" class="p-search-box__reset u-no-margin--right" name="close"><i class="p-icon--close"></i></button>
         <button type="submit" class="p-search-box__button" name="submit"><i class="p-icon--search"></i></button>
       </form>

templates/docs/examples/base/forms/fieldset.html

@@ -7,11 +7,11 @@
 <form>
   <fieldset>
     <label for="list-input-1">First name</label>
-    <input placeholder="Joe" id="list-input-1" name="list-input-1" type="text">
+    <input placeholder="Joe" id="list-input-1" name="list-input-1" type="text" autocomplete="given-name">
     <label for="list-input-2">Last name</label>
-    <input placeholder="Bloggs" id="list-input-2" name="list-input-2" type="text">
+    <input placeholder="Bloggs" id="list-input-2" name="list-input-2" type="text" autocomplete="family-name">
     <label for="list-input-3">Email address</label>
-    <input placeholder="example@canonical.com" id="list-input-3" name="list-input-3" type="text">
+    <input placeholder="example@canonical.com" id="list-input-3" type="email" autocomplete="email">
   </fieldset>
 </form>
 {% endblock %}

templates/docs/examples/base/forms/form.html

@@ -6,13 +6,13 @@
 {% block content %}
 <form>
   <label for="exampleInputEmail1">Email address</label>
-  <input type="text" id="exampleInputEmail1" name="exampleInputEmail1" placeholder="example@canonical.com">
+  <input type="email" id="exampleInputEmail1" name="exampleInputEmail1" placeholder="example@canonical.com" autocomplete="email">
   <label for="exampleInputPassword1">Password</label>
-  <input type="password" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="******">
+  <input type="password" id="exampleInputPassword1" name="exampleInputPassword1" placeholder="******" autocomplete="current-password">
   <label for="exampleInputFile">File input</label>
   <input type="file" id="exampleInputFile" name="exampleInputFile">
   <input type="checkbox" id="CheckMe" name="CheckMe">
   <label for="CheckMe">I agree to receive information about Canonical’s products and services.</label>
-  <button type="submit">Submit</button>
+  <button type="submit" name="submit">Submit</button>
 </form>
 {% endblock %}

templates/docs/examples/base/forms/input.html

@@ -6,6 +6,6 @@
 {% block content %}
 <form>
   <label for="exampleTextInput">Email address</label>
-  <input type="text" id="exampleTextInput" name="exampleTextInput" placeholder="example@canonical.com" />
+  <input type="email" id="exampleTextInput" name="exampleTextInput"  placeholder="example@canonical.com" autocomplete="email"/>
 </form>
 {% endblock %}

templates/docs/examples/base/forms/labels.html

@@ -6,10 +6,10 @@
 {% block content %}
 <form>
   <label for="exampleTextInput">Email address</label>
-  <input type="text" id="exampleTextInput" name="exampleTextInput" placeholder="example@canonical.com" />
+  <input type="email" id="exampleTextInput" name="exampleTextInput" placeholder="example@canonical.com" autocomplete="email"/>
   <label for="textarea">Tell us about your project or interest</label>
-  <textarea id="textarea" name="textarea" rows="3">Ubuntu</textarea>
+  <textarea id="textarea" name="textarea" rows="3" name="textareaExample1">Ubuntu</textarea>
   <label for="textarea2">Data privay</label>
-  <textarea id="textarea2" name="textarea2" rows="3" readonly="readonly">Read-only</textarea>
+  <textarea id="textarea2" name="textarea2" rows="3" readonly="readonly" name="textareaExample2">Read-only</textarea>
 </form>
 {% endblock %}

templates/docs/examples/layouts/documentation.html

@@ -40,10 +40,9 @@
 <section id="search-docs" class="p-strip--light is-shallow">
   <div class="row">
     <form class="p-search-box u-no-margin--bottom">
-      <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" />
+      <input type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on"/>
       <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
-      <button type="submit" name="submitSearch" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
-
+      <button type="submit" class="p-search-box__button" name="submitSearch"><i class="p-icon--search">Search</i></button>
     </form>
   </div>
 </section>

templates/docs/examples/patterns/forms/_form-stacked.html

@@ -7,7 +7,7 @@
 
     <div class="col-8">
       <div class="p-form__control">
-        <input type="text" id="full-name-stacked" name="fullName" required>
+        <input type="text" id="full-name-stacked" name="fullName" autocomplete="name" required>
       </div>
     </div>
   </div>
@@ -19,7 +19,7 @@
 
     <div class="col-8">
       <div class="p-form__control">
-        <input type="text" id="username-stacked" name="username-stacked">
+        <input type="text" id="username-stacked" name="username-stacked" autocomplete="username">
         <p class="p-form-help-text">
           30 characters or fewer.
         </p>
@@ -34,7 +34,7 @@
 
     <div class="col-8">
       <div class="p-form__control">
-        <input type="text" id="username-stacked-error" name="username-stackederror" class="p-form-validation__input" aria-invalid="true"
+        <input type="text" id="username-stacked-error" class="p-form-validation__input" aria-invalid="true" name="username-stackederror" autocomplete="username"
           aria-describedby="username-error-message-stacked">
         <p class="p-form-validation__message" id="username-error-message-stacked" role="alert">
           <strong>Error:</strong> This field is required.
@@ -50,25 +50,25 @@
 
     <div class="col-8">
       <div class="p-form__control">
-        <input type="text" id="address-optional-stacked" name="address-optional-stacked">
+        <input type="text" id="address-optional-stacked" name="address-optional-stacked" autocomplete="address-line1">
       </div>
     </div>
   </div>
   <div class="p-form__group row">
 
     <div class="col-4">
-      <label for="address-optional-stacked" class="p-form__label">Address line 2</label>
+      <label for="address-optional-stacked" class="p-form__label" autocomplete="address-line2">Address line 2</label>
     </div>
 
     <div class="col-8">
       <div class="p-form__control">
-        <input type="text" id="address-optional-stacked" name="address-optional-stacked">
+        <input type="text" id="address-optional-stacked" name="address-optional-stacked" autocomplete="address-line3">
       </div>
     </div>
   </div>
   <div class="row">
     <div class="col-12">
-      <button class="p-button--positive u-float-right">Add details</button>
+      <button class="p-button--positive u-float-right" name="add-details">Add details</button>
     </div>
   </div>
 </form>

templates/docs/examples/patterns/forms/dense.html

@@ -6,9 +6,9 @@
 {% block content %}
 <form>
   <label for="username">Username</label>
-  <input type="text" id="username" name="username" class="is-dense" required>
-  <label for="address2">Email address</label>
-  <input type="text" id="address2" name="address2" class="is-dense" required>
+  <input type="text" id="username" class="is-dense" name="username" autocomplete="username" required>
+  <label for="email">Email</label>
+  <input type="text" id="email" class="is-dense" name="email" autocomplete="email" required>
   <label for="exampleSelect">Ubuntu releases</label>
   <select name="exampleSelect" id="exampleSelect" name="exampleSelect" class="is-dense">
     <option value="" disabled="disabled" selected>Select an option</option>

templates/docs/examples/patterns/forms/form-help-text.html

@@ -6,7 +6,7 @@
 {% block content %}
 <form>
   <label for="exampleTextInputHelp">Email address</label>
-  <input class="p-form-validation__input" type="text" id="exampleTextInputHelp" name="exampleTextInputHelp" placeholder="example@canonical.com" />
+  <input class="p-form-validation__input" type="email" id="exampleTextInputHelp" placeholder="example@canonical.com" name="exampleTextInputHelp" autocomplete="email"/>
   <p class="p-form-help-text">
     A notification email will be sent to entered email address.
   </p>

templates/docs/examples/patterns/forms/form-inline.html

@@ -8,7 +8,7 @@
   <div class="p-form__group">
     <label for="username-inline" class="p-form__label">Username</label>
     <div class="p-form__control u-clearfix">
-      <input type="text" id="username-inline" name="username-inline" class="p-form__control" required>
+      <input type="text" id="username-inline" class="p-form__control" name="username-inline" autocomplete="username" required>
       <p class="p-form-help-text">
         30 characters or fewer.
       </p>
@@ -17,7 +17,7 @@
   <div class="p-form__group p-form-validation is-error">
     <label for="address-inline2" class="p-form__label">Email address</label>
     <div class="p-form__control u-clearfix">
-      <input type="text" id="address-inline2" name="address-inline2" class="p-form-validation__input" required aria-invalid="true" aria-describedby="input-error-message-inline">
+      <input type="email" id="email" class="p-form-validation__input" required aria-invalid="true" aria-describedby="input-error-message-inline" name="address-inline2" autocomplete="email">
       <p class="p-form-validation__message" id="input-error-message-inline" role="alert">
         <strong>Error:</strong> Please enter a valid email address.
       </p>

templates/docs/examples/patterns/forms/form-validation.html

@@ -7,23 +7,23 @@
 <form>
   <div class="p-form-validation is-error">
     <label for="exampleTextInputError">Email address</label>
-    <input class="p-form-validation__input" type="text" id="exampleTextInputError" name="exampleTextInputError" placeholder="example@canonical.com" />
+    <input class="p-form-validation__input" type="email" id="exampleTextInputError" placeholder="example@canonical.com" name="exampleTextInputError" autocomplete="email" />
     <p class="p-form-validation__message">
       <strong>Error:</strong> This field is required.
     </p>
   </div>
 
   <div class="p-form-validation is-caution">
     <label for="exampleTextInputCaution">Mail configuration ID</label>
-    <input class="p-form-validation__input" type="text" id="exampleTextInputCaution" name="exampleTextInputCaution" placeholder="14" />
+    <input class="p-form-validation__input" type="text" id="exampleTextInputCaution" placeholder="14" name="exampleTextInputCaution" autocomplete="on"/>
     <p class="p-form-validation__message">
       <strong>Caution:</strong> No validation is performed in preview mode.
     </p>
   </div>
 
   <div class="p-form-validation is-success">
     <label for="exampleTextInputSuccess">Card number</label>
-    <input class="p-form-validation__input" type="text" id="exampleTextInputSuccess" name="exampleTextInputSuccess" placeholder="**** **** **** ****" />
+    <input class="p-form-validation__input" type="text" id="exampleTextInputSuccess" placeholder="**** **** **** ****" name="exampleTextInputSuccess" autocomplete="off"/>
     <p class="p-form-validation__message">
       <strong>Success:</strong> Verified.
     </p>

templates/docs/examples/patterns/forms/forms-required.html

@@ -7,7 +7,7 @@
 <form>
   <div class="p-form-validation is-error">
     <label for="exampleTextInputError" class="is-required">Email address</label>
-    <input class="p-form-validation__input" required type="text" id="exampleTextInputError" name="exampleTextInputError" placeholder="e.g joe@bloggs.com">
+    <input class="p-form-validation__input" required type="email" id="exampleTextInputError" placeholder="e.g joe@bloggs.com" name="exampleTextInputError" autocomplete="email">
     <p class="p-form-validation__message">
       <strong>Error:</strong> This field is required.
     </p>

templates/docs/examples/patterns/forms/tick-comparison.html

@@ -110,7 +110,7 @@ <h3>.p-checkbox component</h3>
 </div>
 
 <div class="u-fixed-width">
-  <input class="p-button--positive" type="submit" value="Submit" />
+  <input class="p-button--positive" type="submit" value="Submit" name="submit"/>
 </div>
 
 <div class="row">

templates/docs/examples/patterns/search-box/default-dark.html

@@ -5,12 +5,12 @@
 
 {% block content %}
 <form class="p-search-box is-dark">
-  <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required>
+  <input type="search" class="p-search-box__input" placeholder="Search" name="search" autocomplete="on" required>
   <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
   <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
 </form>
 <form class="p-search-box is-dark">
-  <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required disabled>
+  <input type="search" class="p-search-box__input" name="search" placeholder="Search" autocomplete="on" required disabled>
   <button type="reset" class="p-search-box__reset" disabled><i class="p-icon--close"></i></button>
   <button type="submit" class="p-search-box__button" disabled><i class="p-icon--search"></i></button>
 </form>

templates/docs/examples/patterns/search-box/default.html

@@ -5,12 +5,12 @@
 
 {% block content %}
 <form class="p-search-box">
-  <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required>
+  <input type="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on">
   <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
   <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
 </form>
 <form class="p-search-box">
-  <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required disabled>
+  <input type="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on" disabled>
   <button type="reset" class="p-search-box__reset" disabled><i class="p-icon--close"></i></button>
   <button type="submit" class="p-search-box__button" disabled><i class="p-icon--search"></i></button>
 </form>

templates/docs/examples/patterns/search-box/navigation-dark.html

@@ -27,7 +27,7 @@
         <li class="p-navigation__item"><a class="p-navigation__link" href="#">Partners</a></li>
       </ul>
       <form class="p-search-box is-dark">
-        <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required>
+        <input type="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on">
         <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
         <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
       </form>

templates/docs/examples/patterns/search-box/navigation.html

@@ -27,7 +27,7 @@
         <li class="p-navigation__item"><a class="p-navigation__link" href="#">Partners</a></li>
       </ul>
       <form class="p-search-box">
-        <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required>
+        <input aria-label="search" type="search" class="p-search-box__input" placeholder="Search" name="search" autocomplete="on" required>
         <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
         <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
       </form>

templates/docs/examples/templates/maas-docs-grid.html

@@ -45,7 +45,7 @@
 <section id="search-docs" class="p-strip--image is-shallow" style="background-image: url('https://assets.ubuntu.com/v1/e54487e2-maas-docs-suru.png')">
   <div class="row">
     <form class="p-search-box u-no-margin--bottom">
-      <input aria-label="search" type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" />
+      <input aria-label="search" type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on">
       <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
       <button type="submit" name="submitSearch" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
 

templates/docs/examples/templates/maas-docs.html

@@ -122,7 +122,7 @@
   <section id="search-docs" class="p-strip--image is-shallow" style="background-image: url('https://assets.ubuntu.com/v1/e54487e2-maas-docs-suru.png')">
     <div class="row">
       <form class="p-search-box u-no-margin--bottom">
-        <input aria-label="search" type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="">
+        <input aria-label="search" type="search" class="p-search-box__input" name="q" placeholder="Search documentation" required="" autocomplete="on">
         <button type="reset" class="p-search-box__reset" name="close"><i class="p-icon--close">Close</i></button>
         <button type="submit" name="submitSearch" class="p-search-box__button"><i class="p-icon--search">Search</i></button>
 

templates/docs/examples/templates/maas-layout.html

@@ -121,7 +121,7 @@ <h4 class="u-sv-1">Filter by</h4>
     </div>
     <div class="col-9">
       <form class="p-search-box">
-        <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required>
+        <input aria-label="search" type="search" class="p-search-box__input" name="search" placeholder="Search" required autocomplete="on">
         <button type="reset" class="p-search-box__reset"><i class="p-icon--close"></i></button>
         <button type="submit" class="p-search-box__button"><i class="p-icon--search"></i></button>
       </form>

templates/docs/examples/templates/tick-element-comparison.html

@@ -38,7 +38,7 @@
       </div>
       <div class="col-3">
         <form>
-          <input type="text" placeholder="Enter email">
+          <input name="email" type="email" placeholder="Enter email" autocomplete="email">
           <select name="" id=""></select>
         </form>
       </div>