Material Design Lite - Textfields
MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya dan menampilkan berbagai jenis input teks. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.
| Sr.No. | Nama & Deskripsi Kelas |
|---|---|
| 1 | mdl-textfield Mengidentifikasi wadah sebagai komponen MDL dan diperlukan pada elemen div "luar". |
| 2 | mdl-js-textfield Menyetel perilaku dasar MDL ke masukan dan diperlukan di elemen div "luar". |
| 3 | mdl-textfield__input Mengidentifikasi elemen sebagai input textfield dan diperlukan pada input atau elemen textarea. |
| 4 | mdl-textfield__label Mengidentifikasi elemen sebagai label bidang teks dan diperlukan pada elemen label untuk elemen input atau area teks. |
| 5 | mdl-textfield--floating-label Menerapkan efek label mengambang dan bersifat opsional; berlangsung di elemen div "luar". |
| 6 | mdl-textfield__error Mengidentifikasi span sebagai pesan kesalahan MDL dan bersifat opsional; melanjutkan elemen span untuk elemen input MDL dengan pola. |
| 7 | mdl-textfield--expandable Mengidentifikasi div sebagai wadah bidang teks yang dapat diperluas MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen div "luar". |
| 8 | mdl-button Mengidentifikasi label sebagai tombol ikon MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 9 | mdl-js-button Menetapkan perilaku dasar ke wadah ikon; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 10 | mdl-button--icon Mengidentifikasi label sebagai wadah ikon MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen label div "luar". |
| 11 | mdl-input__expandable-holder Mengidentifikasi wadah sebagai komponen MDL; digunakan untuk bidang masukan yang dapat diperluas, dan diperlukan pada elemen div "dalam". |
| 12 | is-invalid Mengidentifikasi textfield sebagai tidak valid pada pemuatan awal dan bersifat opsional pada elemen mdl-textfield. |
Contoh
Contoh berikut akan membantu Anda memahami penggunaan kelas mdl-textfield untuk menampilkan berbagai jenis bidang teks.
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>Hasil
Verifikasi hasilnya.