Example: Custom form rendering
- 1: <?php
- 3: /**
- 4: * Nette\Forms example 4
- 5: *
- 6: * - custom form rendering
- 7: */
- 50: // Step 1: Define form with validation rules
- 52: // setup custom rendering
- 68: // group Personal data
- 86: // group Shipping address
- 95: // subgroup
- 111: // group Your account
- 131: // group for buttons
- 138: // Step 2: Check if form was submitted?
- 141: // Step 2c: Check if form is valid
- 148: // this is the end, my friend :-)
- 150: }
- 153: // not submitted, define default values
- 161: }
- 165: // Step 3: Render form
- 166: ?>
- 167: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- 168: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- 169: <head>
- 170: <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- 171: <meta http-equiv="content-language" content="en" />
- 173: <title>Nette\Forms example 4 | Nette Framework</title>
- 175: <style type="text/css">
- 176: <!--
- 177: body {
- 178: font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif;
- 179: }
- 181: .required {
- 182: font-weight: bold;
- 183: }
- 185: .error {
- 186: color: red;
- 187: }
- 189: input.text {
- 190: border: 1px solid #78bd3f;
- 191: padding: 3px;
- 192: color: black;
- 193: background: white;
- 194: }
- 196: input.button {
- 197: font-size: 120%;
- 198: }
- 200: dt, dd {
- 201: padding: .5em 1em;
- 202: }
- 204: #form {
- 205: width: 550px;
- 206: }
- 208: #form h3 {
- 209: background: #78bd3f;
- 210: color: white;
- 211: margin: 0;
- 212: padding: .1em 1em;
- 213: font-size: 100%;
- 214: font-weight: normal;
- 215: clear: both;
- 216: }
- 218: #form dl {
- 219: background: #F8F8F8;
- 220: margin: 0;
- 221: }
- 223: #form dt {
- 224: text-align: right;
- 225: font-weight: normal;
- 226: float: left;
- 227: width: 10em;
- 228: clear: both;
- 229: }
- 231: #form dd {
- 232: margin: 0;
- 233: padding-left: 10em;
- 234: display: block;
- 235: }
- 237: #form dd ul {
- 238: list-style: none;
- 239: font-size: 90%;
- 240: }
- 242: #form dd.odd {
- 243: background: #EEE;
- 244: }
- 245: -->
- 246: </style>
- 247: </head>
- 249: <body>
- 250: <h1>Nette\Forms example 4</h1>
- 253: </body>
- 254: </html>