chrome/browser/resources/options/chromeos/keyboard_overlay.html

<div id="keyboard-overlay" class="page" hidden>
  <div class="close-button"></div>
  <h1 i18n-content="keyboardOverlay"></h1>
  <div class="content-area">
    <table class="option-control-table">
       <tr>
         <td class="option-name" id="remap-search-key-to-label"
             i18n-content="remapSearchKeyToContent">
         </td>
         <td class="option-value">
           <select class="control"
               data-type="number" i18n-options="remapSearchKeyToValue"
               metric="Options_KeyboardRemapSearchKey"
               pref="settings.language.xkb_remap_search_key_to"
               aria-labelledby="remap-search-key-to-label" dialog-pref>
           </select>
         </td>
       </tr>
       <tr>
         <td class="option-name" id="remap-control-key-to-label"
             i18n-content="remapControlKeyToContent">
         </td>
         <td class="option-value">
           <select class="control"
               data-type="number" i18n-options="remapControlKeyToValue"
               metric="Options_KeyboardRemapControlKey"
               pref="settings.language.xkb_remap_control_key_to"
               aria-labelledby="remap-control-key-to-label" dialog-pref>
           </select>
         </td>
       </tr>
       <tr>
         <td class="option-name" id="remap-alt-key-to-label"
             i18n-content="remapAltKeyToContent">
         </td>
         <td class="option-value">
           <select class="control" data-type="number"
               metric="Options_KeyboardRemapAltKey"
               pref="settings.language.xkb_remap_alt_key_to"
               i18n-options="remapAltKeyToValue"
               aria-labelledby="remap-alt-key-to-label" dialog-pref></select>
         </td>
       </tr>
       <!-- The caps lock section is hidden by default. This is only visible
            when --has-chromeos-keyboard flag is not passed. -->
       <tr id="caps-lock-remapping-section" hidden>
         <td class="option-name" id="remap-caps-lock-key-to-label"
               i18n-content="remapCapsLockKeyToContent">
         </td>
         <td class="option-value">
           <select class="control"
               data-type="number"
               metric="Options_KeyboardRemapCapsLockKey"
               pref="settings.language.remap_caps_lock_key_to"
               i18n-options="remapCapsLockKeyToValue"
               aria-labelledby="remap-caps-lock-key-to-label" dialog-pref>
           </select>
         </td>
       </tr>
       <!-- The diamond key section is hidden by default. This is only visible
            when --has-chromeos-diamond-key flag is passed. -->
       <tr id="diamond-key-remapping-section" hidden>
         <td class="option-name" id="remap-diamond-key-to-label"
             i18n-content="remapDiamondKeyToContent">
         </td>
         <td class="option-value">
           <select class="control"
               data-type="number"
               metric="Options_KeyboardRemapDiamondKey"
               pref="settings.language.remap_diamond_key_to"
               i18n-options="remapDiamondKeyToValue"
               aria-labelledby="remap-diamond-key-to-label" dialog-pref>
           </select>
         </td>
       </tr>
    </table>
    <div class="settings-row">
      <div class="checkbox controlled-setting-with-label">
        <label>
          <input type="checkbox"
              pref="settings.language.send_function_keys"
              aria-describedby="send-function-keys-description" dialog-pref>
          <span>
            <span i18n-content="sendFunctionKeys"></span>
            <span class="bubble-button controlled-setting-indicator"
                pref="settings.language.send_function_keys"></span>
          </span>
        </label>
      </div>
      <span id="send-function-keys-description"
          i18n-content="sendFunctionKeysDescription"></span>
    </div>
    <div class="settings-row">
      <div class="checkbox">
        <label>
          <input id="enable-auto-repeat" type="checkbox"
              pref="settings.language.xkb_auto_repeat_enabled_r2"
              metric="Options_KeyboardAutoRepeat" dialog-pref>
          <span i18n-content="enableAutoRepeat"></span>
        </label>
      </div>
      <div id="auto-repeat-settings-section">
        <div class="row">
          <span class="option-name" i18n-content="autoRepeatDelay"></span>
            <span i18n-content="autoRepeatDelayLong"></span>
            <input id="auto-repeat-delay-range" type="range"
                class="touch-slider" metric="Options_KeyboardAutoRepeat_Delay"
                pref="settings.language.xkb_auto_repeat_delay_r2" dialog-pref>
            <span i18n-content="autoRepeatDelayShort"></span>
          </div>
          <div class="row">
            <span class="option-name" i18n-content="autoRepeatRate"></span>
            <span i18n-content="autoRepeatRateSlow"></span>
            <input id="auto-repeat-interval-range" type="range"
                class="touch-slider"
                pref="settings.language.xkb_auto_repeat_interval_r2"
                metric="Options_KeyboardAutoRepeat_Interval" dialog-pref>
            <span i18n-content="autoRepeatRateFast"></span>
          </div>
      </div>
    </div>
    <a is="action-link" id="keyboard-shortcuts" class="settings-row"
        i18n-content="showKeyboardShortcuts"></a>
    <a is="action-link" id="languages-and-input-settings" class="settings-row"
        i18n-content="changeLanguageAndInputSettings"></a>
  </div>
  <div class="action-area">
    <div class="button-strip">
      <button id="keyboard-cancel" type="reset" i18n-content="cancel"></button>
      <button id="keyboard-confirm" class="default-button" type="submit"
          i18n-content="ok">
      </button>
    </div>
  </div>
</div>