You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

694 lines
21 KiB

10 years ago
10 years ago
10 years ago
  1. ---
  2. layout : 'default'
  3. css : 'form'
  4. element : 'form'
  5. elementType : 'collection'
  6. title : 'Form'
  7. description : 'A form displays a set of related user input fields in a structured way'
  8. type : 'UI Collection'
  9. themes : ['Default', 'Flat', 'Chubby', 'GitHub']
  10. ---
  11. <link rel="stylesheet/less" type="text/css" href="/build/less/definitions/collections/form.less" />
  12. <script src="/javascript/form.js"></script>
  13. <%- @partial('header') %>
  14. <div class="main container">
  15. <h2 class="ui dividing header">Types</h2>
  16. <div class="example">
  17. <h4 class="ui header">Form</h4>
  18. <p>
  19. Forms always include fields, and fields always contain form elements. Fields themselves may also include:
  20. <a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
  21. <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
  22. </p>
  23. <div class="ui ignored warning top attached message">
  24. <p>If you are looking for form validation, you should check out <a href="/modules/form.html">form validation</a>.</p>
  25. </div>
  26. <div class="ui ignored info attached message"><p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
  27. </div>
  28. <div class="ui ignored hidden divider"></div>
  29. <div class="ui form">
  30. <h4 class="ui dividing header">Personal Information</h4>
  31. <div class="two fields">
  32. <div class="field">
  33. <label>Name</label>
  34. <div class="two fields">
  35. <div class="field">
  36. <input type="text" name="first-name" placeholder="First Name">
  37. </div>
  38. <div class="field">
  39. <input type="text" name="last-name" placeholder="Last Name">
  40. </div>
  41. </div>
  42. </div>
  43. <div class="field">
  44. <label>Gender</label>
  45. <div class="ui selection dropdown">
  46. <input type="hidden" name="gender">
  47. <div class="default text">Gender</div>
  48. <i class="dropdown icon"></i>
  49. <div class="menu">
  50. <div class="item" data-value="male">Male</div>
  51. <div class="item" data-value="female">Female</div>
  52. </div>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="field">
  57. <label>Biography</label>
  58. <textarea></textarea>
  59. </div>
  60. <h4 class="ui dividing header">Account Info</h4>
  61. <div class="two fields">
  62. <div class="required field">
  63. <label>Username</label>
  64. <div class="ui left labeled icon input">
  65. <input type="text" placeholder="Username">
  66. <i class="user icon"></i>
  67. </div>
  68. </div>
  69. <div class="required field">
  70. <label>Password</label>
  71. <div class="ui left labeled icon input">
  72. <input type="password">
  73. <i class="lock icon"></i>
  74. </div>
  75. </div>
  76. </div>
  77. <h4 class="ui block top attached header">Optional Survey</h4>
  78. <div class="ui bottom attached secondary segment">
  79. <div class="grouped fields">
  80. <label for="alone">Are you a human?</label>
  81. <div class="field">
  82. <div class="ui radio checkbox">
  83. <input type="radio" checked="" name="alone">
  84. <label>Yes</label>
  85. </div>
  86. </div>
  87. <div class="field">
  88. <div class="ui radio checkbox">
  89. <input type="radio" name="alone">
  90. <label>No</label>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <h4 class="ui dividing header">Settings</h4>
  96. <h5 class="ui header">Privacy</h5>
  97. <div class="field">
  98. <div class="ui toggle checkbox">
  99. <input type="radio" name="privacy">
  100. <label>Allow <b>anyone</b> to see my account</label>
  101. </div>
  102. </div>
  103. <div class="field">
  104. <div class="ui toggle checkbox">
  105. <input type="radio" name="privacy">
  106. <label>Allow <b>only friends</b> to see my account</label>
  107. </div>
  108. </div>
  109. <h5 class="ui header">Newsletter Subscriptions</h5>
  110. <div class="field">
  111. <div class="ui slider checkbox">
  112. <input type="checkbox" name="top-posts">
  113. <label>Top Posts This Week</label>
  114. </div>
  115. </div>
  116. <div class="field">
  117. <div class="ui slider checkbox">
  118. <input type="checkbox" name="hot-deals">
  119. <label>Hot Deals</label>
  120. </div>
  121. </div>
  122. <div class="field">
  123. <div class="ui checkbox">
  124. <input type="checkbox" name="hot-deals">
  125. <label>I agree to the <a href="#">Terms of Service</a>.</label>
  126. </div>
  127. </div>
  128. <div class="ui error message">
  129. <div class="header">We noticed some issues</div>
  130. </div>
  131. <div class="ui submit button">Register</div>
  132. </div>
  133. </div>
  134. <h2 class="ui dividing header">Elements</h2>
  135. <div class="example">
  136. <h4 class="ui header">Field</h4>
  137. <p>A field is a form element containing a label and an input</p>
  138. <div class="ui form">
  139. <div class="field">
  140. <label>User Input</label>
  141. <input type="text">
  142. </div>
  143. </div>
  144. </div>
  145. <div class="example">
  146. <h4 class="ui header">Text Area</h4>
  147. <p>A textarea uses the default form element</p>
  148. <div class="ui form">
  149. <div class="field">
  150. <label>User Text</label>
  151. <textarea></textarea>
  152. </div>
  153. </div>
  154. </div>
  155. <div class="example">
  156. <h4 class="ui header">Checkbox</h4>
  157. <p><a href="/modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
  158. <div class="evaluated code" data-type="javascript" data-label="true">
  159. $('.ui.checkbox')
  160. .checkbox()
  161. ;
  162. </div>
  163. <div class="ui form">
  164. <div class="inline field">
  165. <div class="ui checkbox">
  166. <input type="checkbox" />
  167. <label>Checkbox</label>
  168. </div>
  169. </div>
  170. <div class="inline field">
  171. <div class="ui slider checkbox">
  172. <input type="checkbox" />
  173. <label>Slider</label>
  174. </div>
  175. <label></label>
  176. </div>
  177. <div class="inline field">
  178. <div class="ui toggle checkbox">
  179. <input type="checkbox" />
  180. <label>Toggle</label>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <div class="form example">
  186. <h4 class="ui header">Select</h4>
  187. <p>A selection dropdown, a type of <a href="/modules/dropdown.html">ui dropdown</a> can be used to allow for a selection from multiple choices</p>
  188. <div class="evaluated code" data-type="javascript" data-label="true">
  189. $('.ui.selection.dropdown')
  190. .dropdown()
  191. ;
  192. </div>
  193. <div class="ui form">
  194. <div class="ui selection dropdown">
  195. <input type="hidden" name="gender">
  196. <div class="default text">Gender</div>
  197. <i class="dropdown icon"></i>
  198. <div class="menu">
  199. <div class="item" data-value="male">Male</div>
  200. <div class="item" data-value="female">Female</div>
  201. </div>
  202. </div>
  203. </div>
  204. </div>
  205. <div class="example">
  206. <h4 class="ui header">Radio Box</h4>
  207. <p>Radio boxes are styled forms of standard form radio controls.</p>
  208. <div class="evaluated code" data-type="javascript" data-label="true">
  209. $('.ui.radio.checkbox')
  210. .checkbox()
  211. ;
  212. </div>
  213. <div class="ui form">
  214. <div class="inline fields">
  215. <label for="fruit">Select your favorite fruit:</label>
  216. <div class="field">
  217. <div class="ui radio checkbox">
  218. <input type="radio" name="fruit" checked />
  219. <label>Apples</label>
  220. </div>
  221. </div>
  222. <div class="field">
  223. <div class="ui radio checkbox">
  224. <input type="radio" name="fruit" />
  225. <label>Oranges</label>
  226. </div>
  227. </div>
  228. <div class="field">
  229. <div class="ui radio checkbox">
  230. <input type="radio" name="fruit" />
  231. <label>Pears</label>
  232. </div>
  233. </div>
  234. <div class="field">
  235. <div class="ui radio checkbox">
  236. <input type="radio" name="fruit" />
  237. <label>Grapefruit</label>
  238. </div>
  239. </div>
  240. </div>
  241. <div class="grouped fields">
  242. <label for="fruit">Select your second favorite fruit:</label>
  243. <div class="field">
  244. <div class="ui radio checkbox">
  245. <input type="radio" name="fruit" checked />
  246. <label>Apples</label>
  247. </div>
  248. </div>
  249. <div class="field">
  250. <div class="ui radio checkbox">
  251. <input type="radio" name="fruit" />
  252. <label>Oranges</label>
  253. </div>
  254. </div>
  255. <div class="field">
  256. <div class="ui radio checkbox">
  257. <input type="radio" name="fruit" />
  258. <label>Pears</label>
  259. </div>
  260. </div>
  261. <div class="field">
  262. <div class="ui radio checkbox">
  263. <input type="radio" name="fruit" />
  264. <label>Grapefruit</label>
  265. </div>
  266. </div>
  267. </div>
  268. </div>
  269. </div>
  270. <div class="example">
  271. <h4 class="ui header">Text Block</h4>
  272. <p>Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.</p>
  273. <div class="ui form">
  274. <div class="ui message">
  275. <div class="header">We had some issues</div>
  276. <ul class="list">
  277. <li>Please enter your first name</li>
  278. <li>Please enter your last name</li>
  279. </ul>
  280. </div>
  281. </div>
  282. </div>
  283. <h2 class="ui dividing header">States</h2>
  284. <h3 class="ui header">Form</h3>
  285. <div class="example">
  286. <h4 class="ui header">Loading</h4>
  287. <p>If a form is in loading state, it will automatically show a loading indicator:</p>
  288. <div class="ui loading form segment">
  289. <div class="two fields">
  290. <div class="field">
  291. <label>First Name</label>
  292. <input placeholder="First Name" type="text">
  293. </div>
  294. <div class="field">
  295. <label>Last Name</label>
  296. <input placeholder="Last Name" type="text">
  297. </div>
  298. </div>
  299. <div class="field">
  300. <label>Gender</label>
  301. <div class="ui selection dropdown" tab-index="2">
  302. <div class="default text">Select</div>
  303. <i class="dropdown icon"></i>
  304. <input type="hidden" name="gender">
  305. <div class="menu">
  306. <div class="item" data-value="male">Male</div>
  307. <div class="item" data-value="female">Female</div>
  308. </div>
  309. </div>
  310. </div>
  311. <div class="field">
  312. <label>Username</label>
  313. <input placeholder="Username" type="text">
  314. </div>
  315. <div class="field">
  316. <label>Password</label>
  317. <input type="password">
  318. </div>
  319. <div class="inline field">
  320. <div class="ui checkbox">
  321. <input type="checkbox" />
  322. <label>I agree to the terms and conditions</label>
  323. </div>
  324. </div>
  325. <div class="ui submit button">Submit</div>
  326. </div>
  327. </div>
  328. <div class="example">
  329. <h4 class="ui header">Error</h4>
  330. <p>If a form is in an error state, it will automatically show any error message blocks:</p>
  331. <div class="ui error form segment">
  332. <div class="ui error message">
  333. <div class="header">Action Forbidden</div>
  334. <p>You can only sign up for an account once with a given e-mail address.</p>
  335. </div>
  336. <div class="two fields">
  337. <div class="field">
  338. <label>First Name</label>
  339. <input placeholder="First Name" type="text">
  340. </div>
  341. <div class="field">
  342. <label>Last Name</label>
  343. <input placeholder="Last Name" type="text">
  344. </div>
  345. </div>
  346. <div class="field">
  347. <label>Gender</label>
  348. <div class="ui selection dropdown">
  349. <div class="default text">Select Gender</div>
  350. <i class="dropdown icon"></i>
  351. <input type="hidden" name="gender">
  352. <div class="menu">
  353. <div class="item" data-value="male">Male</div>
  354. <div class="item" data-value="female">Female</div>
  355. </div>
  356. </div>
  357. </div>
  358. <div class="field">
  359. <label>Username</label>
  360. <input placeholder="Username" type="text">
  361. </div>
  362. <div class="field">
  363. <label>Password</label>
  364. <input type="password">
  365. </div>
  366. <div class="inline field">
  367. <div class="ui checkbox">
  368. <input type="checkbox" />
  369. <label>I agree to the Terms and Conditions</label>
  370. </div>
  371. </div>
  372. <div class="ui submit button">Submit</div>
  373. </div>
  374. </div>
  375. <div class="example">
  376. <h4 class="ui header">Warning</h4>
  377. <p>If a form is in warning state, it will automatically show any warning message block:</p>
  378. <div class="ui warning form segment">
  379. <div class="ui warning message">
  380. <div class="header">Could you check something!</div>
  381. <ul class="list">
  382. <li>You forgot your <b>first name</b></li>
  383. <li>And also your <b>last name</b></li>
  384. </ul>
  385. </div>
  386. <div class="two fields">
  387. <div class="field">
  388. <label>First Name</label>
  389. <input placeholder="First Name" type="text">
  390. </div>
  391. <div class="field">
  392. <label>Last Name</label>
  393. <input placeholder="Last Name" type="text">
  394. </div>
  395. </div>
  396. <div class="field">
  397. <label>Username</label>
  398. <input placeholder="Username" type="text">
  399. </div>
  400. <div class="field">
  401. <label>Password</label>
  402. <input type="password">
  403. </div>
  404. <div class="inline field">
  405. <div class="ui checkbox">
  406. <input type="checkbox" />
  407. <label>I agree to the Terms and Conditions</label>
  408. </div>
  409. </div>
  410. <div class="ui submit button">Submit</div>
  411. </div>
  412. </div>
  413. <h3 class="ui header">Form Fields</h3>
  414. <div class="example">
  415. <h4 class="ui header">Error</h4>
  416. <p>Individual fields may contain an error state</p>
  417. <div class="ui form">
  418. <div class="two fields">
  419. <div class="field error">
  420. <label>First Name</label>
  421. <input placeholder="First Name" type="text">
  422. </div>
  423. <div class="field">
  424. <label>Last Name</label>
  425. <input placeholder="Last Name" type="text">
  426. </div>
  427. </div>
  428. <div class="field error">
  429. <label>Gender</label>
  430. <div class="ui selection dropdown">
  431. <div class="default text">Select</div>
  432. <i class="dropdown icon"></i>
  433. <input type="hidden" name="gender">
  434. <div class="menu">
  435. <div class="item" data-value="male">Male</div>
  436. <div class="item" data-value="female">Female</div>
  437. </div>
  438. </div>
  439. </div>
  440. <div class="inline error field">
  441. <div class="ui checkbox">
  442. <input type="checkbox" />
  443. <label>I agree to the Terms and Conditions</label>
  444. </div>
  445. </div>
  446. </div>
  447. </div>
  448. <div class="example">
  449. <h4 class="ui header">Disabled</h4>
  450. <p>Individual fields may be disabled or read only</p>
  451. <div class="ui form">
  452. <div class="two fields">
  453. <div class="field">
  454. <label>First Name</label>
  455. <input placeholder="Read Only" readonly="readonly" type="text">
  456. </div>
  457. <div class="disabled field">
  458. <label>Last Name</label>
  459. <input placeholder="Disabled" disabled="disabled" type="text">
  460. </div>
  461. </div>
  462. </div>
  463. </div>
  464. <h2 class="ui dividing header">Variations</h2>
  465. <h3 class="ui header">Forms</h3>
  466. <div class="example">
  467. <h4 class="ui header">Fluid</h4>
  468. <p>A form can take the width of its container</p>
  469. <div class="ui fluid form segment">
  470. <div class="two fields">
  471. <div class="field">
  472. <label>First Name</label>
  473. <input placeholder="First Name" type="text">
  474. </div>
  475. <div class="field">
  476. <label>Last Name</label>
  477. <input placeholder="Last Name" type="text">
  478. </div>
  479. </div>
  480. <div class="ui submit button">Submit</div>
  481. </div>
  482. </div>
  483. <div class="example">
  484. <h4 class="ui header">Size</h4>
  485. <p>A form can also be small or large</p>
  486. <div class="ui small form segment">
  487. <div class="two fields">
  488. <div class="field">
  489. <label>First Name</label>
  490. <input placeholder="First Name" type="text">
  491. </div>
  492. <div class="field">
  493. <label>Last Name</label>
  494. <input placeholder="Last Name" type="text">
  495. </div>
  496. </div>
  497. <div class="ui submit button">Submit</div>
  498. </div>
  499. <br><br>
  500. <div class="ui large form segment">
  501. <div class="two fields">
  502. <div class="field">
  503. <label>First Name</label>
  504. <input placeholder="First Name" type="text">
  505. </div>
  506. <div class="field">
  507. <label>Last Name</label>
  508. <input placeholder="Last Name" type="text">
  509. </div>
  510. </div>
  511. <div class="ui submit button">Submit</div>
  512. </div>
  513. </div>
  514. <div class="example">
  515. <h4 class="ui header">Inverted</h4>
  516. <p>A form on a dark background may have to invert its color scheme</p>
  517. <div style="background-color: #000; padding: 15px;">
  518. <div class="ui inverted form">
  519. <div class="ui info message">
  520. <div class="header">We had some issues</div>
  521. <ul class="list">
  522. <li>Please enter your first name</li>
  523. <li>Please enter your last name</li>
  524. </ul>
  525. </div>
  526. <div class="two fields">
  527. <div class="field">
  528. <label>First Name</label>
  529. <input placeholder="First Name" type="text">
  530. </div>
  531. <div class="field">
  532. <label>Last Name</label>
  533. <input placeholder="Last Name" type="text">
  534. </div>
  535. </div>
  536. <div class="inline field">
  537. <div class="ui checkbox">
  538. <input type="checkbox" />
  539. <label>I agree to the terms and conditions</label>
  540. </div>
  541. </div>
  542. <div class="ui submit button">Submit</div>
  543. </div>
  544. </div>
  545. </div>
  546. <h3 class="ui header">Fields</h3>
  547. <div class="example">
  548. <h4 class="ui header">Inline</h4>
  549. <p>A field can have its label next to instead of above it.</p>
  550. <div class="ui form">
  551. <div class="inline field">
  552. <label>Last name</label>
  553. <input type="text" placeholder="Full Name">
  554. </div>
  555. </div>
  556. </div>
  557. <div class="example">
  558. <h4 class="ui header">Required</h4>
  559. <p>A field can format itself to show that an input is mandatory</p>
  560. <div class="ui form">
  561. <div class="required field">
  562. <label>Last name</label>
  563. <input type="text" placeholder="Full Name">
  564. </div>
  565. <div class="required inline field">
  566. <div class="ui checkbox">
  567. <input type="checkbox" />
  568. <label>I agree to the terms and conditions</label>
  569. </div>
  570. </div>
  571. </div>
  572. </div>
  573. <h2 class="ui dividing header">Groups</h2>
  574. <div class="example">
  575. <h4 class="ui header">Fields</h4>
  576. <p>Fields can exist together side by side</p>
  577. <div class="ui ignored positive icon message">
  578. <i class="mobile icon"></i>
  579. <div class="content">
  580. <h3 class="header">Responsive Element</h3>
  581. <p>Split Width Fields automatically receive responsive styling, swapping to one field per row for mobile.</p>
  582. </div>
  583. </div>
  584. <div class="ui form">
  585. <div class="ui three fields">
  586. <div class="field">
  587. <label>First name</label>
  588. <input type="text" placeholder="First Name">
  589. </div>
  590. <div class="field">
  591. <label>Middle name</label>
  592. <input type="text" placeholder="Middle Name">
  593. </div>
  594. <div class="field">
  595. <label>Last name</label>
  596. <input type="text" placeholder="Last Name">
  597. </div>
  598. </div>
  599. </div>
  600. </div>
  601. <div class="example">
  602. <h4 class="ui header">Grouped Fields</h4>
  603. <p>Fields can be grouped to show related choices</p>
  604. <div class="ui form">
  605. <div class="grouped fields">
  606. <div class="field">
  607. <div class="ui radio checkbox">
  608. <input type="radio" name="fruit" />
  609. <label>Apples</label>
  610. </div>
  611. </div>
  612. <div class="field">
  613. <div class="ui radio checkbox">
  614. <input type="radio" name="fruit" />
  615. <label>Oranges</label>
  616. </div>
  617. </div>
  618. <div class="field">
  619. <div class="ui radio checkbox">
  620. <input type="radio" name="fruit" />
  621. <label>Pears</label>
  622. </div>
  623. </div>
  624. <div class="field">
  625. <div class="ui radio checkbox">
  626. <input type="radio" name="fruit" />
  627. <label>Grapefruit</label>
  628. </div>
  629. </div>
  630. </div>
  631. </div>
  632. </div>
  633. <div class="example">
  634. <h4 class="ui header">Inline</h4>
  635. <p>Multiple fields may be inline in a row</p>
  636. <div class="ui form">
  637. <div class="inline fields">
  638. <div class="field">
  639. <label>Phone Number</label>
  640. <input type="text" placeholder="(xxx)">
  641. </div>
  642. <div class="field">
  643. <input type="text" placeholder="xxx">
  644. </div>
  645. <div class="field">
  646. <input type="text" placeholder="xxxx">
  647. </div>
  648. </div>
  649. </div>
  650. </div>
  651. </div>