Inputs / Form Inputs

    Form inputs allow you to create flexible and beautiful Form layouts.

    It is recommended to use inputs with List View:

    Where:

    • - required additional class on item-content. Required for correct input item layout

    • item-label - additional class on item-title required to display label correctly

    • item-input-wrap - required additional input wrapper. Must be a direct child of item-inner

    • <span class="input-clear-button"> - button that will clear input value in click. Optional

    By default inputs list is displayed with stacked labels. Stacked labels always appear on top of the input:

    1. <div class="list">
    2.   <ul>
    3.     ...
    4.     <li class="item-content item-input">
    5.       <div class="item-media">... icon/image here ...</div>
    6.       <div class="item-inner">
    7.         <div class="item-title item-label">Name</div>
    8.         <div class="item-input-wrap">
    9.           <input type="text" name="name">
    10.           <span class="input-clear-button"></span>
    11.         </div>
    12.       </div>
    13.     </li>
    14.     ...
    15.   </ul>
    16. </div>
    • item-title item-label - input label

    If you want to use inline labels then you can additional inline-labels class to the whole list or inline-label class to the single item:

    1. <div class="list inline-labels">
    2.   <ul>
    3.     ...
    4.     <li class="item-content item-input">
    5.       <div class="item-media">... icon/image here ...</div>
    6.       <div class="item-inner">
    7.         <div class="item-title item-label">Name</div>
    8.         <div class="item-input-wrap">
    9.           <input type="text" name="name">
    10.           <span class="input-clear-button"></span>
    11.         </div>
    12.       </div>
    13.     </li>
    14.     ...
    15.   </ul>
    16. </div>
    17. <!-- or just to single item -->
    18. <div class="list">
    19.   <ul>
    20.     ...
    21.     <!-- additional "inline-label" class -->
    22.     <li class="item-content item-input inline-label">
    23.       ...
    24.     </li>
    25.     ...
    26.   </ul>
    27. </div>

    MD theme only feature

    To add floating label, we need to use item-floating-label class instead of item-label. In iOS theme it will be displayed as default stacked label.

    1. <div class="list">
    2.   <ul>
    3.     ...
    4.     <li class="item-content item-input">
    5.       <div class="item-media">... icon/image here ...</div>
    6.       <div class="item-inner">
    7.         <!-- "item-floating-label" class on item title -->
    8.         <div class="item-title item-floating-label">Name</div>
    9.         <div class="item-input-wrap">
    10.           <input type="text" name="name">
    11.           <span class="input-clear-button"></span>
    12.         </div>
    13.       </div>
    14.     </li>
    15.     ...
    16.   </ul>
    17. </div>

    It is also possible to additional information about form input:

    Where:

    • item-input-with-info - required additional class on input item

    • <div class="item-input-info">...</div> - element with additional information

    It is also possible to indicate dropdown input (like select) with additional input-dropdown-wrap class. It will add small dropdown icon on the right (▼):

    1. <div class="list">
    2.   <ul>
    3.     ...
    4.     <li class="item-content item-input">
    5.       <div class="item-media">... icon/image here ...</div>
    6.       <div class="item-inner">
    7.         <div class="item-title item-label">Name</div>
    8.         <!-- additional "input-dropdown-wrap" class -->
    9.         <div class="item-input-wrap input-dropdown-wrap">
    10.           <select>
    11.             ...
    12.           </select>
    13.         </div>
    14.       </div>
    15.     </li>
    16.     ...
    17.   </ul>
    18. </div>

    Supported Inputs

    Resizable Textarea

    To make textarea automatically resize based on its content we may just add resizable class:

    1. <textarea class="resizable"></textarea>

    Framework7 supports based on validity input property. With enabled validation, there will appear validation error messages in case of input has invalid value.

    To enable validation we must add: required and validate attributes to the input element.

    Value validation depends on input type. For example input type="email" will be validated to match email pattern, etc. It is default browser behavior. In case you want to add custom rule to validate input value, then it must be done using pattern input attribute:

    1. <!-- default validation, check for value is not empty -->
    2. <input type="text" placeholder="Your name" required validate>
    4. <!-- default email validation, value must be email -->
    5. <input type="email" placeholder="Your e-mail" required validate>
    7. <!-- default url validation -->
    8. <input type="url" placeholder="Your URL" required validate>
    10. <!-- pattern validation, value must be "apple" or "banana" -->
    11. <input type="text" required validate pattern="apple|banana" placeholder="Type 'apple' or 'banana'" >
    13. <!-- pattern validation with custom error message, value must be numbers only -->
    14. <input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!">

    Input State Classes

    There are several classes that can be added to input element depending on its state and content:

    • input-with-value - will be added to input when it has value
    • input-focused - will be added to input when it is focused
    • input-invalid - will be added to input when its value is not valid

    Same states will be added to input’s parent item-input element:

    • item-input-with-value - will be added to input item when its input has value
    • item-input-focused - will be added to input item when its input is focused
    • item-input-invalid - will be added to input item when its input’s value is not valid

    Input App Parameters

    It is possible to control some default input behavior using global app parameters where we can pass input-related parameters under input property:

    For example:

    Input Events

    Inputs will fire the following DOM events input elements:

    Examples

    1. <div class="block-title">Full Layout / Inline Labels</div>
    2. <div class="list inline-labels no-hairlines-md">
    3.   <ul>
    4.     <li class="item-content item-input">
    5.       <div class="item-media">
    6.         <i class="icon demo-list-icon"></i>
    7.       </div>
    8.       <div class="item-inner">
    9.         <div class="item-title item-label">Name</div>
    10.         <div class="item-input-wrap">
    11.           <input type="text" placeholder="Your name">
    12.           <span class="input-clear-button"></span>
    13.         </div>
    14.       </div>
    15.     </li>
    16.     <li class="item-content item-input">
    17.       <div class="item-media">
    18.         <i class="icon demo-list-icon"></i>
    19.       </div>
    20.       <div class="item-inner">
    21.         <div class="item-title item-label">Password</div>
    22.         <div class="item-input-wrap">
    23.           <input type="password" placeholder="Your password">
    24.           <span class="input-clear-button"></span>
    25.         </div>
    26.       </div>
    27.     </li>
    28.     <li class="item-content item-input">
    29.       <div class="item-media">
    30.         <i class="icon demo-list-icon"></i>
    31.       </div>
    32.       <div class="item-inner">
    33.         <div class="item-title item-label">E-mail</div>
    34.         <div class="item-input-wrap">
    35.           <input type="email" placeholder="Your e-mail">
    36.           <span class="input-clear-button"></span>
    37.         </div>
    38.       </div>
    39.     </li>
    40.     <li class="item-content item-input">
    41.       <div class="item-media">
    42.         <i class="icon demo-list-icon"></i>
    43.       </div>
    44.       <div class="item-inner">
    45.         <div class="item-title item-label">URL</div>
    46.         <div class="item-input-wrap">
    47.           <input type="url" placeholder="URL">
    48.           <span class="input-clear-button"></span>
    49.         </div>
    50.       </div>
    51.     </li>
    52.     <li class="item-content item-input">
    53.       <div class="item-media">
    54.         <i class="icon demo-list-icon"></i>
    55.       </div>
    56.       <div class="item-inner">
    57.         <div class="item-title item-label">Phone</div>
    58.         <div class="item-input-wrap">
    59.           <input type="tel" placeholder="Your phone number">
    60.           <span class="input-clear-button"></span>
    61.         </div>
    62.       </div>
    63.     </li>
    64.     <li class="item-content item-input">
    65.       <div class="item-media">
    66.         <i class="icon demo-list-icon"></i>
    67.       </div>
    68.       <div class="item-inner">
    69.         <div class="item-title item-label">Gender</div>
    70.         <div class="item-input-wrap input-dropdown-wrap">
    71.           <select placeholder="Please choose...">
    72.             <option value="Male">Male</option>
    73.             <option value="Female">Female</option>
    74.           </select>
    75.         </div>
    76.       </div>
    77.     </li>
    78.     <li class="item-content item-input">
    79.       <div class="item-media">
    80.         <i class="icon demo-list-icon"></i>
    81.       </div>
    82.       <div class="item-inner">
    83.         <div class="item-title item-label">Birthday</div>
    84.         <div class="item-input-wrap">
    85.           <input type="date" value="2014-04-30" placeholder="Please choose...">
    86.         </div>
    87.       </div>
    88.     </li>
    89.     <li class="item-content item-input">
    90.       <div class="item-media">
    91.         <i class="icon demo-list-icon"></i>
    92.       </div>
    93.       <div class="item-inner">
    94.         <div class="item-title item-label">Date time</div>
    95.         <div class="item-input-wrap">
    96.           <input type="datetime-local" placeholder="Please choose...">
    97.         </div>
    98.       </div>
    99.     </li>
    100.     <li class="item-content item-input">
    101.       <div class="item-media">
    102.         <i class="icon demo-list-icon"></i>
    103.       </div>
    104.       <div class="item-inner">
    105.         <div class="item-title item-label">Range</div>
    106.         <div class="item-input-wrap">
    108.             <input type="range" value="50" min="0" max="100" step="1">
    109.         </div>
    110.       </div>
    111.     </li>
    112.     <li class="item-content item-input">
    113.       <div class="item-media">
    114.         <i class="icon demo-list-icon"></i>
    115.       </div>
    116.       <div class="item-inner">
    117.         <div class="item-title item-label">Textarea</div>
    118.         <div class="item-input-wrap">
    119.           <textarea placeholder="Bio"></textarea>
    120.         </div>
    121.       </div>
    122.     </li>
    123.     <li class="item-content item-input">
    124.       <div class="item-media">
    125.         <i class="icon demo-list-icon"></i>
    126.       </div>
    127.       <div class="item-inner">
    128.         <div class="item-title item-label">Resizable</div>
    129.         <div class="item-input-wrap">
    130.           <textarea class="resizable" placeholder="Bio"></textarea>
    131.         </div>
    132.       </div>
    133.     </li>
    134.   </ul>
    135. </div>
    137. <div class="block-title">Full Layout / Stacked Labels</div>
    138. <div class="list no-hairlines-md">
    139.   <ul>
    140.     <li class="item-content item-input">
    141.       <div class="item-media">
    142.         <i class="icon demo-list-icon"></i>
    143.       </div>
    144.       <div class="item-inner">
    145.         <div class="item-title item-label">Name</div>
    146.         <div class="item-input-wrap">
    147.           <input type="text" placeholder="Your name">
    148.           <span class="input-clear-button"></span>
    149.         </div>
    150.       </div>
    151.     </li>
    152.     <li class="item-content item-input">
    153.       <div class="item-media">
    154.         <i class="icon demo-list-icon"></i>
    155.       </div>
    156.       <div class="item-inner">
    157.         <div class="item-title item-label">Password</div>
    158.         <div class="item-input-wrap">
    159.           <input type="password" placeholder="Your password">
    160.           <span class="input-clear-button"></span>
    161.         </div>
    162.       </div>
    163.     </li>
    164.     <li class="item-content item-input">
    165.       <div class="item-media">
    166.         <i class="icon demo-list-icon"></i>
    167.       </div>
    168.       <div class="item-inner">
    169.         <div class="item-title item-label">E-mail</div>
    170.         <div class="item-input-wrap">
    171.           <input type="email" placeholder="Your e-mail">
    172.           <span class="input-clear-button"></span>
    173.         </div>
    174.       </div>
    175.     </li>
    176.     <li class="item-content item-input">
    177.       <div class="item-media">
    178.         <i class="icon demo-list-icon"></i>
    179.       </div>
    180.       <div class="item-inner">
    181.         <div class="item-title item-label">URL</div>
    182.         <div class="item-input-wrap">
    183.           <input type="url" placeholder="URL">
    184.           <span class="input-clear-button"></span>
    185.         </div>
    186.       </div>
    187.     </li>
    188.     <li class="item-content item-input">
    189.       <div class="item-media">
    190.         <i class="icon demo-list-icon"></i>
    191.       </div>
    192.       <div class="item-inner">
    193.         <div class="item-title item-label">Phone</div>
    194.         <div class="item-input-wrap">
    195.           <input type="tel" placeholder="Your phone number">
    196.           <span class="input-clear-button"></span>
    197.         </div>
    198.       </div>
    199.     </li>
    200.     <li class="item-content item-input">
    201.       <div class="item-media">
    202.         <i class="icon demo-list-icon"></i>
    203.       </div>
    204.       <div class="item-inner">
    205.         <div class="item-title item-label">Gender</div>
    206.         <div class="item-input-wrap input-dropdown-wrap">
    207.           <select placeholder="Please choose...">
    208.             <option value="Male">Male</option>
    209.             <option value="Female">Female</option>
    210.           </select>
    211.         </div>
    212.       </div>
    213.     </li>
    214.     <li class="item-content item-input">
    215.       <div class="item-media">
    216.         <i class="icon demo-list-icon"></i>
    217.       </div>
    218.       <div class="item-inner">
    219.         <div class="item-title item-label">Birthday</div>
    220.         <div class="item-input-wrap">
    221.           <input type="date" value="2014-04-30" placeholder="Please choose...">
    222.         </div>
    223.       </div>
    224.     </li>
    225.     <li class="item-content item-input">
    226.       <div class="item-media">
    227.         <i class="icon demo-list-icon"></i>
    228.       </div>
    229.       <div class="item-inner">
    230.         <div class="item-title item-label">Date time</div>
    231.         <div class="item-input-wrap">
    232.           <input type="datetime-local" placeholder="Please choose...">
    233.         </div>
    234.       </div>
    235.     </li>
    236.     <li class="item-content item-input">
    237.       <div class="item-media">
    238.         <i class="icon demo-list-icon"></i>
    239.       </div>
    240.       <div class="item-inner">
    241.         <div class="item-title item-label">Range</div>
    242.         <div class="item-input-wrap">
    243.           <div class="range-slider range-slider-init" data-label="true">
    244.             <input type="range" value="50" min="0" max="100" step="1">
    245.           </div>
    246.         </div>
    247.       </div>
    248.     </li>
    249.     <li class="item-content item-input">
    250.       <div class="item-media">
    251.         <i class="icon demo-list-icon"></i>
    252.       </div>
    253.       <div class="item-inner">
    254.         <div class="item-title item-label">Textarea</div>
    255.         <div class="item-input-wrap">
    256.           <textarea placeholder="Bio"></textarea>
    257.         </div>
    258.       </div>
    259.     </li>
    260.     <li class="item-content item-input">
    261.       <div class="item-media">
    262.         <i class="icon demo-list-icon"></i>
    263.       </div>
    264.       <div class="item-inner">
    265.         <div class="item-title item-label">Resizable</div>
    266.         <div class="item-input-wrap">
    267.           <textarea class="resizable" placeholder="Bio"></textarea>
    268.         </div>
    269.       </div>
    270.     </li>
    271.   </ul>
    272. </div>
    274. <div class="block-title">Floating Labels (MD-theme only)</div>
    275. <div class="list no-hairlines-md">
    276.   <ul>
    277.     <li class="item-content item-input">
    278.       <div class="item-media">
    279.         <i class="icon demo-list-icon"></i>
    280.       </div>
    281.       <div class="item-inner">
    282.         <div class="item-title item-floating-label">Name</div>
    283.         <div class="item-input-wrap">
    284.           <input type="text" placeholder="Your name">
    285.           <span class="input-clear-button"></span>
    286.         </div>
    287.       </div>
    288.     </li>
    289.     <li class="item-content item-input">
    290.       <div class="item-media">
    291.         <i class="icon demo-list-icon"></i>
    292.       </div>
    293.       <div class="item-inner">
    294.         <div class="item-title item-floating-label">Password</div>
    295.         <div class="item-input-wrap">
    296.           <input type="password" placeholder="Your password">
    297.           <span class="input-clear-button"></span>
    298.         </div>
    299.       </div>
    300.     </li>
    301.     <li class="item-content item-input">
    302.       <div class="item-media">
    303.         <i class="icon demo-list-icon"></i>
    304.       </div>
    305.       <div class="item-inner">
    306.         <div class="item-title item-floating-label">E-mail</div>
    307.         <div class="item-input-wrap">
    308.           <input type="email" placeholder="Your e-mail">
    309.           <span class="input-clear-button"></span>
    310.         </div>
    311.       </div>
    312.     </li>
    313.     <li class="item-content item-input">
    314.       <div class="item-media">
    315.         <i class="icon demo-list-icon"></i>
    316.       </div>
    317.       <div class="item-inner">
    318.         <div class="item-title item-floating-label">URL</div>
    319.         <div class="item-input-wrap">
    320.           <input type="url" placeholder="URL">
    321.           <span class="input-clear-button"></span>
    322.         </div>
    323.       </div>
    324.     </li>
    325.     <li class="item-content item-input">
    326.       <div class="item-media">
    327.         <i class="icon demo-list-icon"></i>
    328.       </div>
    329.       <div class="item-inner">
    330.         <div class="item-title item-floating-label">Phone</div>
    331.         <div class="item-input-wrap">
    332.           <input type="tel" placeholder="Your phone number">
    333.           <span class="input-clear-button"></span>
    334.         </div>
    335.       </div>
    336.     </li>
    337.     <li class="item-content item-input">
    338.       <div class="item-media">
    339.         <i class="icon demo-list-icon"></i>
    340.       </div>
    341.       <div class="item-inner">
    342.         <div class="item-title item-floating-label">Bio</div>
    343.         <div class="item-input-wrap">
    344.           <textarea class="resizable" placeholder="Bio"></textarea>
    345.           <span class="input-clear-button"></span>
    346.         </div>
    347.       </div>
    348.     </li>
    349.   </ul>
    350. </div>
    352. <div class="block-title">Validation + Additional Info</div>
    353. <div class="list no-hairlines-md">
    354.   <ul>
    355.     <li class="item-content item-input item-input-with-info">
    356.       <div class="item-media">
    357.         <i class="icon demo-list-icon"></i>
    358.       </div>
    359.       <div class="item-inner">
    360.         <div class="item-title item-label">Name</div>
    361.         <div class="item-input-wrap">
    362.           <input type="text" placeholder="Your name" required validate>
    363.           <span class="input-clear-button"></span>
    364.           <div class="item-input-info">Default "required" validation</div>
    365.         </div>
    366.       </div>
    367.     </li>
    368.     <li class="item-content item-input item-input-with-info">
    369.         <i class="icon demo-list-icon"></i>
    370.       </div>
    371.       <div class="item-inner">
    372.         <div class="item-title item-label">Fruit</div>
    373.         <div class="item-input-wrap">
    374.           <input type="text" placeholder="Type 'apple' or 'banana'" required validate pattern="apple|banana">
    375.           <span class="input-clear-button"></span>
    376.           <div class="item-input-info">Pattern validation (<b>apple|banana</b>)</div>
    377.         </div>
    378.       </div>
    379.     </li>
    380.     <li class="item-content item-input item-input-with-info">
    381.       <div class="item-media">
    382.         <i class="icon demo-list-icon"></i>
    383.       </div>
    384.       <div class="item-inner">
    385.         <div class="item-title item-label">E-mail</div>
    386.         <div class="item-input-wrap">
    387.           <input type="email" placeholder="Your e-mail" required validate>
    388.           <span class="input-clear-button"></span>
    389.           <div class="item-input-info">Default e-mail validation</div>
    390.         </div>
    391.       </div>
    392.     </li>
    393.     <li class="item-content item-input item-input-with-info">
    394.       <div class="item-media">
    395.         <i class="icon demo-list-icon"></i>
    396.       </div>
    397.       <div class="item-inner">
    398.         <div class="item-title item-label">URL</div>
    399.         <div class="item-input-wrap">
    400.           <input type="url" placeholder="Your URL" required validate>
    401.           <span class="input-clear-button"></span>
    402.           <div class="item-input-info">Default URL validation</div>
    403.         </div>
    404.       </div>
    405.     </li>
    406.     <li class="item-content item-input item-input-with-info">
    407.       <div class="item-media">
    408.         <i class="icon demo-list-icon"></i>
    409.       </div>
    410.       <div class="item-inner">
    411.         <div class="item-title item-label">Number</div>
    412.         <div class="item-input-wrap">
    413.           <input type="text" placeholder="Enter number" required validate pattern="[0-9]*" data-error-message="Only numbers please!">
    414.           <span class="input-clear-button"></span>
    415.           <div class="item-input-info">With custom error message</div>
    416.         </div>
    417.       </div>
    418.     </li>
    419.   </ul>
    420. </div>
    422. <div class="block-title">Icon + Input</div>
    423. <div class="list no-hairlines-md">
    424.   <ul>
    425.     <li class="item-content item-input">
    426.       <div class="item-media">
    427.         <i class="icon demo-list-icon"></i>
    428.       </div>
    429.       <div class="item-inner">
    430.         <div class="item-input-wrap">
    431.           <input type="text" placeholder="Your name">
    432.           <span class="input-clear-button"></span>
    433.         </div>
    434.       </div>
    435.     </li>
    436.     <li class="item-content item-input">
    437.       <div class="item-media">
    438.         <i class="icon demo-list-icon"></i>
    439.       </div>
    440.       <div class="item-inner">
    441.         <div class="item-input-wrap">
    442.           <input type="password" placeholder="Your password">
    443.           <span class="input-clear-button"></span>
    444.         </div>
    445.       </div>
    446.     </li>
    447.     <li class="item-content item-input">
    448.       <div class="item-media">
    449.         <i class="icon demo-list-icon"></i>
    450.       </div>
    451.       <div class="item-inner">
    452.         <div class="item-input-wrap">
    453.           <input type="email" placeholder="Your e-mail">
    454.           <span class="input-clear-button"></span>
    455.         </div>
    456.       </div>
    457.     </li>
    458.     <li class="item-content item-input">
    459.       <div class="item-media">
    460.         <i class="icon demo-list-icon"></i>
    461.       </div>
    462.       <div class="item-inner">
    463.         <div class="item-input-wrap">
    464.           <input type="url" placeholder="URL">
    465.           <span class="input-clear-button"></span>
    466.         </div>
    467.       </div>
    468.     </li>
    469.   </ul>
    470. </div>
    472. <div class="block-title">Label + Input</div>
    473. <div class="list no-hairlines-md">
    474.   <ul>
    475.     <li class="item-content item-input">
    476.       <div class="item-inner">
    477.         <div class="item-title item-label">Name</div>
    478.         <div class="item-input-wrap">
    479.           <input type="text" placeholder="Your name">
    480.           <span class="input-clear-button"></span>
    481.         </div>
    482.       </div>
    483.     </li>
    484.     <li class="item-content item-input">
    485.       <div class="item-inner">
    486.         <div class="item-title item-label">Password</div>
    487.         <div class="item-input-wrap">
    488.           <input type="password" placeholder="Your password">
    489.           <span class="input-clear-button"></span>
    490.         </div>
    491.       </div>
    492.     </li>
    493.     <li class="item-content item-input">
    494.       <div class="item-inner">
    495.         <div class="item-title item-label">E-mail</div>
    496.         <div class="item-input-wrap">
    497.           <input type="email" placeholder="Your e-mail">
    498.           <span class="input-clear-button"></span>
    499.         </div>
    500.       </div>
    501.     </li>
    502.     <li class="item-content item-input">
    503.       <div class="item-inner">
    504.         <div class="item-title item-label">URL</div>
    505.         <div class="item-input-wrap">
    506.           <input type="url" placeholder="URL">
    507.           <span class="input-clear-button"></span>
    508.         </div>
    509.       </div>
    510.     </li>
    511.   </ul>
    512. </div>
    514. <div class="block-title">Only Inputs</div>
    515. <div class="list no-hairlines-md">
    516.   <ul>
    517.     <li class="item-content item-input">
    518.       <div class="item-inner">
    519.         <div class="item-input-wrap">
    520.           <input type="text" placeholder="Your name">
    521.           <span class="input-clear-button"></span>
    522.         </div>
    523.       </div>
    524.     </li>
    525.     <li class="item-content item-input">
    526.       <div class="item-inner">
    527.         <div class="item-input-wrap">
    528.           <input type="password" placeholder="Your password">
    529.           <span class="input-clear-button"></span>
    530.         </div>
    531.       </div>
    532.     </li>
    533.     <li class="item-content item-input">
    534.       <div class="item-inner">
    535.         <div class="item-input-wrap">
    536.           <input type="email" placeholder="Your e-mail">
    537.           <span class="input-clear-button"></span>
    538.         </div>
    539.       </div>
    540.     </li>
    541.     <li class="item-content item-input">
    542.       <div class="item-inner">
    543.         <div class="item-input-wrap">
    544.           <input type="url" placeholder="URL">
    545.           <span class="input-clear-button"></span>
    546.         </div>
    547.       </div>
    548.     </li>
    549.   </ul>
    550. </div>
    552. <div class="block-title">Inputs + Additional Info</div>
    553. <div class="list no-hairlines-md">
    554.   <ul>
    555.     <li class="item-content item-input item-input-with-info">
    556.       <div class="item-inner">
    557.         <div class="item-input-wrap">
    558.           <input type="text" placeholder="Your name">
    559.           <span class="input-clear-button"></span>
    560.           <div class="item-input-info">Full name please</div>
    561.         </div>
    562.       </div>
    563.     </li>
    564.     <li class="item-content item-input item-input-with-info">
    565.       <div class="item-inner">
    566.         <div class="item-input-wrap">
    567.           <input type="password" placeholder="Your password">
    568.           <span class="input-clear-button"></span>
    569.           <div class="item-input-info">8 characters minimum</div>
    570.         </div>
    571.       </div>
    572.     </li>
    573.     <li class="item-content item-input item-input-with-info">
    574.       <div class="item-inner">
    575.         <div class="item-input-wrap">
    576.           <input type="email" placeholder="Your e-mail">
    577.           <span class="input-clear-button"></span>
    578.           <div class="item-input-info">Your work e-mail address</div>
    579.         </div>
    580.       </div>
    581.     </li>
    582.     <li class="item-content item-input item-input-with-info">
    583.       <div class="item-inner">
    584.         <div class="item-input-wrap">
    585.           <input type="url" placeholder="URL">
    586.           <span class="input-clear-button"></span>
    587.           <div class="item-input-info">Your website URL</div>
    588.         </div>
    589.       </div>
    590.     </li>
    591.   </ul>
    592. </div>
    594. <div class="block-title">Only Inputs Inset</div>
    595. <div class="list inset">
    596.   <ul>
    597.     <li class="item-content item-input">
    598.       <div class="item-inner">
    599.         <div class="item-input-wrap">
    600.           <input type="text" placeholder="Your name">
    601.           <span class="input-clear-button"></span>
    602.         </div>
    603.       </div>
    604.     </li>
    605.     <li class="item-content item-input">
    606.       <div class="item-inner">
    607.         <div class="item-input-wrap">
    608.           <input type="password" placeholder="Your password">
    609.           <span class="input-clear-button"></span>
    610.         </div>
    611.       </div>
    612.     </li>
    613.     <li class="item-content item-input">
    614.       <div class="item-inner">
    615.         <div class="item-input-wrap">
    616.           <input type="email" placeholder="Your e-mail">
    617.           <span class="input-clear-button"></span>
    618.         </div>
    619.       </div>
    620.     </li>
    621.     <li class="item-content item-input">
    622.       <div class="item-inner">
    623.         <div class="item-input-wrap">
    624.           <input type="url" placeholder="URL">
    625.           <span class="input-clear-button"></span>
    626.         </div>
    627.       </div>
    628.     </li>
    629. </div>