<!DOCTYPE html>
<html>
<head>
<title>Form::Diva</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
@import url(//fonts.googleapis.com/css?family=Droid+Serif);
@import url(//fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
@import url(//fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);
body {
font-family: 'Droid Serif';
}
h1, h2, h3 {
font-family: 'Yanone Kaffeesatz';
font-weight: 400;
margin-bottom: 0;
}
.remark-slide-content h1 { font-size: 3em; }
.remark-slide-content h2 { font-size: 2em; }
.remark-slide-content h3 { font-size: 1.6em; }
.footnote {
position: absolute;
bottom: 3em;
}
li p { line-height: 1.25em; }
.red { color: #fa0000; }
.large { font-size: 2em; }
a, a > code {
color: rgb(249, 38, 114);
text-decoration: none;
}
code {
-moz-border-radius: 5px;
-web-border-radius: 5px;
background: #e7e8e2;
border-radius: 5px;
}
.remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
.remark-code-line-highlighted { background-color: #373832; }
.pull-left {
float: left;
width: 47%;
}
.pull-right {
float: right;
width: 47%;
}
.pull-right ~ p {
clear: both;
}
#slideshow .slide .content code {
font-size: 0.8em;
}
#slideshow .slide .content pre code {
font-size: 0.9em;
padding: 15px;
}
.inverse {
background: #272822;
color: #777872;
text-shadow: 0 0 20px #333;
}
.inverse h1, .inverse h2 {
color: #f3f3f3;
line-height: 0.8em;
}
/* Slide-specific styling */
#slide-inverse .footnote {
bottom: 12px;
left: 20px;
}
#slide-how .slides {
font-size: 0.9em;
position: absolute;
top: 151px;
right: 140px;
}
#slide-how .slides h3 {
margin-top: 0.2em;
}
#slide-how .slides .first, #slide-how .slides .second {
padding: 1px 20px;
height: 90px;
width: 120px;
-moz-box-shadow: 0 0 10px #777;
-webkit-box-shadow: 0 0 10px #777;
box-shadow: 0 0 10px #777;
}
#slide-how .slides .first {
background: #fff;
position: absolute;
top: 20%;
left: 20%;
z-index: 1;
}
#slide-how .slides .second {
position: relative;
background: #fff;
z-index: 0;
}
/* Two-column layout */
.left-column {
color: #777;
width: 20%;
height: 92%;
float: left;
}
.left-column h2:last-of-type, .left-column h3:last-child {
color: #000;
}
.right-column {
width: 75%;
float: right;
padding-top: 1em;
}
</style>
</head>
<body>
<textarea id="source">
name: inverse
layout: true
class: left, middle, inverse
---
# Form::Diva
## A Simple HTML5 Form Generator
---
# What is Form::Diva?
Form::Diva is an HTML5 Form Element Generator.
It holds a simple data structure representing your form, and takes data of either a HashRef or a DBIx::Class::Row object to return an array of elements that your templating system can easily assemble into a form.
???
# What is Form::Diva?
Form::Diva is an HTML5 Form Element Generator.
A simple data structure represents your form.
Data may be either a Hashref or a DBIx::Class::Row.
Returns an array of label, input, comment for your templating system to assemble into a form.
---
# Forms
For anyone developing web applications forms are and will remain a tedious chore. A quick search for <u>**form**</u> on CPAN turns up possibly thousands of modules.
Some of them are very basic such as Mojolicous::Plugin::TagHelpers which makes generating form elements in your view less tedious. Then there are End to End Form solutions such as HTML::FormFu which generates and validates your forms.
???
A casual review of those results suggests mosts of the hits, at least those in the first few pages are related to web forms.
I first used Mojolicious when I was writing the documentation for Form::Diva so that I could include coverage of Mojo::Template in it.
---
# A Simple Structure to Describe a Form
````perl
use Form::Diva;
my $form = Form::Diva->new(
label_class => 'col-sm-3 control-label',
input_class => 'form-control',
form => [
{ name => 'name',
type => 'text',
placeholder => 'Your Name',
label => 'Full Name' },
{ name => 'phone',
type => 'tel',
extra => 'required' },
],
);
````
???
The new object takes a class to use for inputs and labels. The fields are defined within form element.
---
# With Shortcuts and Defaults to make typing even easier
````perl
# These two field definitions are equivalent:
{ n => 'simple' }
{ name => 'simple',
type => 'text',
label => 'Simple',
id => 'formdiva_simple',
}
````
* **n** is the shortcut for name, and is the only thing you are required to define for your field.
* **type** defaults to text.
* **label** defaults to ucfirst($name)
* **id** defaults to "formdiva_$name"
---
# Assemble Your Form In Your Template
Form::Diva generates the field labels and inputs
````perl
my $fields = $diva->generate;
my $filledfields = $diva->generate( $hashref_of_data );
my $filledfields = $diva->generate( $DBIx::Class::Row );
# to get your hidden fields
my $hiddenfields = $diva->hidden( $hashref_of_data );
my $hiddenfields = $diva->hidden( $DBIx::Class::Row );
````
You generate the &lt; form &gt; tag and the submit buttons in your template.
???
These things are part of your form design and there is no reason to handle them in your form generator.
---
````html
<form class="form-horizontal well col-md-8" role="form"
method="post" action="/form1" name="DIVA1" >
<div class="form-group">
In Template Toolkit:
[% FOREACH field IN fields %] {
[% field.label %]
<div class="col-sm-8">
[% field.input %]
</div>
[% END %]
Or in Mojo::Template
% foreach my $field (@$fields) {
<%== $field->{'label'} %>
<div class="col-sm-8">
<%== $field->{'input'} %>
</div>
% }
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-8">
<input type="submit" class="btn btn-large btn-primary"
name="submit" value="submit_me" >&nbsp;
</div>
</div>
</form>
````
???
This could replace a long block of form code within your template, the example includes both Template::Toolkit and Mojo::Template.
---
# Some More Methods
##prefill##
Generate a form with data but leave defaults and placeholders for empty fields.
##datavalues##
Returns an array_ref of the values that would be used to generate the two fields. Useful for debugging and if you want to be more granualar in constructing your form elements.
##clone##
Lets you re-order fields, change the input and label classes and even change fields between hidden and visible. Useful for when you have several similar forms.
---
# All HTML5 Field Types Are Supported
##TextArea, Radio, Checkbox, and Select
Can all be generated. Form::Diva does not currently support multivalued fields.
##Other Types
Form::Diva will accept whatever field type you provide it, this allows support for future and custom types, but Form::Diva won't throw an exception if you mistype a type.
---
# More Things
## extra attribute
Since Form::Diva doesn't handle all HTML5 field attributes it has the extra field which is text placed directly in the field tag, this allows easy handling of attributes like required which do not take a value, and any present or future ones that don't need special support like checkboxes.
## comment
Returned as a seperate element by generate, meant for placing as a comment in your form.
## Over-ride class for a field
input\_class and label\_class can be over-ridden per field as part of the field definition.
---
# Form::Diva
## A Simple HTML5 Form Generator
###Author: John Karr (CPAN: BRAINBUZ)
</textarea>
</script>
<script>
var slideshow = remark.create();
</script>
</body>
</html>