Material Design Lite - Textfields

Material Design Lite Textfields - 从简单和简单的步骤学习Material Design Lite，从基本到高级概念，包括概述，环境设置，布局，网格，标签，页脚，徽章，按钮，卡片，进度条，旋转器，菜单，滑块，复选框，单选按钮，图标，开关，数据表，文本字段，工具提示。

MDL提供了一系列CSS类来应用各种预定义的视觉和行为增强功能，并显示不同类型的文本输入.下表列出了可用的类及其效果.

Sr.No.	Class Name&描述
1	mdl-textfield 将容器标识为MDL组件，并且在"外部"div元素上是必需的.
2	mdl-js-textfield 将基本MDL行为设置为输入，并且在"外部"div元素上是必需的.
3	mdl-textfield__input 将元素标识为文本字段输入，并且在input或textarea元素上是必需的.
4	mdl-textfield__label 将元素标识为文本字段标签，并且对于input或textarea元素的label元素是必需的.
5	mdl-textfield - floating-label 应用浮动标签效果，是可选的;继续"外部"div元素.
6	mdl-textfield__error 将范围标识为MDL错误消息，并且是可选的;继续使用带有模式的MDL输入元素的span元素.
7	mdl-textfield - expandable 将div标识为MDL可扩展文本字段容器;用于可扩展的输入字段，在"外部"div元素上是必需的.
8	mdl-button 标识标签作为MDL图标按钮;用于可扩展的输入字段，并且在"外部"div的标签元素上是必需的.
9	mdl-js-button 将基本行为设置为图标容器;用于可扩展的输入字段，并且在"外部"div的标签元素上是必需的.
10	mdl-button - icon 将标签标识为MDL图标容器;用于可扩展的输入字段，并且在"外部"div的标签元素上是必需的.
11	mdl-input__expandable-holder 将容器标识为MDL组件;用于可扩展的输入字段，并且在"inner"div元素上是必需的.
12	无效标识textfield在初始加载时无效，在mdl-textfield元素上是可选的.

示例

以下示例将帮助您了解使用mdl-textfield类来显示不同类型的文本字段.

mdl_textfields.htm

                                                  function showMessage(value) {            document.getElementById("message").innerHTML = value;         }                                                                                                                                                                                                                                                                                                                                            Simple Text Field Numeric Text Field Disabled Text Field
                                                                            Text...                                                                                                                                                 Number...                     Number required!                                                                                                                                                 Disabled...                                             
Simple Text Field with Floating Label Numeric Text Field with Floating Label  
                                                                            Text...                                                                                                                                                 Number...                     Number required!                                               
Multiline Text Field Expandable Multiline Text Field  
                                                                            Lines...                                                                                                                            search                                                                                                                     Expandable Input

结果

验证结果.

Simple Text Field	Numeric Text Field	Disabled Text Field
Text...	Number... Number required!	Disabled...
Simple Text Field with Floating Label	Numeric Text Field with Floating Label
Text...	Number... Number required!
Multiline Text Field	Expandable Multiline Text Field
Lines...	search Expandable Input