Framework7 Just Inputs

by Online Tutorials Library July 14, 2022

Framework7 Just Inputs

It is the simplest form. It allows only using input fields with the form elements.

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>Just Inputs</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”>Just Inputs</div>                       <div class = “list-block”>                          <ul>                             <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <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-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-input”>                                         <input type = “password” placeholder = “Enter your password”>                                      </div>                                   </div>                                </div>                             </li>                                                          <li>                                <div class = “item-content”>                                   <div class = “item-inner”>                                      <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-input”>                                         <input type = “datetime-local”>                                      </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 Labels & Inputs

Framework7 Just Inputs

Framework7 Just Inputs

Example

AdMob with Firebase

Godot Tutorial

You may also like