マテリアライズ-フォーム

Materializeには、フォームデザイン用の非常に美しく反応の良いCSSがあります。次のCSSが使用されます-

Sr.No.	Class Name & Description
1	input-field divコンテナを入力フィールドコンテナとして設定します。必須。
2	validate 入力フィールドに検証スタイルを追加します。
3	active アクティブなスタイルの入力を表示します。
4	materialize-textarea テキスト領域のスタイル設定に使用されます。テキスト領域は、内部のテキストに自動的にサイズ変更されます。
5	filled-in 塗りつぶされたボックススタイルのチェックボックスを表示します。

例

次の例では、入力クラスを使用してサンプルフォームを紹介します。

materialize_forms

<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>

結果

結果を確認します。

重要な入力コントロール

Materializeは、さまざまなタイプの入力コントロールにCSSを提供します。次の表は同じ詳細です。

Sr.No.	Input Type Name & Description
1	Select さまざまなタイプの選択入力
2	Switches 各種スイッチ
3	File さまざまなタイプのファイル入力
4	Range さまざまなタイプの範囲入力
5	Date Picker 日付ピッカー
6	Character Counter キャラクターカウンター

Materialize-form

マテリアライズ-フォーム

例

materialize_forms

結果

重要な入力コントロール

目次