Google Choice: Material Design Lite

Welcome to GoogleDG – your one-stop destination for free learning resources, guides, and digital tools.

At GoogleDG, we believe that knowledge should be accessible to everyone. Our mission is to provide readers with valuable ebooks, tutorials, and tech-related content that makes learning easier, faster, and more enjoyable.

What We Offer:

📘 Free & Helpful Ebooks – covering education, technology, self-development, and more.
💻 Step-by-Step Tutorials – practical guides on digital tools, apps, and software.
🌐 Tech Updates & Tips – simplified information to keep you informed in the fast-changing digital world.
🎯 Learning Support – resources designed to support students, professionals, and lifelong learners.
✔ Latest world News

Our Vision

To create a digital knowledge hub where anyone, from beginners to advanced learners, can find trustworthy resources and grow their skills.

Why Choose Us?

✔ Simple explanations of complex topics
✔ 100% free access to resources
✔ Regularly updated content
✔ A community that values knowledge sharing

We are continuously working to expand our content library and provide readers with the most useful and relevant digital learning materials.

📩 If you’d like to connect, share feedback, or suggest topics, feel free to reach us through the Contact page.

Monday, March 6, 2017

Material Design Lite - Textfields

The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the display various types of text inputs. The below table mentions the available classes and their effects.

S.N.	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 showcases the use of mdl-textfield classes to show 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.

পৃষ্ঠাসমূহ

Labels

Search Your Article

CS