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

<div>
  <a id="forms-telephone"></a>
  <header class="content-header">
    <h1 class="title">
      Telephone
    </h1>
  </header>

  <p>
    Telephone controls comprise of a surround and 4 styles, toggled by optional attributes and classes. The attribute should be added to all of the <code>&lt;input&gt;</code> tags, and classes should follow on from the surrounding <code>&lt;div&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <colgroup>
        <col width="10%"/>
        <col width="10%"/>
        <col width="15%"/>
        <col width="35%"/>
        <col width="30%"/>
    </colgroup>
    <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 formatted-telephone">
                <label for="telephone-field1a-country" class="control-label">Telephone:</label>
                <div class="control-input">
                  <input type="text" class="form-control formatted-telephone-country" id="telephone-field1a-country" name="telephone_field1a_country" placeholder="+44" value="">
                  <input type="text" class="form-control formatted-telephone-area" id="telephone-field1a-area" name="telephone_field1a_area" placeholder="121" value="">
                  <input type="text" class="form-control formatted-telephone-number" id="telephone-field1a-number" name="telephone_field1a_number" placeholder="123 4567" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group formatted-telephone">
                <label class="sr-only" for="inline-telephone-field1a-country">Telephone:</label>
                <input type="text" class="form-control formatted-telephone-country" id="inline-telephone-field1a-country" name="inline_telephone_field1a_country" placeholder="+44" value="">
                <input type="text" class="form-control formatted-telephone-area" id="inline-telephone-field1a-area" name="inline_telephone_field1a_area" placeholder="121" value="">
                <input type="text" class="form-control formatted-telephone-number" id="inline-telephone-field1a-number" name="inline_telephone_field1a_number" placeholder="123 4567" 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 formatted-telephone disabled">
                <label for="telephone-field1b-country" class="control-label">Telephone:</label>
                <div class="control-input">
                  <input type="text" disabled="disabled" class="form-control formatted-telephone-country" id="telephone-field1b-country" name="telephone_field1b_country" placeholder="+44" value="">
                  <input type="text" disabled="disabled" class="form-control formatted-telephone-area" id="telephone-field1b-area" name="telephone_field1b_area" placeholder="121" value="">
                  <input type="text" disabled="disabled" class="form-control formatted-telephone-number" id="telephone-field1b-number" name="telephone_field1b_number" placeholder="123 4567" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group formatted-telephone disabled">
                <label class="sr-only" for="inline-telephone-field1b-country">Telephone:</label>
                <input type="text" disabled="disabled" class="form-control formatted-telephone-country" id="inline-telephone-field1b-country" name="inline_telephone_field1b_country" placeholder="+44" value="">
                <input type="text" disabled="disabled" class="form-control formatted-telephone-area" id="inline-telephone-field1b-area" name="inline_telephone_field1b_area" placeholder="121" value="">
                <input type="text" disabled="disabled" class="form-control formatted-telephone-number" id="inline-telephone-field1b-number" name="inline_telephone_field1b_number" placeholder="123 4567" 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 formatted-telephone invalid">
                <label for="telephone-field1c-country" class="control-label">Telephone:</label>
                <div class="control-input">
                  <input type="text" class="form-control formatted-telephone-country" id="telephone-field1c-country" name="telephone_field1c_country" placeholder="+44" value="">
                  <input type="text" class="form-control formatted-telephone-area" id="telephone-field1c-area" name="telephone_field1c_area" placeholder="121" value="">
                  <input type="text" class="form-control formatted-telephone-number" id="telephone-field1c-number" name="telephone_field1c_number" placeholder="123 4567" value="">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group formatted-telephone invalid">
                <label class="sr-only" for="inline-telephone-field1c-country">Telephone:</label>
                <input type="text" class="form-control formatted-telephone-country" id="inline-telephone-field1c-country" name="inline_telephone_field1c_country" placeholder="+44" value="">
                <input type="text" class="form-control formatted-telephone-area" id="inline-telephone-field1c-area" name="inline_telephone_field1c_area" placeholder="121" value="">
                <input type="text" class="form-control formatted-telephone-number" id="inline-telephone-field1c-number" name="inline_telephone_field1c_number" placeholder="123 4567" 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 form-group-last formatted-telephone readonly">
                <label for="telephone-field1d-country" class="control-label">Telephone:</label>
                <div class="control-input">
                  <input type="text" class="form-control formatted-telephone-country" readonly="readonly" id="telephone-field1d-country" name="telephone_field1d_country" placeholder="+44" value="+44">
                  <input type="text" class="form-control formatted-telephone-area" readonly="readonly" id="telephone-field1d-area" name="telephone_field1d_area" placeholder="121" value="01234">
                  <input type="text" class="form-control formatted-telephone-number" readonly="readonly" id="telephone-field1d-number" name="telephone_field1d_number" placeholder="123 4567" value="555555">
                </div>
              </div>
            </div>
          </form>
        </td>
        <td>
          <form role="form" class="form-inline">
            <div class="form-row">
              <div class="form-group form-group-last formatted-telephone readonly">
                <label class="sr-only" for="inline-telephone-field1d-country">Telephone:</label>
                <input type="text" class="form-control formatted-telephone-country" readonly="readonly" id="inline-telephone-field1d-country" name="inline_telephone_field1d_country" placeholder="+44" value="+44">
                <input type="text" class="form-control formatted-telephone-area" readonly="readonly" id="inline-telephone-field1d-area" name="inline_telephone_field1d_area" placeholder="121" value="01234">
                <input type="text" class="form-control formatted-telephone-number" readonly="readonly" id="inline-telephone-field1d-number" name="inline_telephone_field1d_number" placeholder="123 4567" value="555555">
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
      &lt;div class=&quot;form-group formatted-telephone&quot;&gt;
        &lt;label for=&quot;&lt;!-- Country input control ID goes here --&gt;&quot;&gt;Telephone:&lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control formatted-telephone-country&quot; id=&quot;&lt;!-- Country input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Country input control name goes here --&gt;&quot; placeholder=&quot;+44&quot; value=&quot;&lt;!-- Country input control value goes here --&gt;&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control formatted-telephone-area&quot; id=&quot;&lt;!-- Area input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Area input control name goes here --&gt;&quot; placeholder=&quot;121&quot; value=&quot;&lt;!-- Area input control value goes here --&gt;&quot;&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control formatted-telephone-number&quot; id=&quot;&lt;!-- Number input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Number input control name goes here --&gt;&quot; placeholder=&quot;123 4567&quot; value=&quot;&lt;!-- Number input control value goes here --&gt;&quot;&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>