Example: Custom form rendering
- 1: <?php
- 3: /**
- 4: * Nette\Forms custom rendering example.
- 5: */
- 34: // Step 1: Define form with validation rules
- 36: // setup custom rendering
- 52: // group Personal data
- 70: // group Shipping address
- 79: // subgroup
- 95: // group Your account
- 115: // group for buttons
- 122: // Step 2: Check if form was submitted?
- 125: // Step 2c: Check if form is valid
- 132: // this is the end, my friend :-)
- 134: }
- 137: // not submitted, define default values
- 145: }
- 149: // Step 3: Render form
- 150: ?>
- 151: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 152: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- 153: <head>
- 154: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- 155: <meta http-equiv="content-language" content="en" />
- 157: <title>Nette\Forms custom rendering example | Nette Framework</title>
- 159: <style type="text/css">
- 160: <!--
- 161: body {
- 162: font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif;
- 163: }
- 165: .required {
- 166: font-weight: bold;
- 167: }
- 169: .error {
- 170: color: red;
- 171: }
- 173: input.text {
- 174: border: 1px solid #78bd3f;
- 175: padding: 3px;
- 176: color: black;
- 177: background: white;
- 178: }
- 180: input.button {
- 181: font-size: 120%;
- 182: }
- 184: dt, dd {
- 185: padding: .5em 1em;
- 186: }
- 188: #form {
- 189: width: 550px;
- 190: }
- 192: #form h3 {
- 193: background: #78bd3f;
- 194: color: white;
- 195: margin: 0;
- 196: padding: .1em 1em;
- 197: font-size: 100%;
- 198: font-weight: normal;
- 199: clear: both;
- 200: }
- 202: #form dl {
- 203: background: #F8F8F8;
- 204: margin: 0;
- 205: }
- 207: #form dt {
- 208: text-align: right;
- 209: font-weight: normal;
- 210: float: left;
- 211: width: 10em;
- 212: clear: both;
- 213: }
- 215: #form dd {
- 216: margin: 0;
- 217: padding-left: 10em;
- 218: display: block;
- 219: }
- 221: #form dd ul {
- 222: list-style: none;
- 223: font-size: 90%;
- 224: }
- 226: #form dd.odd {
- 227: background: #EEE;
- 228: }
- 229: -->
- 230: </style>
- 231: </head>
- 233: <body>
- 234: <h1>Nette\Forms custom rendering example</h1>
- 237: </body>
- 238: </html>