causeway-standard-theme/causeway/docs/components/form-fields/password-input.html

<div>
  <a id="forms-password"></a>
  <header class="content-header">
    <h1 class="title">
      Password
    </h1>
  </header>

  <p>
    Password controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to the <code>&lt;input&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
          Standard Example
        </th>
        <th>
          Inline Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="5">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <label for="password-field1a" class="control-label">Password:</label>
                <div class="control-input">
                  <input type="password" class="form-control" id="password-field1a" name="password_field1a" placeholder="Enter password" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group">
                <label class="sr-only" for="inline-password-field1a">Password:</label>
                <input type="password" class="form-control" id="inline-password-field1a" name="inline_password_field1a" placeholder="Enter password" value="">
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group disabled">
                <label for="password-field1b" class="control-label">Password:</label>
                <div class="control-input">
                  <input type="password" disabled="disabled" class="form-control" id="password-field1b" name="password_field1b" placeholder="Enter password" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group disabled">
                <label class="sr-only" for="inline-password-field1b">Password:</label>
                <input type="password" disabled="disabled" class="form-control" id="inline-password-field1b" name="inline_password_field1b" placeholder="Enter password" value="">
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group invalid">
                <label for="password-field1c" class="control-label">Password:</label>
                <div class="control-input">
                  <input type="password" class="form-control" id="password-field1c" name="password_field1c" placeholder="Enter password" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group invalid">
                <label class="sr-only" for="inline-password-field1c">Password:</label>
                <input type="password" class="form-control" id="inline-password-field1c" name="inline_password_field1c" placeholder="Enter password" value="">
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Read Only
        </td>
        <td>
          class
          <br/><br/>
          readonly
        </td>
        <td>
          readonly
          <br/><br/>
          readonly
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group readonly">
                <label for="password-field1d" class="control-label">Password:</label>
                <div class="control-input">
                  <input type="password" class="form-control" readonly="readonly" id="password-field1d" name="password_field1d" placeholder="Enter password" value="example">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group readonly">
                <label class="sr-only" for="inline-password-field1d">Password:</label>
                <input type="password" class="form-control" readonly="readonly" id="inline-password-field1d" name="inline_password_field1d" placeholder="Enter password" value="example">
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
      &lt;div class=&quot;form-group&quot;&gt;
        &lt;label for=&quot;&lt;!-- Input control ID goes here --&gt;&quot;&gt;&lt;!-- Label text goes here --&gt;:&lt;/label&gt;
        &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;&lt;!-- Input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Input control name goes here --&gt;&quot; placeholder=&quot;Enter password&quot; value=&quot;&quot;&gt;
      &lt;/div&gt;
    </code>
  </pre>

  <p>
    For security reasons the password field should never have the value attribute populated. The only potential exception would be if the control is set to be read only in which case a string containing a number of asterisks would be appropriate eg: "********".
  </p>
</div>