UNPKG

49.3 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge">
7 <meta name="msapplication-tap-highlight" content="no">
8 <meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
9 <title>Forms - Materialize</title>
10 <!-- Favicons-->
11 <link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
12 <meta name="msapplication-TileColor" content="#FFFFFF">
13 <meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
14 <link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
15 <!-- Android 5 Chrome Color-->
16 <meta name="theme-color" content="#EE6E73">
17 <!-- CSS-->
18 <link href="css/prism.css" rel="stylesheet">
19 <link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
20 <link href="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
21 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
22 <script>
23 window.liveSettings = {
24 api_key: "a0b49b34b93844c38eaee15690d86413",
25 picker: "bottom-right",
26 detectlang: true,
27 dynamic: true,
28 autocollect: true
29 };
30 </script>
31 <script src="//cdn.transifex.com/live.js"></script>
32 <link href="/extras/noUiSlider/nouislider.css" rel="stylesheet">
33 </head>
34 <body>
35 <header>
36 <nav class="top-nav">
37 <div class="container">
38 <div class="nav-wrapper"><a class="page-title">Forms</a></div>
39 </div>
40 </nav>
41 <div class="container"><a href="#" data-activates="nav-mobile" class="button-collapse top-nav full hide-on-large-only"><i class="material-icons">menu</i></a></div>
42 <ul id="nav-mobile" class="side-nav fixed">
43 <li class="logo"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
44 <object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
45 <li class="search">
46 <div class="search-wrapper card">
47 <input id="search"><i class="material-icons">search</i>
48 <div class="search-results"></div>
49 </div>
50 </li>
51 <li class="bold"><a href="about.html" class="waves-effect waves-teal">About</a></li>
52 <li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
53 <li class="no-padding">
54 <ul class="collapsible collapsible-accordion">
55 <li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
56 <div class="collapsible-body">
57 <ul>
58 <li><a href="color.html">Color</a></li>
59 <li><a href="grid.html">Grid</a></li>
60 <li><a href="helpers.html">Helpers</a></li>
61 <li><a href="media-css.html">Media</a></li>
62 <li><a href="sass.html">Sass</a></li>
63 <li><a href="shadow.html">Shadow</a></li>
64 <li><a href="table.html">Table</a></li>
65 <li><a href="css-transitions.html">Transitions</a></li>
66 <li><a href="typography.html">Typography</a></li>
67 </ul>
68 </div>
69 </li>
70 <li class="bold"><a class="collapsible-header active waves-effect waves-teal">Components</a>
71 <div class="collapsible-body">
72 <ul>
73 <li><a href="badges.html">Badges</a></li>
74 <li><a href="buttons.html">Buttons</a></li>
75 <li><a href="breadcrumbs.html">Breadcrumbs</a></li>
76 <li><a href="cards.html">Cards</a></li>
77 <li><a href="chips.html">Chips</a></li>
78 <li><a href="collections.html">Collections</a></li>
79 <li><a href="footer.html">Footer</a></li>
80 <li class="active"><a href="forms.html">Forms</a></li>
81 <li><a href="icons.html">Icons</a></li>
82 <li><a href="navbar.html">Navbar</a></li>
83 <li><a href="pagination.html">Pagination</a></li>
84 <li><a href="preloader.html">Preloader</a></li>
85 </ul>
86 </div>
87 </li>
88 <li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
89 <div class="collapsible-body">
90 <ul>
91 <li><a href="carousel.html">Carousel</a></li>
92 <li><a href="collapsible.html">Collapsible</a></li>
93 <li><a href="dialogs.html">Dialogs</a></li>
94 <li><a href="dropdown.html">Dropdown</a></li>
95 <li><a href="media.html">Media</a></li>
96 <li><a href="modals.html">Modals</a></li>
97 <li><a href="parallax.html">Parallax</a></li>
98 <li><a href="pushpin.html">Pushpin</a></li>
99 <li><a href="scrollfire.html">ScrollFire</a></li>
100 <li><a href="scrollspy.html">Scrollspy</a></li>
101 <li><a href="side-nav.html">SideNav</a></li>
102 <li><a href="tabs.html">Tabs</a></li>
103 <li><a href="transitions.html">Transitions</a></li>
104 <li><a href="waves.html">Waves</a></li>
105 </ul>
106 </div>
107 </li>
108 </ul>
109 </li>
110 <li class="bold"><a href="http://materializecss.com/mobile.html" class="waves-effect waves-teal">Mobile</a></li>
111 <li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
112 </ul>
113 </header>
114 <main><div class="container">
115 <div class="row">
116
117 <div class="col s12 m9 l10">
118
119 <div id="input" class="section scrollspy">
120 <p class="caption">
121 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.
122 </p>
123
124 <h2 class="header">Input fields</h2>
125 <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>
126 <p>The validate class leverages HTML5 validation and will add a <code class="language-markup">valid</code> and <code class="language-markup">invalid</code> class accordingly. 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>
127 <br>
128 <div class="row">
129 <form class="col s12">
130 <div class="row">
131 <div class="input-field col s6">
132 <input placeholder="Placeholder" id="first_name" type="text" class="validate">
133 <label for="first_name">First Name</label>
134 </div>
135 <div class="input-field col s6">
136 <input id="last_name" type="text">
137 <label for="last_name">Last Name</label>
138 </div>
139 </div>
140 <div class="row">
141 <div class="input-field col s12">
142 <input disabled value="I am not editable" id="disabled" type="text" class="validate">
143 <label for="disabled">Disabled</label>
144 </div>
145 </div>
146 <div class="row">
147 <div class="input-field col s12">
148 <input id="password" type="password" class="validate">
149 <label for="password">Password</label>
150 </div>
151 </div>
152 <div class="row">
153 <div class="input-field col s12">
154 <input id="email" type="email" class="validate">
155 <label for="email" data-error="wrong" data-success="right">Email</label>
156 </div>
157 </div>
158 <div class="row">
159 <div class="col s12">
160 This is an inline input field:
161 <div class="input-field inline">
162 <input id="email" type="email" class="validate">
163 <label for="email" data-error="wrong" data-success="right">Email</label>
164 </div>
165 </div>
166 </div>
167 </form>
168 </div>
169 <pre><code class="language-markup">
170 &lt;div class="row">
171 &lt;form class="col s12">
172 &lt;div class="row">
173 &lt;div class="input-field col s6">
174 &lt;input placeholder="Placeholder" id="first_name" type="text" class="validate">
175 &lt;label for="first_name">First Name&lt;/label>
176 &lt;/div>
177 &lt;div class="input-field col s6">
178 &lt;input id="last_name" type="text" class="validate">
179 &lt;label for="last_name">Last Name&lt;/label>
180 &lt;/div>
181 &lt;/div>
182 &lt;div class="row">
183 &lt;div class="input-field col s12">
184 &lt;input disabled value="I am not editable" id="disabled" type="text" class="validate">
185 &lt;label for="disabled">Disabled&lt;/label>
186 &lt;/div>
187 &lt;/div>
188 &lt;div class="row">
189 &lt;div class="input-field col s12">
190 &lt;input id="password" type="password" class="validate">
191 &lt;label for="password">Password&lt;/label>
192 &lt;/div>
193 &lt;/div>
194 &lt;div class="row">
195 &lt;div class="input-field col s12">
196 &lt;input id="email" type="email" class="validate">
197 &lt;label for="email">Email&lt;/label>
198 &lt;/div>
199 &lt;/div>
200 &lt;div class="row">
201 &lt;div class="col s12">
202 This is an inline input field:
203 &lt;div class="input-field inline">
204 &lt;input id="email" type="email" class="validate">
205 &lt;label for="email" data-error="wrong" data-success="right">Email&lt;/label>
206 &lt;/div>
207 &lt;/div>
208 &lt;/div>
209 &lt;/form>
210 &lt;/div>
211 </code></pre><br>
212 <h4>Prefilling Text Inputs</h4>
213 <p>If you are having trouble with the labels overlapping prefilled content, Try adding <code class="language-markup">class="active"</code> to the label. <br />You can also call the function <code class="language-javascript">Materialize.updateTextFields();</code> to reinitialize all the Materialize labels on the page if you are dynamically adding inputs.</p>
214 <div class="row">
215 <div class="input-field col s6">
216 <input value="Alvin" id="first_name2" type="text" class="validate">
217 <label class="active" for="first_name2">First Name</label>
218 </div>
219 </div>
220
221 <pre><code class="language-markup">
222 &lt;div class="row">
223 &lt;div class="input-field col s6">
224 &lt;input value="Alvin" id="first_name2" type="text" class="validate">
225 &lt;label class="active" for="first_name2">First Name&lt;/label>
226 &lt;/div>
227 &lt;/div>
228 </code></pre>
229
230 <pre><code class="language-javascript">
231 $(document).ready(function() {
232 Materialize.updateTextFields();
233 });
234 </code></pre>
235
236 <h4>Icon Prefixes</h4>
237 <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>
238 <div class="row">
239 <form class="col s12">
240 <div class="row">
241 <div class="input-field col s6">
242 <i class="material-icons prefix">account_circle</i>
243 <input id="icon_prefix" type="text" class="validate">
244 <label for="icon_prefix">First Name</label>
245 </div>
246 <div class="input-field col s6">
247 <i class="material-icons prefix">phone</i>
248 <input id="icon_telephone" type="tel" class="validate">
249 <label for="icon_telephone">Telephone</label>
250 </div>
251 </div>
252 </form>
253 </div>
254
255 <pre><code class="language-markup">
256 &lt;div class="row">
257 &lt;form class="col s12">
258 &lt;div class="row">
259 &lt;div class="input-field col s6">
260 &lt;i class="material-icons prefix">account_circle</i>&lt;/i>
261 &lt;input id="icon_prefix" type="text" class="validate">
262 &lt;label for="icon_prefix">First Name&lt;/label>
263 &lt;/div>
264 &lt;div class="input-field col s6">
265 &lt;i class="material-icons prefix">phone</i>&lt;/i>
266 &lt;input id="icon_telephone" type="tel" class="validate">
267 &lt;label for="icon_telephone">Telephone&lt;/label>
268 &lt;/div>
269 &lt;/div>
270 &lt;/form>
271 &lt;/div>
272 </code></pre>
273
274 <h4>Custom Error or Success Messages</h4>
275 <p>You can add custom validation messages by adding either <code class="language-markup">data-error</code> or <code class="language-markup">data-success</code> attributes to your input field labels.</p><br>
276 <div class="row">
277 <form class="col s12">
278 <div class="row">
279 <div class="input-field col s12">
280 <input id="email2" type="email" class="validate">
281 <label for="email2" data-error="wrong" data-success="right">Email</label>
282 </div>
283 </div>
284 </form>
285 </div>
286
287 <pre><code class="language-markup">
288 &lt;div class="row">
289 &lt;form class="col s12">
290 &lt;div class="row">
291 &lt;div class="input-field col s12">
292 &lt;input id="email" type="email" class="validate">
293 &lt;label for="email" data-error="wrong" data-success="right">Email&lt;/label>
294 &lt;/div>
295 &lt;/div>
296 &lt;/form>
297 &lt;/div>
298 </code></pre>
299
300
301 <h4>Changing colors</h4>
302 <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>
303 <pre><code class="language-css">
304 /* label color */
305 .input-field label {
306 color: #000;
307 }
308 /* label focus color */
309 .input-field input[type=text]:focus + label {
310 color: #000;
311 }
312 /* label underline focus color */
313 .input-field input[type=text]:focus {
314 border-bottom: 1px solid #000;
315 box-shadow: 0 1px 0 0 #000;
316 }
317 /* valid color */
318 .input-field input[type=text].valid {
319 border-bottom: 1px solid #000;
320 box-shadow: 0 1px 0 0 #000;
321 }
322 /* invalid color */
323 .input-field input[type=text].invalid {
324 border-bottom: 1px solid #000;
325 box-shadow: 0 1px 0 0 #000;
326 }
327 /* icon prefix focus color */
328 .input-field .prefix.active {
329 color: #000;
330 }
331 </code></pre>
332 </div>
333
334
335 <!-- Textarea Section -->
336 <div id="textarea" class="section scrollspy">
337 <h2 class="header">Textarea</h2>
338 <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>
339 <p><strong>Textareas will auto resize to the text inside.</strong></p>
340
341
342 <div class="row">
343 <form class="col s12">
344 <div class="row">
345 <div class="input-field col s12">
346 <textarea id="textarea1" class="materialize-textarea"></textarea>
347 <label for="textarea1">Textarea</label>
348 </div>
349 </div>
350 </form>
351 </div>
352 <pre><code class="language-markup">
353 &lt;div class="row">
354 &lt;form class="col s12">
355 &lt;div class="row">
356 &lt;div class="input-field col s12">
357 &lt;textarea id="textarea1" class="materialize-textarea">&lt;/textarea>
358 &lt;label for="textarea1">Textarea&lt;/label>
359 &lt;/div>
360 &lt;/div>
361 &lt;/form>
362 &lt;/div>
363 </code></pre>
364 <p>advanced note: When dynamically changing the value of a textarea with methods like jQuery's <code class="language-markup">.val()</code>, you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea. </p>
365 <pre><code class="language-javascript">
366 $('#textarea1').val('New Text');
367 $('#textarea1').trigger('autoresize');
368 </code></pre>
369 <br>
370
371 <h4>Icon Prefixes</h4>
372 <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>
373 <div class="row">
374 <form class="col s12">
375 <div class="row">
376 <div class="input-field col s12">
377 <i class="material-icons prefix">mode_edit</i>
378 <textarea id="icon_prefix2" class="materialize-textarea"></textarea>
379 <label for="icon_prefix2">Message</label>
380 </div>
381 </div>
382 </form>
383 </div>
384
385 <pre><code class="language-markup">
386 &lt;div class="row">
387 &lt;form class="col s12">
388 &lt;div class="row">
389 &lt;div class="input-field col s6">
390 &lt;i class="material-icons prefix">mode_edit&lt;/i>
391 &lt;textarea id="icon_prefix2" class="materialize-textarea">&lt;/textarea>
392 &lt;label for="icon_prefix2">First Name&lt;/label>
393 &lt;/div>
394 &lt;/div>
395 &lt;/form>
396 &lt;/div>
397 </code></pre>
398 </div>
399 <div id="select" class="section scrollspy">
400 <h2 class="header">Select</h2>
401 <p> Select allows user input through specified options. Make sure you wrap it in a <code class="language-markup">.input-field</code> for proper alignment with other text fields. Remember that this is a jQuery plugin so make sure you <a href="#select-initialization">initialize</a> this in your document ready. </p>
402 <div class="row">
403 <form class="col s12">
404 <div class="row">
405 <div class="input-field col s12 m6">
406 <select>
407 <option value="" disabled selected>Choose your option</option>
408 <option value="1">Option 1</option>
409 <option value="2">Option 2</option>
410 <option value="3">Option 3</option>
411 </select>
412 <label>Materialize Select</label>
413 </div>
414 <div class="col s12">
415 <br>
416 <p>You can add the property <code class="language-markup">multiple</code> to get the multiple select and select several options.</p>
417 </div>
418 <div class="input-field col s12 m6">
419 <select multiple>
420 <option value="" disabled selected>Choose your option</option>
421 <option value="1">Option 1</option>
422 <option value="2">Option 2</option>
423 <option value="3">Option 3</option>
424 </select>
425 <label>Materialize Multiple Select</label>
426 </div>
427 <div class="col s12">
428 <br>
429 <p>We also support optgroups in our selects.</p>
430 </div>
431 <div class="input-field col s12 m6">
432 <select>
433 <optgroup label="team 1">
434 <option value="1">Option 1</option>
435 <option value="2">Option 2</option>
436 </optgroup>
437 <optgroup label="team 2">
438 <option value="3">Option 3</option>
439 <option value="4">Option 4</option>
440 </optgroup>
441 </select>
442 <label>Optgroups</label>
443 </div>
444 <div class="col s12">
445 <br>
446 <p>You can add icons to your options in any type of select. In the option you add the image source with the <code class="language-markup">data-icon</code> attribute. You can add the <code class="language-markup">left</code> or <code class="language-markup">right</code> class to align your icon. You can also add the <code class="language-markup">circle</code> class to your icon.</p>
447 </div>
448 <div class="input-field col s12 m6">
449 <select class="icons">
450 <option value="" disabled selected>Choose your option</option>
451 <option value="" data-icon="images/sample-1.jpg" class="circle">example 1</option>
452 <option value="" data-icon="images/office.jpg" class="circle">example 2</option>
453 <option value="" data-icon="images/yuna.jpg" class="circle">example 1</option>
454 </select>
455 <label>Images in select</label>
456 </div>
457 <div class="input-field col s12 m6">
458 <select class="icons">
459 <option value="" disabled selected>Choose your option</option>
460 <option value="" data-icon="images/sample-1.jpg" class="left circle">example 1</option>
461 <option value="" data-icon="images/office.jpg" class="left circle">example 2</option>
462 <option value="" data-icon="images/yuna.jpg" class="left circle">example 3</option>
463 </select>
464 <label>Images in select</label>
465 </div>
466 <div class="col s12">
467 <br>
468 <p>You can add the class <code class="language-markup">browser-default</code> to get the browser default.</p>
469 </div>
470 <div class="col s12 m6">
471 <label>Browser Select</label>
472 <select class="browser-default">
473 <option value="" disabled selected>Choose your option</option>
474 <option value="1">Option 1</option>
475 <option value="2">Option 2</option>
476 <option value="3">Option 3</option>
477 </select>
478 </div>
479 </div>
480 </form>
481 <div class="col s12">
482 <pre><code class="language-markup">
483 &lt;div class="input-field col s12">
484 &lt;select>
485 &lt;option value="" disabled selected>Choose your option&lt;/option>
486 &lt;option value="1">Option 1&lt;/option>
487 &lt;option value="2">Option 2&lt;/option>
488 &lt;option value="3">Option 3&lt;/option>
489 &lt;/select>
490 &lt;label>Materialize Select&lt;/label>
491 &lt;/div>
492
493 &lt;div class="input-field col s12">
494 &lt;select multiple>
495 &lt;option value="" disabled selected>Choose your option&lt;/option>
496 &lt;option value="1">Option 1&lt;/option>
497 &lt;option value="2">Option 2&lt;/option>
498 &lt;option value="3">Option 3&lt;/option>
499 &lt;/select>
500 &lt;label>Materialize Multiple Select&lt;/label>
501 &lt;/div>
502
503 &lt;div class="input-field col s12">
504 &lt;select multiple>
505 &lt;optgroup label="team 1">
506 &lt;option value="1">Option 1&lt;/option>
507 &lt;option value="2">Option 2&lt;/option>
508 &lt;/optgroup>
509 &lt;optgroup label="team 2">
510 &lt;option value="3">Option 3&lt;/option>
511 &lt;option value="4">Option 4&lt;/option>
512 &lt;/optgroup>
513 &lt;/select>
514 &lt;label>Optgroups&lt;/label>
515 &lt;/div>
516
517 &lt;div class="input-field col s12 m6">
518 &lt;select class="icons">
519 &lt;option value="" disabled selected>Choose your option&lt;/option>
520 &lt;option value="" data-icon="images/sample-1.jpg" class="circle">example 1&lt;/option>
521 &lt;option value="" data-icon="images/office.jpg" class="circle">example 2&lt;/option>
522 &lt;option value="" data-icon="images/yuna.jpg" class="circle">example 1&lt;/option>
523 &lt;/select>
524 &lt;label>Images in select&lt;/label>
525 &lt;/div>
526 &lt;div class="input-field col s12 m6">
527 &lt;select class="icons">
528 &lt;option value="" disabled selected>Choose your option&lt;/option>
529 &lt;option value="" data-icon="images/sample-1.jpg" class="left circle">example 1&lt;/option>
530 &lt;option value="" data-icon="images/office.jpg" class="left circle">example 2&lt;/option>
531 &lt;option value="" data-icon="images/yuna.jpg" class="left circle">example 3&lt;/option>
532 &lt;/select>
533 &lt;label>Images in select&lt;/label>
534 &lt;/div>
535
536 &lt;label>Browser Select&lt;/label>
537 &lt;select class="browser-default">
538 &lt;option value="" disabled selected>Choose your option&lt;/option>
539 &lt;option value="1">Option 1&lt;/option>
540 &lt;option value="2">Option 2&lt;/option>
541 &lt;option value="3">Option 3&lt;/option>
542 &lt;/select>
543 </code></pre>
544 </div>
545 <div class="col s12">
546 <br><br>
547 <h4>Disabled Styles</h4>
548 <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>
549 </div>
550 <form class="col s12 m6">
551 <div class="row">
552 <div class="col s12">
553 <label>Materialize Disabled</label>
554 <select disabled>
555 <option value="" disabled selected>Choose your option</option>
556 <option value="1">Option 1</option>
557 <option value="2">Option 2</option>
558 <option value="3">Option 3</option>
559 </select>
560 <label>Browser Disabled</label>
561 <select class="browser-default" disabled>
562 <option value="" disabled selected>Choose your option</option>
563 <option value="1">Option 1</option>
564 <option value="2">Option 2</option>
565 <option value="3">Option 3</option>
566 </select>
567 </div>
568 </div>
569 </form>
570 <div class="col s12">
571 <pre><code class="language-markup">
572 &lt;label>Materialize Disabled&lt;/label>
573 &lt;select disabled>
574 &lt;option value="" disabled selected>Choose your option&lt;/option>
575 &lt;option value="1">Option 1&lt;/option>
576 &lt;option value="2">Option 2&lt;/option>
577 &lt;option value="3">Option 3&lt;/option>
578 &lt;/select>
579
580 &lt;label>Browser Disabled&lt;/label>
581 &lt;select class="browser-default" disabled>
582 &lt;option value="" disabled selected>Choose your option&lt;/option>
583 &lt;option value="1">Option 1&lt;/option>
584 &lt;option value="2">Option 2&lt;/option>
585 &lt;option value="3">Option 3&lt;/option>
586 &lt;/select>
587 </code></pre>
588 </div>
589 <div class="col s12">
590 <a name="select-initialization"></a>
591 <h4>Initialization</h4>
592 <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>
593 <pre><code class="language-javascript col s12">
594 $(document).ready(function() {
595 $('select').material_select();
596 });
597 </code></pre>
598 </div>
599 <div class="col s12">
600 <h4>Updating/Destroying Select</h4>
601 <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>
602 <pre><code class="language-javascript">
603 $('select').material_select('destroy');
604 </code></pre>
605 </div>
606 </div>
607 </div>
608
609
610 <div id="radio" class="section scrollspy">
611 <h2 class="header">Radio Buttons</h2>
612 <p>Radio Buttons are used when the user must make only one selection out of a group of items</p>
613 <form action="#">
614 <p>
615 <input name="group1" type="radio" id="test1" checked />
616 <label for="test1">Red</label>
617 </p>
618 <p>
619 <input name="group1" type="radio" id="test2" />
620 <label for="test2">Yellow</label>
621 </p>
622 <p>
623 <input class="with-gap" name="group1" type="radio" id="test3" />
624 <label for="test3">Green</label>
625 </p>
626 <p>
627 <input name="group1" type="radio" id="test4" disabled="disabled" />
628 <label for="test4">Brown</label>
629 </p>
630 </form>
631 <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>
632 <pre><code class="language-markup">
633 &lt;form action="#">
634 &lt;p>
635 &lt;input name="group1" type="radio" id="test1" />
636 &lt;label for="test1">Red&lt;/label>
637 &lt;/p>
638 &lt;p>
639 &lt;input name="group1" type="radio" id="test2" />
640 &lt;label for="test2">Yellow&lt;/label>
641 &lt;/p>
642 &lt;p>
643 &lt;input class="with-gap" name="group1" type="radio" id="test3" />
644 &lt;label for="test3">Green&lt;/label>
645 &lt;/p>
646 &lt;p>
647 &lt;input name="group1" type="radio" id="test4" disabled="disabled" />
648 &lt;label for="test4">Brown&lt;/label>
649 &lt;/p>
650 &lt;/form>
651 </code></pre>
652 <h4>Options</h4>
653 <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>
654
655 <p>
656 <input class="with-gap" name="group3" type="radio" id="test5" checked />
657 <label for="test5">Red</label>
658 </p>
659 <pre><code class="language-markup">
660 &lt;p>
661 &lt;input class="with-gap" name="group3" type="radio" id="test5" checked />
662 &lt;label for="test5">Red&lt;/label>
663 &lt;/p>
664 </code></pre>
665
666 </div>
667
668
669 <!-- Checkboxes -->
670 <div id="checkbox" class="section scrollspy">
671 <h2 class="header">Checkboxes</h2>
672 <p>Use checkboxes when looking for yes or no answers. The <code class="language-markup">for</code> attribute is necessary to bind our custom checkbox with the input. Add the input's <code class="language-markup">id</code> as the value of the <code class="language-markup">for</code> attribute of the label. </p>
673 <form action="#">
674 <p>
675 <input type="checkbox" id="test9" />
676 <label for="test9">Red</label>
677 </p>
678 <p>
679 <input type="checkbox" id="test6" checked="checked" />
680 <label for="test6">Yellow</label>
681 </p>
682 <p>
683 <input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
684 <label for="filled-in-box">Filled in</label>
685 </p>
686 <p>
687 <input type="checkbox" id="indeterminate-checkbox" />
688 <label for="indeterminate-checkbox">Indeterminate Style</label>
689 </p>
690 <p>
691 <input type="checkbox" id="test7" checked="checked" disabled="disabled" />
692 <label for="test7">Green</label>
693 </p>
694 <p>
695 <input type="checkbox" id="test8" disabled="disabled" />
696 <label for="test8">Brown</label>
697 </p>
698 </form>
699 <pre><code class="language-markup">
700 &lt;form action="#">
701 &lt;p>
702 &lt;input type="checkbox" id="test5" />
703 &lt;label for="test5">Red&lt;/label>
704 &lt;/p>
705 &lt;p>
706 &lt;input type="checkbox" id="test6" checked="checked" />
707 &lt;label for="test6">Yellow&lt;/label>
708 &lt;/p>
709 &lt;p>
710 &lt;input type="checkbox" class="filled-in" id="filled-in-box" checked="checked" />
711 &lt;label for="filled-in-box">Filled in&lt;/label>
712 &lt;/p>
713 &lt;p>
714 &lt;input type="checkbox" id="indeterminate-checkbox" />
715 &lt;label for="indeterminate-checkbox">Indeterminate Style&lt;/label>
716 &lt;/p>
717 &lt;p>
718 &lt;input type="checkbox" id="test7" checked="checked" disabled="disabled" />
719 &lt;label for="test7">Green&lt;/label>
720 &lt;/p>
721 &lt;p>
722 &lt;input type="checkbox" id="test8" disabled="disabled" />
723 &lt;label for="test8">Brown&lt;/label>
724 &lt;/p>
725 &lt;/form>
726 </code></pre>
727 </div>
728
729 <!-- Switches -->
730 <div id="switches" class="section scrollspy">
731 <h2 class="header">Switches</h2>
732 <form action="#">
733 <p>
734 <div class="switch">
735 <label>
736 Off
737 <input checked type="checkbox">
738 <span class="lever"></span>
739 On
740 </label>
741 </div>
742 </p>
743
744 <p>
745 <div class="switch">
746 <label>
747 Off
748 <input disabled type="checkbox">
749 <span class="lever"></span>
750 On
751 </label>
752 </div>
753 </p>
754 </form>
755 <pre><code class="language-markup">
756 &lt;!-- Switch -->
757 &lt;div class="switch">
758 &lt;label>
759 Off
760 &lt;input type="checkbox">
761 &lt;span class="lever">&lt;/span>
762 On
763 &lt;/label>
764 &lt;/div>
765
766 &lt;!-- Disabled Switch -->
767 &lt;div class="switch">
768 &lt;label>
769 Off
770 &lt;input disabled type="checkbox">
771 &lt;span class="lever">&lt;/span>
772 On
773 &lt;/label>
774 &lt;/div>
775 </code></pre>
776 </div>
777
778 <div id="file" class="section scrollspy">
779 <h2 class="header">File Input</h2>
780 <p>If you want to style an input button with a path input we provide this structure.</p>
781 <form action="#">
782 <div class="file-field input-field">
783 <div class="btn">
784 <span>File</span>
785 <input type="file">
786 </div>
787 <div class="file-path-wrapper">
788 <input class="file-path validate" type="text">
789 </div>
790 </div>
791 </form>
792 <pre><code class="language-markup">
793 &lt;form action="#">
794 &lt;div class="file-field input-field">
795 &lt;div class="btn">
796 &lt;span>File&lt;/span>
797 &lt;input type="file">
798 &lt;/div>
799 &lt;div class="file-path-wrapper">
800 &lt;input class="file-path validate" type="text">
801 &lt;/div>
802 &lt;/div>
803 &lt;/form>
804 </code></pre>
805
806 <p>You can also use the <code class="language-markup">multiple</code> attribute to allow multiple file uploads. </p>
807 <form action="#">
808 <div class="file-field input-field">
809 <div class="btn">
810 <span>File</span>
811 <input type="file" multiple>
812 </div>
813 <div class="file-path-wrapper">
814 <input class="file-path validate" type="text" placeholder="Upload one or more files">
815 </div>
816 </div>
817 </form>
818 <pre><code class="language-markup">
819 &lt;form action="#">
820 &lt;div class="file-field input-field">
821 &lt;div class="btn">
822 &lt;span>File&lt;/span>
823 &lt;input type="file" multiple>
824 &lt;/div>
825 &lt;div class="file-path-wrapper">
826 &lt;input class="file-path validate" type="text" placeholder="Upload one or more files">
827 &lt;/div>
828 &lt;/div>
829 &lt;/form>
830 </code></pre>
831 </div>
832
833
834 <div id="range" class="section scrollspy">
835 <h2 class="header">Range</h2>
836 <p>Add a range slider for values with a wide range. This one is set to be a number between 0 and 100. We have two different types of sliders. nouiSlider is a 3rd party plugin which we've modified. To use the noUiSlider, you will have to manually link the <code class="language-markup">nouislider.css</code> and <code class="language-markup">nouislider.js</code> files located in the extras folder.</p>
837 <h4>noUiSlider</h4>
838 <p>See noUiSlider's official documentation <a href="http://refreshless.com/nouislider/">here</a> to see a variety of slider options</p>
839 <div id="range-input"></div>
840 <p>&nbsp;</p>
841 <pre><code class="language-javascript">
842 var slider = document.getElementById('test5');
843 noUiSlider.create(slider, {
844 start: [20, 80],
845 connect: true,
846 step: 1,
847 range: {
848 'min': 0,
849 'max': 100
850 },
851 format: wNumb({
852 decimals: 0
853 })
854 });
855 </code></pre>
856 <h4>HTML5 Range</h4>
857 <form action="#">
858 <p class="range-field">
859 <input type="range" name="points" min="0" max="100">
860 </p>
861 </form>
862 <pre><code class="language-markup">
863 &lt;form action="#">
864 &lt;p class="range-field">
865 &lt;input type="range" id="test5" min="0" max="100" />
866 &lt;/p>
867 &lt;/form>
868 </code></pre>
869 </div>
870
871 <div id="date-picker" class="section scrollspy">
872 <h2 class="header">Date Picker</h2>
873 <p>We use a modified version of pickadate.js to create a materialized date picker. Test it out below! </p>
874 <label for="birthdate">Birthdate</label>
875 <input id="birthdate" type="text" class="datepicker">
876 <pre><code class="language-markup">
877 &lt;input type="date" class="datepicker">
878 </code></pre>
879
880 <h4>Initialization</h4>
881 <p>At this time, not all pickadate.js options are working with our implementation</p>
882 <pre><code class="language-javascript">
883 $('.datepicker').pickadate({
884 selectMonths: true, // Creates a dropdown to control month
885 selectYears: 15 // Creates a dropdown of 15 years to control year
886 });
887 </code></pre>
888 </div>
889
890
891 <div id="character-counter" class="section scrollspy">
892 <h2 class="header">Character Counter</h2>
893 <p class="caption">Use a character counter in fields where a character restriction is in place.</p>
894 <div class="row">
895 <form class="col s12">
896 <div class="row">
897 <div class="input-field col s6">
898 <input id="input_text" type="text" data-length="10">
899 <label for="input_text">Input text</label>
900 </div>
901 </div>
902 <br/>
903 <div class="row">
904 <div class="input-field col s12">
905 <textarea id="textarea1" class="materialize-textarea" data-length="120"></textarea>
906 <label for="textarea1">Textarea</label>
907 </div>
908 </div>
909 </form>
910 </div>
911 <pre><code class="language-markup">
912 &lt;div class="row">
913 &lt;form class="col s12">
914 &lt;div class="row">
915 &lt;div class="input-field col s6">
916 &lt;input id="input_text" type="text" data-length="10">
917 &lt;label for="input_text">Input text&lt;/label>
918 &lt;/div>
919 &lt;/div>
920 &lt;div class="row">
921 &lt;div class="input-field col s12">
922 &lt;textarea id="textarea1" class="materialize-textarea" data-length="120">&lt;/textarea>
923 &lt;label for="textarea1">Textarea&lt;/label>
924 &lt;/div>
925 &lt;/div>
926 &lt;/form>
927 &lt;/div>
928 </code></pre>
929 <br>
930 <h4>Initialization</h4>
931 <p>There are no options for this plugin, but if you are adding these dynamically, you can use this to initialize them.</p>
932 <pre><code class="language-javascript">
933 $(document).ready(function() {
934 $('input#input_text, textarea#textarea1').characterCounter();
935 });
936 </code></pre>
937 </div>
938
939 <div id="autocomplete" class="section scrollspy">
940 <h2 class="header">Autocomplete</h2>
941 <p class="caption">
942 Add an autocomplete dropdown below your input to suggest possible values.
943 </p>
944
945 <div class="row">
946 <div class="col s12">
947 <div class="row">
948 <div class="input-field col s12">
949 <i class="material-icons prefix">textsms</i>
950 <input type="text" id="autocomplete-input" class="autocomplete">
951 <label for="autocomplete-input">Autocomplete</label>
952 </div>
953 </div>
954 </div>
955 </div>
956
957 <pre><code class="language-markup">
958 &lt;div class="row">
959 &lt;div class="col s12">
960 &lt;div class="row">
961 &lt;div class="input-field col s12">
962 &lt;i class="material-icons prefix">textsms&lt;/i>
963 &lt;input type="text" id="autocomplete-input" class="autocomplete">
964 &lt;label for="autocomplete-input">Autocomplete&lt;/label>
965 &lt;/div>
966 &lt;/div>
967 &lt;/div>
968 &lt;/div>
969 </code></pre>
970
971 <h4>Initialization</h4>
972 <p>The data is a json object where the key is the matching string and the value is an optional image url.</p>
973 <pre><code class="language-javascript">
974 $('input.autocomplete').autocomplete({
975 data: {
976 "Apple": null,
977 "Microsoft": null,
978 "Google": 'http://placehold.it/250x250'
979 },
980 limit: 20, // The max amount of results that can be shown at once. Default: Infinity.
981 });
982 </code></pre>
983 </div>
984
985
986
987 </div>
988 <div class="col hide-on-small-only m3 l2">
989 <div class="toc-wrapper">
990 <div class="buysellads hide-on-small-only">
991 <!-- CarbonAds Zone Code -->
992 <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
993 </div>
994 <div style="height: 1px;">
995 <ul class="section table-of-contents">
996 <li><a href="#input">Input Fields</a></li>
997 <li><a href="#textarea">Textareas</a></li>
998 <li><a href="#select">Select</a></li>
999 <li><a href="#radio">Radio Buttons</a></li>
1000 <li><a href="#checkbox">Checkboxes</a></li>
1001 <li><a href="#switches">Switches</a></li>
1002 <li><a href="#file">File Input Button</a></li>
1003 <li><a href="#range">Range</a></li>
1004 <li><a href="#date-picker">Date Picker</a></li>
1005 <li><a href="#character-counter">Character Counter</a></li>
1006 <li><a href="#autocomplete">Autocomplete</a></li>
1007 </ul>
1008 </div>
1009 </div>
1010 </div>
1011
1012 </div>
1013</div>
1014
1015 </main> <footer class="page-footer">
1016 <div class="container">
1017 <div class="row">
1018 <div class="col l4 s12">
1019 <h5 class="white-text">Help Materialize Grow</h5>
1020 <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>
1021 <form id="paypal-donate" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
1022<input type="hidden" name="cmd" value="_s-xclick">
1023<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
1024">
1025<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
1026</button>
1027</form>
1028
1029 </div>
1030 <div class="col l4 s12">
1031 <h5 class="white-text">Join the Discussion</h5>
1032 <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>
1033 <a class="btn waves-effect waves-light red lighten-3" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
1034 </div>
1035 <div class="col l4 s12" style="overflow: hidden;">
1036 <h5 class="white-text">Connect</h5>
1037 <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>
1038 <br>
1039 <a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
1040 <br>
1041 <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
1042 </div>
1043 </div>
1044 </div>
1045 <div class="footer-copyright">
1046 <div class="container">
1047 © 2014-2017 Materialize, All rights reserved.
1048 <a class="grey-text text-lighten-4 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
1049 </div>
1050 </div>
1051 </footer>
1052
1053 <!-- Scripts-->
1054 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
1055 <script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }
1056 </script>
1057 <script src="js/jquery.timeago.min.js"></script>
1058 <script src="js/prism.js"></script>
1059 <script src="jade/lunr.min.js"></script>
1060 <script src="jade/search.js"></script>
1061 <script src="bin/materialize.js"></script>
1062 <script src="js/init.js"></script>
1063 <!-- Twitter Button -->
1064 <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>
1065
1066 <!-- Google Plus Button-->
1067 <script src="https://apis.google.com/js/platform.js" async defer></script>
1068
1069 <!-- Google Analytics -->
1070 <script>
1071 (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
1072 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
1073 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
1074 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
1075
1076 ga('create', 'UA-56218128-1', 'auto');
1077 ga('require', 'displayfeatures');
1078 ga('send', 'pageview');
1079 </script>
1080
1081 <script src="/extras/noUiSlider/nouislider.js"></script>
1082 <script type="text/javascript">
1083 var slider = document.getElementById('range-input');
1084 noUiSlider.create(slider, {
1085 start: [20, 80],
1086 connect: true,
1087 step: 1,
1088 range: {
1089 'min': 0,
1090 'max': 100
1091 },
1092 format: wNumb({
1093 decimals: 0
1094 })
1095 });
1096 </script>
1097 </body>
1098</html>
\No newline at end of file