Collecting data is important, and Fuselage can help you do it more easily across all device sizes.


Building Forms

Combine HTML5 form elements with widths (grid) in order to put together robust, responsive forms.

Output
Account Information
or
HTML
<form>
    <fieldset>
        <legend>Account Information</legend>
        <div class="row">
            <div class="column one-whole medium-one-third">
                 <label>Name
                     <input type="text">
                 </label>
            </div>

            <div class="column one-whole medium-one-third">
                 <label>Email <small>Required</small>
                     <input type="email" required>
                 </label>
            </div>

            <div class="column one-whole medium-one-third">
                 <label>Phone
                     <input type="tel" disabled>
                 </label>
            </div>
        </div>

        <div class="row">
            <div class="column one-whole medium-one-fourth">
                <label>Pick Something
                    <select>
                        <option>Choice 1</option>
                        <option>Choice 2</option>
                        <option>Choice 3</option>
                    </select>
                </label>
            </div>

            <div class="column one-whole medium-one-fourth">
                <label>Age
                    <input type="number">
                </label>
            </div>

            <div class="column one-whole medium-one-half">
                 <label>Occupation
                     <input disabled>
                 </label>
            </div>
        </div>

        <div class="row">
            <div class="column one-whole medium-one-half">
                 <label>Radio Buttons</label>

                 <input type="radio" name="radio-choice" disabled>
                 <label for="radio-choice-1">Choice 1</label>

                 <input type="radio" name="radio-choice"\>
                 <label for="radio-choice-2">Choice 2</label>

                 <input type="radio" name="radio-choice">
                 <label for="radio-choice-3">Choice 3</label>
            </div>

            <div class="column one-whole medium-one-fourth">
                <label>Agreement <small>Required</small></label>
                <input type="checkbox" required>
                <label for="checkbox">I accept</label>
            </div>
        </div>

        <div class="row">
            <div class="column one-whole">
                <label for="textarea">Textarea:
                    <textarea cols="40" rows="4" name="textarea" id="textarea" tabindex="10" readonly>.column.one-whole (readonly)</textarea>
                </label>
            </div>
        </div>

        <input class="button" type="submit" value="Submit"> or
        <input class="button secondary small" type="reset" value="Clear All">
    </fieldset>
</form>