<!-- BootStrap NavBar --> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <h3><a class="brand" href="[% request.uri_base %]"><img src="images/dancer_man.png"> Perl Dancer</a></h3> </div> </div> </div> <!-- HEADER line --> <div class="container"> <div class="page-header"> <div class="row"> <div class="span12"> <h2>Dancer + Bootstrap Examples</h2> <h1>Simple HTML Form</h1> </div> </div> </div> <div class="row"> <div class="span12"> This is a simple HTML <form>, using all of <a target="_blank" href="http://twitter.github.com/bootstrap/base-css.html#forms">Bootstrap's form goodies</a>, and Dancer's CGI/POST processing. <br/> <br/> <h3>Code Highlights</h3> <ul> <li>The Dancer code is in <a href="[% request.uri_for("/show_file",file => "simple_form.pm", example => "SimpleForm", url => request.uri_for("/simple_form") ) %]"> <code>./lib/examples/simple_form.pm</code> <i class="icon-eye-open"></i> </a>. </li> <li>This HTML tempate is in <a href="[% request.uri_for("/show_file",file => "simple_form_entry.tt", example => "SimpleForm", url => request.uri_for("/simple_form") ) %]"> <code>./views/examples/simple_form_entry.tt</code> <i class="icon-eye-open"></i> </a>. </li> <li>Once you click <span class="label label-info">submit</span>, the HTTP POST request is handed in the dancer code.</li> <li>If you enter <span class="label label-warning">gordon</span> as your name, you'll see a warning, using <a target="_blank" href="http://twitter.github.com/bootstrap/components.html#alerts">Bootstrap's Alerts</a></li> </ul> <!--- ################ Form starts here ################ --> <form class="form-horizontal" method="post"> <fieldset> <legend>Tell us about yourself</legend> [%###### If the dancer module defined this variable, show a warning to the user ##### %] [% IF show_warning %] <div class="alert alert-error"> <button type="button" class="close" data-dismiss="alert">×</button> <strong>Hey!</strong> [% show_warning %] </div> [% END %] <!-- Text-Entry Control --> <div class="control-group"> <label class="control-label" for="username">Your name</label> <div class="controls"> <input type="text" class="input-xlarge" id="username" name="username"> <span class="help-inline">(Any name will do, except <span class="label label-warning">gordon</span>)</span> </div> </div> <!-- List box control --> <div class="control-group"> <label class="control-label" for="animal">Your favorite Animal</label> <div class="controls"> <select id="animal" name="animal"> [%#### the "animals" list is set by the Dancer module, allows dynamic <form> creation #### %] [% FOREACH animal IN animals %] <option>[% animal %]</option> [% END %] </select> </div> </div> <!-- Radio Buttons Controls --> <div class="control-group"> <label class="control-label">You prefer</label> <div class="controls"> <label class="radio"> <input type="radio" name="magic" id="magic1" value="more" checked> More Magic! </label> <label class="radio"> <input type="radio" name="magic" id="magic2" value="less"> Less Magic </label> </div> </div> <!-- The Submit buttons --> <div class="form-actions"> <button type="submit" class="btn btn-primary">Go!</button> </div> </fieldset> </form> </div> </div>