# Scaling form elements which contain text

ID: C17

Technology: css

Type: Technique

## When to Use

HTML, CSS

## Description

The objective of this technique is to ensure text-based form controls resize when text size is changed in the user agent. This will allow users to enter text and read what they have entered in input boxes because the text is displayed at the size required by the user.

Text-based form controls include `input` boxes (`text` and `textarea`) as well as buttons.

## Examples

### A Contact Form

A Contact Us form has some introductory information and then form controls for users to enter their first name, last name, telephone number and email address. All of the text and form controls have been implemented in a scalable way.

#### The HTML

    <h1>Contact Us</h1>
    <p>Please provide us with your details and we will contact you as soon as we can.
      Note that all of the form fields are required.</p>
    <div>
      <label for="fname">First Name</label>
      <input autocomplete="given-name" id="fname" name="fname" type="text">
    </div>
    <div>
      <label for="lname">Last Name</label>
      <input autocomplete="family-name" id="lname" name="lname" type="text">
    </div>
    <div>
      <label for="phone">Telephone</label>
      <input autocomplete="tel" id="phone" name="phone" type="text">
    </div>
    <div>
      <label for="email">Email</label>
      <input autocomplete="email" id="email" name="email" type="text">
    </div>
    <input id="submit" name="submit" type="submit" value="Submit">

#### The CSS component

    h1 { font-size: 2em; }
    p, label { font-size: 1em; }
    label { display:block; }
    input { font: inherit; }
    div { margin-bottom: 1rem; }

Working example of this code: Example of resizing input with CSS.

## Tests

### Procedure

1. Enter some text into text-based form controls that receive user entered text.
2. Increase the text size of the content by 200%.
3. Check that the text in text-based form controls has increased by 200%.

### Expected Results

- #3 is true.