Materialize - 表單

上一頁
下一頁

Materialize 有一個非常漂亮且響應式的 CSS 用於表單設計。以下 CSS 被使用：

序號 類名及描述
1

input-field

將 div 容器設定為輸入欄位容器。必需。
2

validate

為輸入欄位新增驗證樣式。
3

active

顯示具有活動樣式的輸入。
4

materialize-textarea

用於設定文字區域的樣式。文字區域將自動調整到內部文字的大小。
5

filled-in

顯示帶有填充框樣式的複選框。

示例

以下示例演示了使用輸入類來展示示例表單。

<html>
   <head>
      <title>The Materialize Form Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <div class="input-field col s6">
                  <i class="material-icons prefix">account_circle</i>
                  <input placeholder="Username" value="Mahesh" id="name" type="text" class="active validate" required>
                  <label for="name">Username</label>
               </div>
               <div class="input-field col s6">
                  <label for="password">Password</label>
                  <input id="password" type="password" placeholder="Password" class="validate" required>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <input placeholder="Email" id="email" type="email" class="validate">
                  <label for="email">Email</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <i class="material-icons prefix">mode_edit</i>
                  <textarea id="address" class="materialize-textarea"></textarea>
                  <label for="address">Address</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <input placeholder="Comments (Disabled)" id="comments" type="text" disabled>
                  <label for="comments">Comments</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <p>
                     <input id="married" type="checkbox" checked="checked">
                     <label for="married">Married</label>
                  </p>
                  <p>
                     <input id="single" type="checkbox" class="filled-in" >
                     <label for="single">Single </label>
                  </p>
                  <p>
                     <input id="dontknow" type="checkbox" disabled="disabled">
                     <label for="dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s12">
                  <p>
                     <input id="male" type="radio" name="gender" value="male" checked>
                     <label for="male">Male</label>
                  </p>
                  <p>
                     <input id="female" type="radio" name="gender" value="female" checked>
                     <label for="female">Female  </label>
                  </p>
                  <p>
                     <input id="dontknow1" type="radio" name="gender" value="female" disabled>
                     <label for="dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Form

重要的輸入控制元件

Materialize 提供了多種型別輸入控制元件的 CSS。下表詳細說明了這些控制元件。

序號 輸入型別名稱及描述
1

選擇

各種型別的選擇輸入
2

開關

各種型別的開關
3

檔案

各種型別的檔案輸入
4

範圍

各種型別的範圍輸入
5

日期選擇器

日期選擇器
6

字元計數器

字元計數器

選擇

示例

以下示例演示了不同型別的選擇選項。

<html>
   <head>
      <title>The Materialize Selects Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
      <script>
         $(document).ready(function() {
         $('select').material_select();
      });
      </script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Select</label>
               <select>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Materialize Multi Select</label>
               <select multiple>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Select with Optgroup</label>
               <select>
                  <optgroup label="Fruits">
                     <option value="1">Mango</option>
                     <option value="2">Orange</option>
                     <option value="3">Apple</option>
                  </optgroup>
                  <optgroup label="Vegs">
                     <option value="4">Brinjal</option>
                     <option value="5">Potato</option>
                     <option value="6">Tomato</option>
                  </optgroup>
               </select>
            </div>
            <div class="row">
               <label>Select with images</label>
               <select class="icons">
                  <option value="" disabled selected>Select Technology</option>
                  <option value="1" data-icon="html5-mini-logo.jpg" class="circle">HTML</option>
                  <option value="2">JavaScript</option>
                  <option value="3">CSS</option>
               </select>
            </div>
            <div class="row">
               <label>Browser default Select</label>
               <select class="browser-default">
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Disabled Materialize Select </label><label>Disabled Materialize Select</label>
               <select disabled>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
            <div class="row">
               <label>Disabled Browser default Select </label>
               <select class="browser-default" disabled>
                  <option value="" disabled selected>Select Fruit</option>
                  <option value="1">Mango</option>
                  <option value="2">Orange</option>
                  <option value="3">Apple</option>
               </select>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Select

開關

示例

以下示例演示了不同型別的開關。透過在其父 div 容器上應用類 switch，複選框被設定為開關樣式。

<html>
   <head>
      <title>The Materialize Switches Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Switch</label>
                  <div class="switch"><label>Off   <input type="checkbox" checked><span class="lever"></span>On</label></div>
            </div>
            <div class="row">
               <label>Materialize Disabled Switch</label>
                  <div class="switch"><label>Off<input disabled type="checkbox"><span class="lever"></span>On</label></div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize Switch

檔案

示例

以下示例演示了不同型別的檔案上傳控制元件。

<html>
   <head>
      <title>The Materialize File Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize File Input</label>
               <div class="file-field input-field">
                  <div class="btn">
                     <span>Browse</span>
                     <input type="file">
                  </div>
                  <div class="file-path-wrapper">
                     <input class="file-path validate" type="text" placeholder="Upload file">
                  </div>
               </div>
            </div>
            <div class="row">
               <label>Materialize Multi File Input</label>
               <div class="file-field input-field">
                  <div class="btn">
                     <span>Browse</span>
                     <input type="file" multiple>
                  </div>
                  <div class="file-path-wrapper">
                     <input class="file-path validate" type="text" placeholder="Upload multiple files">
                  </div>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

File

範圍

示例

以下示例演示了 Materialize 範圍控制元件。

<html>
   <head>
      <title>The Materialize Range Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize Range</label>
               <p class="range-field">
                  <input type="range" id="test" min="0" max="100" />
               </p>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize Range

日期選擇器

示例

以下示例演示了 Materialize 日期選擇器控制元件。

<html>
   <head>
      <title>The Materialize Range Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <label>Materialize DatePicker</label>
               <input type="date" class="datepicker">
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Materialize DatePicker

字元計數器

示例

以下示例演示了 Materialize 字元計數器控制元件。將長度設定為輸入文字或文字區域會啟用此控制元件。

<html>
   <head>
      <title>The Materialize DatePicker Example</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
         <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
         <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
   </head>
   <body class="container">
      <div class="row">
         <form class="col s12">
            <div class="row">
               <div class="input-field col s6">
                  <input id="name" type="text" length="10">
                  <label for="name">Enter Name</label>
               </div>
            </div>
            <div class="row">
               <div class="input-field col s6">
                  <textarea id="comments" class="materialize-textarea" length="120"></textarea>
                     <label for="comments">Comments</label>
               </div>
            </div>
         </form>
      </div>
   </body>
</html>

結果

驗證結果。

Character Counter
列印頁面
上一頁
下一頁
廣告