Simple Brackets extension with all possible input field

main.js

/*jslint vars: true, plusplus: true, devel: true, nomen: true, regexp: true, indent: 4, maxerr: 50 */
/*global define, $, brackets */

define(function (require, exports, module) {
    "use strict";

    var CommandManager = brackets.getModule("command/CommandManager"),
        WorkspaceManager = brackets.getModule("view/WorkspaceManager"),
        Menus = brackets.getModule("command/Menus"),
        myPanelTemplate = require("text!myPanel.html"),

        // Create a new Panel base on template
        myPanelHtml = Mustache.render(myPanelTemplate, {
            panelID: 'my_panel'
        }),

        // Add new Panel to bottom of the page
        my_panel = WorkspaceManager.createBottomPanel("my_panel", $(myPanelHtml), 400); 

    // Toggle state
    function handleShowForm() {
        my_panel.setVisible(!my_panel.isVisible());
    }

    // Include in the File Menu
    var MY_COMMAND_ID = "formsample.inputtest";
    CommandManager.register("Show test panel", MY_COMMAND_ID, handleShowForm);

    var menu = Menus.getMenu(Menus.AppMenuBar.FILE_MENU);
    menu.addMenuItem(MY_COMMAND_ID);
});

myPanel.html

<div id="my_panel" class="bottom-panel" style="padding: 0 15px;">
    <style>
        .container {
            width: 960px;
            margin: 20px auto;
        }
        .column {
            display: block;
            float: left;
            width: 480px;
        }
    </style>

    <form class="container">
        <div class="column no-focus">
            <label>Hidden:
                <input type="hidden">
            </label>
            <label>Text:
                <input type="text">
            </label>
            <label>Search:
                <input type="search">
            </label>
            <label>Telephone:
                <input type="tel">
            </label>
            <label>URL:
                <input type="url">
            </label>
            <label>E-mail:
                <input type="email">
            </label>
            <label>Password:
                <input type="password">
            </label>
            <label>Date:
                <input type="date">
            </label>
            <label>Time:
                <input type="time">
            </label>
        </div>

        <div class="column">
            <label>Number:
                <input type="number">
            </label>
            <label>Range:
                <input type="range">
            </label>
            <label>Color:
                <input type="color">
            </label>
            <label>Checkbox:
                <input type="checkbox" value="Hello World"><span>Hello World</span> 
            </label>
            <label>Radio:
                <input type="radio" value="Hello World"><span>Hello World</span> 
            </label>
            <label>File:
                <input type="file">
            </label>
            <label>Submit:
                <input type="submit">
            </label>
            <label>Image:
                <input type="image">
            </label>
            <label>Reset:
                <input type="reset">
            </label>
            <label>Button:
                <input type="button" value="Hello World">
            </label>
        </div>
    </form>

</div>

Hi came across your GIST while looking for a way to put up a panel with input fields. My question is once this is done how do you read the values of the input fields on the panel within the extension ?