Framework7 Labels And Inputs

by Online Tutorials Library July 14, 2022
Framework7 Labels and Inputs

Labels can also be used with Inputs in Framework7.
Example

Let’s take an example to demonstrate the usage of labels and inputs:
  <!DOCTYPE html>  <html>       <head>        <meta name = “viewport” content = “width = device-width, initial-scale = 1,            maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui” />        <meta name = “apple-mobile-web-app-capable” content = “yes” />        <meta name = “apple-mobile-web-app-status-bar-style” content = “black” />        <title>Labels and Input</title>        <link rel = “stylesheet”            href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css” />        <link rel = “stylesheet”         href=”https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css” />     </head>       <body>        <div class = “views”>           <div class = “view view-main”>              <div class = “pages”>                 <div data-page = “home” class = “page navbar-fixed”>                    <div class = “navbar”>                       <div class = “navbar-inner”>                          <div class = “left”> </div>                          <div class = “center”>Form Elements</div>                          <div class = “right”> </div>                       </div>                    </div>                                        <div class = “page-content”>                       <div class = “content-block-title”>Labels and Input</div>                       <div class = “list-block”>                          <ul>                             <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Name</div>                                      <div class = “item-input”>                                         <input type = “text” placeholder = “Enter your name”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>E-mail</div>                                      <div class = “item-input”>                                         <input type = “email” placeholder = “Enter your e-mail”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Password</div>                                      <div class = “item-input”>                                         <input type = “password” placeholder = “Enter your password”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Phone</div>                                      <div class = “item-input”>                                         <input type = “tel” placeholder = “Enter your phone number”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Gender</div>                                      <div class = “item-input”>                                         <select>                                            <option>Male</option>                                            <option>Female</option>                                         </select>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Birth date</div>                                      <div class = “item-input”>                                         <input type = “date” placeholder = “Birth day” value = “2014-04-30”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Date time</div>                                      <div class = “item-input”>                                         <input type = “datetime-local”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <div class = “item-title label”>Switch</div>                                      <div class = “item-input”>                                         <label class = “label-switch”>                                            <input type = “checkbox”>                                            <div class = “checkbox”></div>                                         </label>                                      </div>                                   </div>                                </div>                             </li>                          </ul>                       </div>                    </div>                                     </div>              </div>           </div>        </div>                <script type = “text/javascript”            src = “https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js”></script>                   <script>           // here initialize the app           var myApp = new Framework7();             // If your using custom DOM library, then save it to $$ variable           var $$ = Dom7;             // Add the view           var mainView = myApp.addView(‘.view-main’, {              // enable the dynamic navbar for this view              dynamicNavbar: true           });        </script>     </body>    </html>  
Test it Now
Next TopicFramework7 Tabs
Framework7 Labels And Inputs

Framework7 Labels and Inputs

Example

AdMob with Firebase

Godot Tutorial

You may also like
