Text and Number Inputs

A form field is a list item with the item-input class. Its item-inner holds a label (item-label, or item-floating-label, which sits inside the empty field and floats up as you type) and an item-input-wrap around the real control:

          <li class="item-content item-input">
            <div class="item-inner">
              <div class="item-title item-label">Page</div>
              <div class="item-input-wrap">
                <input type="number" name="page" min="1" max="999" inputmode="numeric"
                  placeholder="1-999" required validate />
              </div>
            </div>
          </li>

The input keeps its HTML meaning, so min, maxlength, pattern and inputmode="numeric" (the digit keypad) work as usual. The Heading field adds a <span class="input-clear-button">, and the Note field is a <textarea class="resizable"> that grows with its text. Material draws each field as a filled box (Validation and Storage's figure).