PageRenderTime 52ms CodeModel.GetById 18ms RepoModel.GetById 0ms app.codeStats 0ms

/forms.html

https://gitlab.com/x33n/materialize
HTML | 801 lines | 750 code | 40 blank | 11 comment | 0 complexity | b94fcfd1b3a7508dbd94bc95e16828a7 MD5 | raw file
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    6. 

  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7. 

  7.     <meta name="msapplication-tap-highlight" content="no">
    8. 

  8.     <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
    9. 

  9.     <title>Forms - Materialize</title>
    10. 

  10.     <!-- Favicons-->
    11. 

  11.     <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
    12. 

  12.     <meta name="msapplication-TileColor" content="#FFFFFF">
    13. 

  13.     <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
    14. 

  14.     <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
    15. 

  15.     <!--  Android 5 Chrome Color-->
    16. 

  16.     <meta name="theme-color" content="#EE6E73">
    17. 

  17.     <!-- CSS-->
    18. 

  18.     <link href="css/prism.css" rel="stylesheet">
    19. 

  19.     <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
    20. 

  20.     <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
    21. 

  21.     <script>
    22. 

  22.       window.liveSettings = {
    23. 

  23.         api_key: "a0b49b34b93844c38eaee15690d86413",
    24. 

  24.         picker: "bottom-right",
    25. 

  25.         detectlang: true,
    26. 

  26.         dynamic: true,
    27. 

  27.         autocollect: true
    28. 

  28.       };
    29. 

  29.     </script>
    30. 

  30.     <script src="//cdn.transifex.com/live.js"></script>
    31. 

  31.   </head>
    32. 

  32.   <body>
    33. 

  33.     <header>
    34. 

  34.       <nav class="top-nav">
    35. 

  35.         <div class="container">
    36. 

  36.           <div class="nav-wrapper"><a class="page-title">Forms</a></div>
    37. 

  37.         </div>
    38. 

  38.       </nav>
    39. 

  39.       <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full"><i class="mdi-navigation-menu"></i></a></div>
    40. 

  40.       <ul id="nav-mobile" class="side-nav fixed">
    41. 

  41.         <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
    42. 

  42.             <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
    43. 

  43.         <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
    44. 

  44.         <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
    45. 

  45.         <li class="no-padding">
    46. 

  46.           <ul class="collapsible collapsible-accordion">
    47. 

  47.             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">CSS</a>
    48. 

  48.               <div class="collapsible-body">
    49. 

  49.                 <ul>
    50. 

  50.                   <li><a href="color.html">Color</a></li>
    51. 

  51.                   <li><a href="grid.html">Grid</a></li>
    52. 

  52.                   <li><a href="helpers.html">Helpers</a></li>
    53. 

  53.                   <li><a href="media-css.html">Media</a></li>
    54. 

  54.                   <li><a href="sass.html">Sass</a></li>
    55. 

  55.                   <li><a href="shadow.html">Shadow</a></li>
    56. 

  56.                   <li><a href="table.html">Table</a></li>
    57. 

  57.                   <li><a href="typography.html">Typography</a></li>
    58. 

  58.                 </ul>
    59. 

  59.               </div>
    60. 

  60.             </li>
    61. 

  61.             <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
    62. 

  62.               <div class="collapsible-body">
    63. 

  63.                 <ul>
    64. 

  64.                   <li><a href="badges.html">Badges</a></li>
    65. 

  65.                   <li><a href="buttons.html">Buttons</a></li>
    66. 

  66.                   <li><a href="cards.html">Cards</a></li>
    67. 

  67.                   <li><a href="collections.html">Collections</a></li>
    68. 

  68.                   <li><a href="footer.html">Footer</a></li>
    69. 

  69.                   <li class="active"><a href="forms.html">Forms</a></li>
    70. 

  70.                   <li><a href="icons.html">Icons</a></li>
    71. 

  71.                   <li><a href="navbar.html">Navbar</a></li>
    72. 

  72.                   <li><a href="pagination.html">Pagination</a></li>
    73. 

  73.                   <li><a href="preloader.html">Preloader</a></li>
    74. 

  74.                 </ul>
    75. 

  75.               </div>
    76. 

  76.             </li>
    77. 

  77.             <li class="bold"><a class="collapsible-header  waves-effect waves-teal">JavaScript</a>
    78. 

  78.               <div class="collapsible-body">
    79. 

  79.                 <ul>
    80. 

  80.                   <li><a href="collapsible.html">Collapsible</a></li>
    81. 

  81.                   <li><a href="dialogs.html">Dialogs</a></li>
    82. 

  82.                   <li><a href="dropdown.html">Dropdown</a></li>
    83. 

  83.                   <li><a href="media.html">Media</a></li>
    84. 

  84.                   <li><a href="modals.html">Modals</a></li>
    85. 

  85.                   <li><a href="parallax.html">Parallax</a></li>
    86. 

  86.                   <li><a href="pushpin.html">Pushpin</a></li>
    87. 

  87.                   <li><a href="scrollfire.html">ScrollFire</a></li>
    88. 

  88.                   <li><a href="scrollspy.html">Scrollspy</a></li>
    89. 

  89.                   <li><a href="side-nav.html">SideNav</a></li>
    90. 

  90.                   <li><a href="tabs.html">Tabs</a></li>
    91. 

  91.                   <li><a href="transitions.html">Transitions</a></li>
    92. 

  92.                   <li><a href="waves.html">Waves</a></li>
    93. 

  93.                 </ul>
    94. 

  94.               </div>
    95. 

  95.             </li>
    96. 

  96.           </ul>
    97. 

  97.         </li>
    98. 

  98.         <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
    99. 

  99.         <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
    100. 

  100.       </ul>
    101. 

  101.     </header>
    102. 

  102.     <main><div class="container">
    103. 

  103.   <div class="row">
    104. 

  104. 

  105.     <div class="col s12 m9 l10">
    106. 

  106. 

  107.       <div id="input" class="section scrollspy">
    108. 

  108.         <p class="caption">
    109. 

  109.           Forms are the standard way to receive user inputted data. The transitions and smoothness of these elements are very important because of the inherent user interaction associated with forms.
    110. 

  110.         </p>
    111. 

  111. 

  112.         <h2 class="header">Input fields</h2>
    113. 

  113.         <p>Text fields allow user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a <code class="language-markup">.input-field</code> div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.</p>
    114. 

  114.         <p>If you don't want the Green and Red validation states, just remove the <code class="language-markup">validate</code> class from your inputs.</p>
    115. 

  115.         <br>
    116. 

  116.         <div class="row">
    117. 

  117.           <form class="col s12">
    118. 

  118.             <div class="row">
    119. 

  119.               <div class="input-field col s6">
    120. 

  120.                 <input placeholder="Placeholder" id="first_name" type="text" class="validate">
    121. 

  121.                 <label for="first_name">First Name</label>
    122. 

  122.               </div>
    123. 

  123.               <div class="input-field col s6">
    124. 

  124.                 <input id="last_name" type="text">
    125. 

  125.                 <label for="last_name">Last Name</label>
    126. 

  126.               </div>
    127. 

  127.             </div>
    128. 

  128.             <div class="row">
    129. 

  129.               <div class="input-field col s12">
    130. 

  130.                 <input disabled value="I am not editable" id="disabled" type="text" class="validate">
    131. 

  131.                 <label for="disabled">Disabled</label>
    132. 

  132.               </div>
    133. 

  133.             </div>
    134. 

  134.             <div class="row">
    135. 

  135.               <div class="input-field col s12">
    136. 

  136.                 <input id="password" type="password" class="validate">
    137. 

  137.                 <label for="password">Password</label>
    138. 

  138.               </div>
    139. 

  139.             </div>
    140. 

  140.             <div class="row">
    141. 

  141.               <div class="input-field col s12">
    142. 

  142.                 <input id="email" type="email" class="validate">
    143. 

  143.                 <label for="email">Email</label>
    144. 

  144.               </div>
    145. 

  145.             </div>
    146. 

  146.           </form>
    147. 

  147.         </div>
    148. 

  148.         <pre><code class="language-markup">
    149. 

  149.   &lt;div class="row">
    150. 

  150.     &lt;form class="col s12">
    151. 

  151.       &lt;div class="row">
    152. 

  152.         &lt;div class="input-field col s6">
    153. 

  153.           &lt;input placeholder="Placeholder" id="first_name" type="text" class="validate">
    154. 

  154.           &lt;label for="first_name">First Name&lt;/label>
    155. 

  155.         &lt;/div>
    156. 

  156.         &lt;div class="input-field col s6">
    157. 

  157.           &lt;input id="last_name" type="text" class="validate">
    158. 

  158.           &lt;label for="last_name">Last Name&lt;/label>
    159. 

  159.         &lt;/div>
    160. 

  160.       &lt;/div>
    161. 

  161.       &lt;div class="row">
    162. 

  162.         &lt;div class="input-field col s12">
    163. 

  163.           &lt;input disabled value="I am not editable" id="disabled" type="text" class="validate">
    164. 

  164.           &lt;label for="disabled">Disabled&lt;/label>
    165. 

  165.         &lt;/div>
    166. 

  166.       &lt;/div>
    167. 

  167.       &lt;div class="row">
    168. 

  168.         &lt;div class="input-field col s12">
    169. 

  169.           &lt;input id="password" type="password" class="validate">
    170. 

  170.           &lt;label for="password">Password&lt;/label>
    171. 

  171.         &lt;/div>
    172. 

  172.       &lt;/div>
    173. 

  173.       &lt;div class="row">
    174. 

  174.         &lt;div class="input-field col s12">
    175. 

  175.           &lt;input id="email" type="email" class="validate">
    176. 

  176.           &lt;label for="email">Email&lt;/label>
    177. 

  177.         &lt;/div>
    178. 

  178.       &lt;/div>
    179. 

  179.     &lt;/form>
    180. 

  180.   &lt;/div>
    181. 

  181.         </code></pre><br>
    182. 

  182.         <h4>Prefilling Text Inputs</h4>
    183. 

  183.         <p>If you are having trouble with the labels overlapping prefilled content, Try adding <code class="language-markup">class="active"</code> to the label</p>
    184. 

  184.         <div class="row">
    185. 

  185.           <div class="input-field col s6">
    186. 

  186.             <input value="Alvin" id="first_name2" type="text" class="validate">
    187. 

  187.             <label class="active" for="first_name2">First Name</label>
    188. 

  188.           </div>
    189. 

  189.         </div>
    190. 

  190. 

  191.         <pre><code class="language-markup">
    192. 

  192.   &lt;div class="row">
    193. 

  193.     &lt;div class="input-field col s6">
    194. 

  194.       &lt;input value="Alvin" id="first_name2" type="text" class="validate">
    195. 

  195.       &lt;label class="active" for="first_name2">First Name&lt;/label>
    196. 

  196.     &lt;/div>
    197. 

  197.   &lt;/div>
    198. 

  198.         </code></pre>
    199. 

  199. 

  200.         <h4>Icon Prefixes</h4>
    201. 

  201.         <p>You can add an icon prefix to make the form input label even more clear. Just add an icon with the class <code class="language-markup">prefix</code> before the input and label.</p><br>
    202. 

  202.         <div class="row">
    203. 

  203.           <form class="col s12">
    204. 

  204.             <div class="row">
    205. 

  205.               <div class="input-field col s6">
    206. 

  206.                 <i class="mdi-action-account-circle prefix"></i>
    207. 

  207.                 <input id="icon_prefix" type="text" class="validate">
    208. 

  208.                 <label for="icon_prefix">First Name</label>
    209. 

  209.               </div>
    210. 

  210.               <div class="input-field col s6">
    211. 

  211.                 <i class="mdi-communication-phone prefix"></i>
    212. 

  212.                 <input id="icon_telephone" type="tel" class="validate">
    213. 

  213.                 <label for="icon_telephone">Telephone</label>
    214. 

  214.               </div>
    215. 

  215.             </div>
    216. 

  216.           </form>
    217. 

  217.         </div>
    218. 

  218. 

  219.         <pre><code class="language-markup">
    220. 

  220.   &lt;div class="row">
    221. 

  221.     &lt;form class="col s12">
    222. 

  222.       &lt;div class="row">
    223. 

  223.         &lt;div class="input-field col s6">
    224. 

  224.           &lt;i class="mdi-action-account-circle prefix">&lt;/i>
    225. 

  225.           &lt;input id="icon_prefix" type="text" class="validate">
    226. 

  226.           &lt;label for="icon_prefix">First Name&lt;/label>
    227. 

  227.         &lt;/div>
    228. 

  228.         &lt;div class="input-field col s6">
    229. 

  229.           &lt;i class="mdi-communication-phone prefix">&lt;/i>
    230. 

  230.           &lt;input id="icon_telephone" type="tel" class="validate">
    231. 

  231.           &lt;label for="icon_telephone">Telephone&lt;/label>
    232. 

  232.         &lt;/div>
    233. 

  233.       &lt;/div>
    234. 

  234.     &lt;/form>
    235. 

  235.   &lt;/div>
    236. 

  236.         </code></pre>
    237. 

  237. 

  238. 

  239.         <h4>Changing colors</h4>
    240. 

  240.         <p>Here is a CSS template for modifying input fields in CSS. With Sass, you can achieve this by just changing a variable. The CSS shown below is unprefixed. Depending on what you use, you may have to change the type attribute selector.</p>
    241. 

  241.         <pre><code class="language-css">
    242. 

  242.   /* label color */
    243. 

  243.    .input-field label {
    244. 

  244.      color: #000;
    245. 

  245.    }
    246. 

  246.    /* label focus color */
    247. 

  247.    .input-field input[type=text]:focus + label {
    248. 

  248.      color: #000;
    249. 

  249.    }
    250. 

  250.    /* label underline focus color */
    251. 

  251.    .input-field input[type=text]:focus {
    252. 

  252.      border-bottom: 1px solid #000;
    253. 

  253.      box-shadow: 0 1px 0 0 #000;
    254. 

  254.    }
    255. 

  255.    /* valid color */
    256. 

  256.    .input-field input[type=text].valid {
    257. 

  257.      border-bottom: 1px solid #000;
    258. 

  258.      box-shadow: 0 1px 0 0 #000;
    259. 

  259.    }
    260. 

  260.    /* invalid color */
    261. 

  261.    .input-field input[type=text].invalid {
    262. 

  262.      border-bottom: 1px solid #000;
    263. 

  263.      box-shadow: 0 1px 0 0 #000;
    264. 

  264.    }
    265. 

  265.    /* icon prefix focus color */
    266. 

  266.    .input-field .prefix.active {
    267. 

  267.      color: #000;
    268. 

  268.    }
    269. 

  269.         </code></pre>
    270. 

  270.       </div>
    271. 

  271. 

  272. 

  273.       <!-- Textarea Section -->
    274. 

  274.       <div id="textarea" class="section scrollspy">
    275. 

  275.         <h2 class="header">Textarea</h2>
    276. 

  276.         <p>Textareas allow larger expandable user input. The border should light up simply and clearly indicating which field the user is currently editing. You must have a <code class="language-markup">.input-field</code> div wrapping your input and label. This helps our jQuery animate the label. This is only used in our Input and Textarea form elements.</p>
    277. 

  277.         <p><strong>Textareas will auto resize to the text inside.</strong></p>
    278. 

  278.         <div class="row">
    279. 

  279.           <form class="col s12">
    280. 

  280.             <div class="row">
    281. 

  281.               <div class="input-field col s12">
    282. 

  282.                 <textarea id="textarea1" class="materialize-textarea"></textarea>
    283. 

  283.                 <label for="textarea1">Textarea</label>
    284. 

  284.               </div>
    285. 

  285.             </div>
    286. 

  286.           </form>
    287. 

  287.         </div>
    288. 

  288.         <pre><code class="language-markup">
    289. 

  289.   &lt;div class="row">
    290. 

  290.     &lt;form class="col s12">
    291. 

  291.       &lt;div class="row">
    292. 

  292.         &lt;div class="input-field col s12">
    293. 

  293.           &lt;textarea id="textarea1" class="materialize-textarea">&lt;/textarea>
    294. 

  294.           &lt;label for="textarea1">Textarea&lt;/label>
    295. 

  295.         &lt;/div>
    296. 

  296.       &lt;/div>
    297. 

  297.     &lt;/form>
    298. 

  298.   &lt;/div>
    299. 

  299.         </code></pre><br>
    300. 

  300. 

  301.         <h4>Icon Prefixes</h4>
    302. 

  302.         <p>You can add an icon prefix to make the form input label even more clear. Just add an icon with the class <code class="language-markup">prefix</code> before the input and label.</p><br>
    303. 

  303.         <div class="row">
    304. 

  304.           <form class="col s12">
    305. 

  305.             <div class="row">
    306. 

  306.               <div class="input-field col s12">
    307. 

  307.                 <i class="mdi-editor-mode-edit prefix"></i>
    308. 

  308.                 <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
    309. 

  309.                 <label for="icon_prefix2">Message</label>
    310. 

  310.               </div>
    311. 

  311.             </div>
    312. 

  312.           </form>
    313. 

  313.         </div>
    314. 

  314. 

  315.         <pre><code class="language-markup">
    316. 

  316.   &lt;div class="row">
    317. 

  317.     &lt;form class="col s12">
    318. 

  318.       &lt;div class="row">
    319. 

  319.         &lt;div class="input-field col s6">
    320. 

  320.           &lt;i class="mdi-editor-mode-edit prefix">&lt;/i>
    321. 

  321.           &lt;textarea id="icon_prefix2" class="materialize-textarea">&lt;/textarea>
    322. 

  322.           &lt;label for="icon_prefix2">First Name&lt;/label>
    323. 

  323.         &lt;/div>
    324. 

  324.       &lt;/div>
    325. 

  325.     &lt;/form>
    326. 

  326.   &lt;/div>
    327. 

  327.         </code></pre>
    328. 

  328.       </div>
    329. 

  329.       <div id="select" class="section scrollspy">
    330. 

  330.         <h2 class="header">Select</h2>
    331. 

  331.         <p> Select allows user input through specified options. </p>
    332. 

  332.         <div class="row">
    333. 

  333.           <form class="col s12 m6">
    334. 

  334.             <div class="row">
    335. 

  335.               <div class="col s12">
    336. 

  336.                 <label>Materialize Select</label>
    337. 

  337.                 <select>
    338. 

  338.                   <option value="" disabled selected>Choose your option</option>
    339. 

  339.                   <option value="1">Option 1</option>
    340. 

  340.                   <option value="2">Option 2</option>
    341. 

  341.                   <option value="3">Option 3</option>
    342. 

  342.                 </select>
    343. 

  343.               </div>
    344. 

  344.               <div class="col s12">
    345. 

  345.                 <br>
    346. 

  346.                 <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
    347. 

  347.                 <label>Browser Select</label>
    348. 

  348.                 <select class="browser-default">
    349. 

  349.                   <option value="" disabled selected>Choose your option</option>
    350. 

  350.                   <option value="1">Option 1</option>
    351. 

  351.                   <option value="2">Option 2</option>
    352. 

  352.                   <option value="3">Option 3</option>
    353. 

  353.                 </select>
    354. 

  354.               </div>
    355. 

  355.             </div>
    356. 

  356.           </form>
    357. 

  357.           <div class="col s12">
    358. 

  358.             <pre><code class="language-markup">
    359. 

  359.   &lt;label>Materialize Select&lt;/label>
    360. 

  360.   &lt;select>
    361. 

  361.     &lt;option value="" disabled selected>Choose your option&lt;/option>
    362. 

  362.     &lt;option value="1">Option 1&lt;/option>
    363. 

  363.     &lt;option value="2">Option 2&lt;/option>
    364. 

  364.     &lt;option value="3">Option 3&lt;/option>
    365. 

  365.   &lt;/select>
    366. 

  366. 

  367.   &lt;label>Browser Select&lt;/label>
    368. 

  368.   &lt;select class="browser-default">
    369. 

  369.     &lt;option value="" disabled selected>Choose your option&lt;/option>
    370. 

  370.     &lt;option value="1">Option 1&lt;/option>
    371. 

  371.     &lt;option value="2">Option 2&lt;/option>
    372. 

  372.     &lt;option value="3">Option 3&lt;/option>
    373. 

  373.   &lt;/select>
    374. 

  374.             </code></pre>
    375. 

  375.           </div>
    376. 

  376.           <div class="col s12">
    377. 

  377.             <br><br>
    378. 

  378.             <h4>Disabled Styles</h4>
    379. 

  379.             <p>You can also add <code class="language-markup">disabled</code> to the select element to make the whole thing disabled. Or if you add <code class="language-markup">disabled</code> to the options, the individual options will be unselectable. </p>
    380. 

  380.           </div>
    381. 

  381.           <form class="col s12 m6">
    382. 

  382.             <div class="row">
    383. 

  383.               <div class="col s12">
    384. 

  384.                 <label>Materialize Disabled</label>
    385. 

  385.                 <select disabled>
    386. 

  386.                   <option value="" disabled selected>Choose your option</option>
    387. 

  387.                   <option value="1">Option 1</option>
    388. 

  388.                   <option value="2">Option 2</option>
    389. 

  389.                   <option value="3">Option 3</option>
    390. 

  390.                 </select>
    391. 

  391.                 <label>Browser Disabled</label>
    392. 

  392.                 <select class="browser-default" disabled>
    393. 

  393.                   <option value="" disabled selected>Choose your option</option>
    394. 

  394.                   <option value="1">Option 1</option>
    395. 

  395.                   <option value="2">Option 2</option>
    396. 

  396.                   <option value="3">Option 3</option>
    397. 

  397.                 </select>
    398. 

  398.               </div>
    399. 

  399.             </div>
    400. 

  400.           </form>
    401. 

  401.           <div class="col s12">
    402. 

  402.             <pre><code class="language-markup">
    403. 

  403.   &lt;label>Materialize Disabled&lt;/label>
    404. 

  404.   &lt;select disabled>
    405. 

  405.     &lt;option value="" disabled selected>Choose your option&lt;/option>
    406. 

  406.     &lt;option value="1">Option 1&lt;/option>
    407. 

  407.     &lt;option value="2">Option 2&lt;/option>
    408. 

  408.     &lt;option value="3">Option 3&lt;/option>
    409. 

  409.   &lt;/select>
    410. 

  410. 

  411.   &lt;label>Browser Disabled&lt;/label>
    412. 

  412.   &lt;select class="browser-default" disabled>
    413. 

  413.     &lt;option value="" disabled selected>Choose your option&lt;/option>
    414. 

  414.     &lt;option value="1">Option 1&lt;/option>
    415. 

  415.     &lt;option value="2">Option 2&lt;/option>
    416. 

  416.     &lt;option value="3">Option 3&lt;/option>
    417. 

  417.   &lt;/select>
    418. 

  418.             </code></pre>
    419. 

  419.           </div>
    420. 

  420.           <div class="col s12">
    421. 

  421.             <h4>Initialization</h4>
    422. 

  422.             <p>You must initialize the select element as shown below. In addition, you will need a separate call for any dynamically generated select elements your page generates.</p>
    423. 

  423.             <pre><code class="language-javascript col s12">
    424. 

  424.   $(document).ready(function() {
    425. 

  425.     $('select').material_select();
    426. 

  426.   });
    427. 

  427.             </code></pre>
    428. 

  428.           </div>
    429. 

  429.           <div class="col s12">
    430. 

  430.             <h4>Updating/Destroying Select</h4>
    431. 

  431.             <p>If you want to update the items inside the select, just rerun the initialization code from above after editing the original select. Or you can destroy the material select with this function below, and create a new select altogether</p>
    432. 

  432.             <pre><code class="language-javascript">
    433. 

  433.   $('select').material_select('destroy');
    434. 

  434.             </code></pre>
    435. 

  435.           </div>
    436. 

  436.         </div>
    437. 

  437.       </div>
    438. 

  438. 

  439. 

  440.       <div id="radio" class="section scrollspy">
    441. 

  441.         <h2 class="header">Radio Buttons</h2>
    442. 

  442.         <p>Radio Buttons are used when the user must make only one selection out of a group of items</p>
    443. 

  443.         <form action="#">
    444. 

  444.           <p>
    445. 

  445.             <input name="group1" type="radio" id="test1" checked />
    446. 

  446.             <label for="test1">Red</label>
    447. 

  447.           </p>
    448. 

  448.           <p>
    449. 

  449.             <input name="group1" type="radio" id="test2" />
    450. 

  450.             <label for="test2">Yellow</label>
    451. 

  451.           </p>
    452. 

  452.           <p>
    453. 

  453.             <input class="with-gap" name="group1" type="radio" id="test3"  />
    454. 

  454.             <label for="test3">Green</label>
    455. 

  455.           </p>
    456. 

  456.             <p>
    457. 

  457.               <input name="group1" type="radio" id="test4" disabled="disabled" />
    458. 

  458.               <label for="test4">Brown</label>
    459. 

  459.           </p>
    460. 

  460.         </form>
    461. 

  461.         <p>Add radio buttons to a group by adding the name attribute along with the same corresponding value for each of the radio  buttons in the group. Create disabled radio buttons by adding the disabled attribute as shown below.</p>
    462. 

  462.         <pre><code class="language-markup">
    463. 

  463.   &lt;form action="#">
    464. 

  464.     &lt;p>
    465. 

  465.       &lt;input name="group1" type="radio" id="test1" />
    466. 

  466.       &lt;label for="test1">Red&lt;/label>
    467. 

  467.     &lt;/p>
    468. 

  468.     &lt;p>
    469. 

  469.       &lt;input name="group1" type="radio" id="test2" />
    470. 

  470.       &lt;label for="test2">Yellow&lt;/label>
    471. 

  471.     &lt;/p>
    472. 

  472.     &lt;p>
    473. 

  473.       &lt;input class="with-gap" name="group1" type="radio" id="test3"  />
    474. 

  474.       &lt;label for="test3">Green&lt;/label>
    475. 

  475.     &lt;/p>
    476. 

  476.       &lt;p>
    477. 

  477.         &lt;input name="group1" type="radio" id="test4" disabled="disabled" />
    478. 

  478.         &lt;label for="test4">Brown&lt;/label>
    479. 

  479.     &lt;/p>
    480. 

  480.   &lt;/form>
    481. 

  481.         </code></pre>
    482. 

  482.         <h4>Options</h4>
    483. 

  483.         <p>To create a radio button with a gap, add <code class="language-markup">class="with-gap"</code> to your input. See the example below.</p>
    484. 

  484. 

  485.         <p>
    486. 

  486.           <input class="with-gap" name="group3" type="radio" id="test5" checked />
    487. 

  487.           <label for="test5">Red</label>
    488. 

  488.         </p>
    489. 

  489.         <pre><code class="language-markup">
    490. 

  490.   &lt;p>
    491. 

  491.     &lt;input class="with-gap" name="group3" type="radio" id="test5" checked />
    492. 

  492.     &lt;label for="test5">Red&lt;/label>
    493. 

  493.   &lt;/p>
    494. 

  494.         </code></pre>
    495. 

  495. 

  496.       </div>
    497. 

  497. 

  498. 

  499.       <!-- Checkboxes -->
    500. 

  500.       <div id="checkbox" class="section scrollspy">
    501. 

  501.         <h2 class="header">Checkboxes</h2>
    502. 

  502.         <p>Checkboxes</p>
    503. 

  503.         <form action="#">
    504. 

  504.           <p>
    505. 

  505.             <input type="checkbox" id="test9" />
    506. 

  506.             <label for="test9">Red</label>
    507. 

  507.           </p>
    508. 

  508.           <p>
    509. 

  509.             <input type="checkbox" id="test6" checked="checked" />
    510. 

  510.             <label for="test6">Yellow</label>
    511. 

  511.           </p>
    512. 

  512.           <p>
    513. 

  513.             <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
    514. 

  514.             <label for="filled-in-box">Filled in</label>
    515. 

  515.           </p>
    516. 

  516.           <p>
    517. 

  517.             <input type="checkbox" id="indeterminate-checkbox" />
    518. 

  518.             <label for="indeterminate-checkbox">Indeterminate Style</label>
    519. 

  519.           </p>
    520. 

  520.           <p>
    521. 

  521.             <input type="checkbox" id="test7" checked="checked" disabled="disabled" />
    522. 

  522.             <label for="test7">Green</label>
    523. 

  523.           </p>
    524. 

  524.             <p>
    525. 

  525.               <input type="checkbox" id="test8" disabled="disabled" />
    526. 

  526.               <label for="test8">Brown</label>
    527. 

  527.           </p>
    528. 

  528.         </form>
    529. 

  529.         <pre><code class="language-markup">
    530. 

  530.   &lt;form action="#">
    531. 

  531.     &lt;p>
    532. 

  532.       &lt;input type="checkbox" id="test5" />
    533. 

  533.       &lt;label for="test5">Red&lt;/label>
    534. 

  534.     &lt;/p>
    535. 

  535.     &lt;p>
    536. 

  536.       &lt;input type="checkbox" id="test6" checked="checked" />
    537. 

  537.       &lt;label for="test6">Yellow&lt;/label>
    538. 

  538.     &lt;/p>
    539. 

  539.     &lt;p>
    540. 

  540.       &lt;input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
    541. 

  541.       &lt;label for="filled-in-box">Filled in&lt;/label>
    542. 

  542.     &lt;/p>
    543. 

  543.     &lt;p>
    544. 

  544.       &lt;input type="checkbox" id="test7" checked="checked" disabled="disabled" />
    545. 

  545.       &lt;label for="test7">Green&lt;/label>
    546. 

  546.     &lt;/p>
    547. 

  547.       &lt;p>
    548. 

  548.         &lt;input type="checkbox" id="test8" disabled="disabled" />
    549. 

  549.         &lt;label for="test8">Brown&lt;/label>
    550. 

  550.     &lt;/p>
    551. 

  551.   &lt;/form>
    552. 

  552.         </code></pre>
    553. 

  553.       </div>
    554. 

  554. 

  555.       <!-- Switches -->
    556. 

  556.       <div id="switches" class="section scrollspy">
    557. 

  557.         <h2 class="header">Switches</h2>
    558. 

  558.         <form action="#">
    559. 

  559.         <p>
    560. 

  560.             <div class="switch">
    561. 

  561.             <label>
    562. 

  562.               Off
    563. 

  563.               <input checked type="checkbox">
    564. 

  564.               <span class="lever"></span>
    565. 

  565.               On
    566. 

  566.             </label>
    567. 

  567.           </div>
    568. 

  568.         </p>
    569. 

  569. 

  570.           <p>
    571. 

  571.             <div class="switch">
    572. 

  572.               <label>
    573. 

  573.                 Off
    574. 

  574.                 <input disabled type="checkbox">
    575. 

  575.                 <span class="lever"></span>
    576. 

  576.                 On
    577. 

  577.               </label>
    578. 

  578.             </div>
    579. 

  579.           </p>
    580. 

  580.         </form>
    581. 

  581.         <pre><code class="language-markup">
    582. 

  582.   &lt;!-- Switch -->
    583. 

  583.   &lt;div class="switch">
    584. 

  584.     &lt;label>
    585. 

  585.       Off
    586. 

  586.       &lt;input type="checkbox">
    587. 

  587.       &lt;span class="lever">&lt;/span>
    588. 

  588.       On
    589. 

  589.     &lt;/label>
    590. 

  590.   &lt;/div>
    591. 

  591. 

  592.   &lt;!-- Disabled Switch -->
    593. 

  593.   &lt;div class="switch">
    594. 

  594.     &lt;label>
    595. 

  595.       Off
    596. 

  596.       &lt;input disabled type="checkbox">
    597. 

  597.       &lt;span class="lever">&lt;/span>
    598. 

  598.       On
    599. 

  599.     &lt;/label>
    600. 

  600.   &lt;/div>
    601. 

  601.         </code></pre>
    602. 

  602.       </div>
    603. 

  603. 

  604.       <div id="file" class="section scrollspy">
    605. 

  605.         <h2 class="header">File Input</h2>
    606. 

  606.         <p>If you want to style an input button with a path input we provide this structure.</p>
    607. 

  607.         <form action="#">
    608. 

  608.           <div class="file-field input-field">
    609. 

  609.             <input class="file-path validate" type="text"/>
    610. 

  610.             <div class="btn">
    611. 

  611.               <span>File</span>
    612. 

  612.               <input type="file" />
    613. 

  613.             </div>
    614. 

  614.           </div>
    615. 

  615.         </form>
    616. 

  616.         <pre><code class="language-markup">
    617. 

  617.   &lt;form action="#">
    618. 

  618.     &lt;div class="file-field input-field">
    619. 

  619.       &lt;input class="file-path validate" type="text"/>
    620. 

  620.       &lt;div class="btn">
    621. 

  621.         &lt;span>File&lt;/span>
    622. 

  622.         &lt;input type="file" />
    623. 

  623.       &lt;/div>
    624. 

  624.     &lt;/div>
    625. 

  625.   &lt;/form>
    626. 

  626.         </code></pre>
    627. 

  627.       </div>
    628. 

  628. 

  629. 

  630.       <div id="range" class="section scrollspy">
    631. 

  631.         <h2 class="header">Range</h2>
    632. 

  632.         <p>Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.</p>
    633. 

  633.         <form action="#">
    634. 

  634.           <p class="range-field">
    635. 

  635.             <input type="range" name="points" min="0" max="100">
    636. 

  636.           </p>
    637. 

  637.         </form>
    638. 

  638.         <pre><code class="language-markup">
    639. 

  639.   &lt;form action="#">
    640. 

  640.     &lt;p class="range-field">
    641. 

  641.       &lt;input type="range" id="test5" min="0" max="100" />
    642. 

  642.     &lt;/p>
    643. 

  643.   &lt;/form>
    644. 

  644.         </code></pre>
    645. 

  645.       </div>
    646. 

  646. 

  647.       <div id="date-picker" class="section scrollspy">
    648. 

  648.         <h2 class="header">Date Picker</h2>
    649. 

  649.         <p>We use a modified version of pickadate.js to create a materialized date picker. Test it out below! </p>
    650. 

  650.         <label for="birthdate">Birthdate</label>
    651. 

  651.         <input id="birthdate" type="text" class="datepicker"></input>
    652. 

  652.         <pre><code class="language-markup">
    653. 

  653.   &lt;input type="date" class="datepicker">
    654. 

  654.         </code></pre>
    655. 

  655. 

  656.         <h4>Initialization</h4>
    657. 

  657.         <p>At this time, not all pickadate.js options are working with our implementation</p>
    658. 

  658.         <pre><code class="language-javascript">
    659. 

  659.   $('.datepicker').pickadate({
    660. 

  660.     selectMonths: true, // Creates a dropdown to control month
    661. 

  661.     selectYears: 15 // Creates a dropdown of 15 years to control year
    662. 

  662.   });
    663. 

  663.         </code></pre>
    664. 

  664.       </div>
    665. 

  665. 

  666. 

  667.       <div id="character-counter" class="section scrollspy">
    668. 

  668.         <h2 class="header">Character Counter</h2>
    669. 

  669.         <p class="caption">Use a character counter in fields where a character restriction is in place.</p>
    670. 

  670.         <div class="row">
    671. 

  671.           <form class="col s12">
    672. 

  672.             <div class="row">
    673. 

  673.               <div class="input-field col s6">
    674. 

  674.                 <input id="input_text" type="text" length="10">
    675. 

  675.                 <label for="input_text">Input text</label>
    676. 

  676.               </div>
    677. 

  677.             </div>
    678. 

  678.             <br/>
    679. 

  679.             <div class="row">
    680. 

  680.               <div class="input-field col s12">
    681. 

  681.                 <textarea id="textarea1" class="materialize-textarea" length="120"></textarea>
    682. 

  682.                 <label for="textarea1">Textarea</label>
    683. 

  683.               </div>
    684. 

  684.             </div>
    685. 

  685.           </form>
    686. 

  686.         </div>
    687. 

  687.         <pre><code class="language-markup">
    688. 

  688.     &lt;div class="row">
    689. 

  689.       &lt;form class="col s12">
    690. 

  690.         &lt;div class="row">
    691. 

  691.           &lt;div class="input-field col s6">
    692. 

  692.             &lt;input id="input_text" type="text" length="10">
    693. 

  693.             &lt;label for="input_text">Input text&lt;/label>
    694. 

  694.           &lt;/div>
    695. 

  695.         &lt;/div>
    696. 

  696.         &lt;div class="row">
    697. 

  697.           &lt;div class="input-field col s12">
    698. 

  698.             &lt;textarea id="textarea1" class="materialize-textarea" length="120">&lt;/textarea>
    699. 

  699.             &lt;label for="textarea1">Textarea&lt;/label>
    700. 

  700.           &lt;/div>
    701. 

  701.         &lt;/div>
    702. 

  702.       &lt;/form>
    703. 

  703.     &lt;/div>
    704. 

  704.           </code></pre>
    705. 

  705.         <br>
    706. 

  706.       </div>
    707. 

  707. 

  708. 

  709. 

  710.     </div>
    711. 

  711.     <div class="col hide-on-small-only m3 l2">
    712. 

  712.       <div class="toc-wrapper">
    713. 

  713.         <div class="buysellads hide-on-small-only">
    714. 

  714.           <!-- CarbonAds Zone Code -->
    715. 

  715.           <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
    716. 

  716.         </div>
    717. 

  717.         <div style="height: 1px;">
    718. 

  718.           <ul class="section table-of-contents">
    719. 

  719.             <li><a href="#input">Input Fields</a></li>
    720. 

  720.             <li><a href="#textarea">Textareas</a></li>
    721. 

  721.             <li><a href="#select">Select</a></li>
    722. 

  722.             <li><a href="#radio">Radio Buttons</a></li>
    723. 

  723.             <li><a href="#checkbox">Checkboxes</a></li>
    724. 

  724.             <li><a href="#switches">Switches</a></li>
    725. 

  725.             <li><a href="#file">File Input Button</a></li>
    726. 

  726.             <li><a href="#range">Range</a></li>
    727. 

  727.             <li><a href="#date-picker">Date Picker</a></li>
    728. 

  728.             <li><a href="#character-counter">Character Counter</a></li>
    729. 

  729.           </ul>
    730. 

  730.         </div>
    731. 

  731.       </div>
    732. 

  732.     </div>
    733. 

  733. 

  734.   </div>
    735. 

  735. </div>
    736. 

  736. 

  737. 

  738.     </main>    <footer class="page-footer">
    739. 

  739.       <div class="container">
    740. 

  740.         <div class="row">
    741. 

  741.           <div class="col l4 s12">
    742. 

  742.             <h5 class="white-text">Help Materialize Grow</h5>
    743. 

  743.             <p class="grey-text text-lighten-4">We are a team of college students working on this project like it's our full time job. Any amount would help support and continue development on this project and is greatly appreciated.</p>
    744. 

  744.             <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
    745. 

  745. <input type="hidden" name="cmd" value="_s-xclick">
    746. 

  746. <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
    747. 

  747. ">
    748. 

  748. <button class="btn waves-effect waves-light red lighten-3" type="submit" name="action" alt="PayPal - The safer, easier way to pay online!">Donate Now
    749. 

  749. </button>
    750. 

  750. </form>
    751. 

  751. 

  752.           </div>
    753. 

  753.           <div class="col l4 s12">
    754. 

  754.             <h5 class="white-text">Join the Discussion</h5>
    755. 

  755.             <p class="grey-text text-lighten-4">We have a gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
    756. 

  756.             <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
    757. 

  757.           </div>
    758. 

  758.           <div class="col l4 s12" style="overflow: hidden;">
    759. 

  759.             <h5 class="white-text">Connect</h5>
    760. 

  760.             <iframe src="http://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
    761. 

  761.             <br>
    762. 

  762.             <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
    763. 

  763.             <br>
    764. 

  764.             <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
    765. 

  765.           </div>
    766. 

  766.         </div>
    767. 

  767.       </div>
    768. 

  768.       <div class="footer-copyright">
    769. 

  769.         <div class="container">
    770. 

  770.         © 2014-2015 Materialize, All rights reserved.
    771. 

  771.         <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
    772. 

  772.         </div>
    773. 

  773.       </div>
    774. 

  774.     </footer>
    775. 

  775.     <!--  Scripts-->
    776. 

  776.     <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    777. 

  777.     <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
    778. 

  778.     </script>
    779. 

  779.     <script src="js/jquery.timeago.min.js"></script>  
    780. 

  780.     <script src="js/prism.js"></script>
    781. 

  781.     <script src="bin/materialize.js"></script>
    782. 

  782.     <script src="js/init.js"></script>
    783. 

  783.     <!-- Twitter Button -->
    784. 

  784.     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
    785. 

  785. 

  786.     <!-- Google Plus Button-->
    787. 

  787.     <script src="https://apis.google.com/js/platform.js" async defer></script>
    788. 

  788. 

  789.     <!--  Google Analytics  -->
    790. 

  790.     <script>
    791. 

  791.     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    792. 

  792.     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    793. 

  793.     m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    794. 

  794.     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    795. 

  795. 

  796.     ga('create', 'UA-56218128-1', 'auto');
    797. 

  797.     ga('require', 'displayfeatures');
    798. 

  798.     ga('send', 'pageview');
    799. 

  799.     </script>
    800. 

  800.   </body>
    801. 

  801. </html>
    802.