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

<div>
<a id="forms-text"></a>
<header class="content-header">
  <h1 class="title">
    Text
  </h1>
</header>
<p>
  Text 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="text-field1a" class="control-label">Text:</label>
            <div class="control-input">
              <input type="text" class="form-control" id="text-field1a" name="text_field1a" placeholder="Enter text" 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-text-field1a">Text:</label>
            <input type="text" class="form-control" id="inline-text-field1a" name="inline_text_field1a" placeholder="Enter text" 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="text-field1b" class="control-label">Text:</label>
            <div class="control-input">
              <input type="text" disabled="disabled" class="form-control" id="text-field1b" name="text_field1b" placeholder="Enter text" 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-text-field1b">Text:</label>
            <input type="text" disabled="disabled" class="form-control" id="inline-text-field1b" name="inline_text_field1b" placeholder="Enter text" 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="text-field1c" class="control-label">Text:</label>
            <div class="control-input">
              <input type="text" class="form-control" id="text-field1c" name="text_field1c" placeholder="Enter text" 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-text-field1g">Text:</label>
            <input type="text" class="form-control" id="inline-text-field1g" name="inline_text_field1c" placeholder="Enter text" value="">
          </div>
        </div>
      </form>
    </td>
  </tr>
  <tr>
    <td>
      Invalid Error Message
    </td>
    <td>
      class
    </td>
    <td>
      error
    </td>
    <td>
      <form role="form" class="form-horizontal">
        <div class="form-row">
          <div class="form-group invalid error">
            <label for="text-field1e" class="control-label">Text:</label>
            <div class="control-input">
              <input type="text" class="form-control" id="text-field1e" name="text_field1c" placeholder="Enter text" value="">

              <span class="error-message">Error message.</span>
            </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-text-field1c">Text:</label>
            <input type="text" class="form-control" id="inline-text-field1c" name="inline_text_field1c" placeholder="Enter text" 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="text-field1d" class="control-label">Text:</label>
            <div class="control-input">
              <input type="text" class="form-control" readonly="readonly" id="text-field1d" name="text_field1d" placeholder="Enter text" 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-text-field1d">Text:</label>
            <input type="text" class="form-control" readonly="readonly" id="inline-text-field1d" name="inline_text_field1d" placeholder="Enter text" 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;text&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 text&quot; value=&quot;&lt;!--
      Input control value goes here --&gt;&quot;&gt;
      &lt;/div&gt;
    </code>
  </pre>

  <h2>Example code for error message:</h2>
  <pre>
    <code>
      &lt;div class=&quot;form-group invalid error&quot;&gt;
        &lt;label for=&quot;text-field1c&quot;&gt;Text:&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;text-field1c&quot; name=&quot;text_field1c&quot; placeholder=&quot;Enter text&quot; value=&quot;&quot;&gt;

        &lt;span class=&quot;error-message&quot;&gt;Error message.&lt;/span&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>