1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<?php
/**
* Nette Forms custom rendering example.
*/
if (@!include 'Nette/loader.php') {
die('Install packages using `composer install`');
}
use Nette\Forms\Form;
use Tracy\Debugger;
use Tracy\Dumper;
use Nette\Utils\Html;
Debugger::enable();
$form = new Form;
// setup custom rendering
$renderer = $form->getRenderer();
$renderer->wrappers['form']['container'] = Html::el('div')->id('form');
$renderer->wrappers['group']['container'] = NULL;
$renderer->wrappers['group']['label'] = 'h3';
$renderer->wrappers['pair']['container'] = NULL;
$renderer->wrappers['controls']['container'] = 'dl';
$renderer->wrappers['control']['container'] = 'dd';
$renderer->wrappers['control']['.odd'] = 'odd';
$renderer->wrappers['label']['container'] = 'dt';
$renderer->wrappers['label']['suffix'] = ':';
$renderer->wrappers['control']['requiredsuffix'] = " \xE2\x80\xA2";
$form->addGroup('Personal data');
$form->addText('name', 'Your name')
->setRequired('Enter your name');
$form->addRadioList('gender', 'Your gender', [
'm' => Html::el('span', 'male')->style('color: #248bd3'),
'f' => Html::el('span', 'female')->style('color: #e948d4'),
]);
$form->addSelect('country', 'Country', [
'Buranda', 'Qumran', 'Saint Georges Island',
]);
$form->addCheckbox('send', 'Ship to address');
$form->addGroup('Your account');
$form->addPassword('password', 'Choose password');
$form->addUpload('avatar', 'Picture');
$form->addTextArea('note', 'Comment');
$form->addGroup();
$form->addSubmit('submit', 'Send');
if ($form->isSuccess()) {
echo '<h2>Form was submitted and successfully validated</h2>';
Dumper::dump($form->getValues());
exit;
}
?>
<!DOCTYPE html>
<meta charset="utf-8">
<title>Nette Forms custom rendering example</title>
<link rel="stylesheet" media="screen" href="assets/style.css" />
<style>
textarea, select, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="image"]):not([type="range"]) {
border: 1px solid #78BD3F;
}
dt, dd {
padding: .5em 1em;
}
#form h3 {
background: #78BD3F;
color: white;
margin: 0;
padding: .1em 1em;
font-size: 100%;
font-weight: normal;
clear: both;
}
#form dl {
background: #F8F8F8;
margin: 0;
}
#form dt {
text-align: right;
font-weight: normal;
float: left;
width: 10em;
clear: both;
}
#form dd {
margin: 0;
padding-left: 10em;
display: block;
}
#form dd ul {
list-style: none;
font-size: 90%;
}
#form dd.odd {
background: #EEE;
}
</style>
<script src="https://nette.github.io/resources/js/netteForms.js"></script>
<h1>Nette Forms custom rendering example</h1>
<?php echo $form ?>
<footer><a href="https://doc.nette.org/en/forms">see documentation</a></footer>
|
