”;
MDL provides a range of CSS classes to apply various predefined visual and behavioral enhancements and display the different types of text inputs. The following table lists down the available classes and their effects.
| Sr.No. | Class Name & Description |
|---|---|
| 1 |
mdl-textfield Identifies container as an MDL component and is required on “outer” div element. |
| 2 |
mdl-js-textfield Sets basic MDL behavior to input and is required on “outer” div element. |
| 3 |
mdl-textfield__input Identifies element as textfield input and is required on input or textarea element. |
| 4 |
mdl-textfield__label Identifies element as textfield label and is required on label element for input or textarea elements. |
| 5 |
mdl-textfield–floating-label Applies floating label effect and is optional; goes on “outer” div element. |
| 6 |
mdl-textfield__error Identifies span as an MDL error message and is optional; goes on span element for MDL input element with pattern. |
| 7 |
mdl-textfield–expandable Identifies a div as an MDL expandable text field container; used for expandable input fields, and is required on “outer” div element. |
| 8 |
mdl-button Identifies label as an MDL icon button; used for expandable input fields, and is required on “outer” div”s label element. |
| 9 |
mdl-js-button Sets basic behavior to icon container; used for expandable input fields, and is required on “outer” div”s label element. |
| 10 |
mdl-button–icon Identifies label as an MDL icon container; used for expandable input fields, and is required on “outer” div”s label element. |
| 11 |
mdl-input__expandable-holder Identifies a container as an MDL component; used for expandable input fields, and is required on “inner” div element. |
| 12 |
is-invalid Identifies the textfield as invalid on initial load and is optional on mdl-textfield element. |
Example
The following example will help you understand the use of the mdl-textfield classes to show the different types of textfields.
mdl_textfields.htm
<html>
<head>
<script
src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
</script>
<link rel = "stylesheet"
href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<link rel = "stylesheet"
href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<script langauage = "javascript">
function showMessage(value) {
document.getElementById("message").innerHTML = value;
}
</script>
</head>
<body>
<table>
<tr><td>Simple Text Field</td><td>Numeric Text Field</td>
<td>Disabled Text Field</td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text" id = "text1">
<label class = "mdl-textfield__label" for = "text1">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(.[0-9]+)?" id = "text2">
<label class = "mdl-textfield__label" for = "text2">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<input class = "mdl-textfield__input" type = "text"
id = "text3" disabled>
<label class = "mdl-textfield__label" for = "text3">
Disabled...</label>
</div>
</form>
</td>
</tr>
<tr><td>Simple Text Field with Floating Label</td>
<td>Numeric Text Field with Floating Label</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text" id = "text4">
<label class = "mdl-textfield__label" for = "text4">Text...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class = "mdl-textfield__input" type = "text"
pattern = "-?[0-9]*(.[0-9]+)?" id = "text5">
<label class = "mdl-textfield__label" for = "text5">
Number...</label>
<span class = "mdl-textfield__error">Number required!</span>
</div>
</form>
</td>
<td> </td>
</tr>
<tr><td>Multiline Text Field</td><td>Expandable Multiline Text Field</td>
<td> </td></tr>
<tr>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield">
<textarea class = "mdl-textfield__input" type = "text" rows = "3"
id = "text7" ></textarea>
<label class = "mdl-textfield__label" for = "text7">Lines...</label>
</div>
</form>
</td>
<td>
<form action = "#">
<div class = "mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class = "mdl-button mdl-js-button mdl-button--icon"
for = "text8">
<i class = "material-icons">search</i>
</label>
<div class = "mdl-textfield__expandable-holder">
<input class = "mdl-textfield__input" type = "text" id = "text8">
<label class = "mdl-textfield__label" for = "sample-expandable">
Expandable Input</label>
</div>
</div>
</form>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
Result
Verify the result.
”;