这里我将分享我学到的几种ionic登陆界面

在index.html文件里的内容是

在 controller.js 文件的代码：

angular.module('starter.controllers', [])

.controller('LogonCtrl',function($scope,$state){
    $scope.back = function(){
        $state.go('carousel');
    }

});

  

在app.js文件的代码：

angular.module('starter', ['ionic', 'starter.controllers', 'starter.services'])

.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
 
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
        cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      StatusBar.styleLightContent();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

 .state('logon',{
        url:'/logon',
        templateUrl:'templates/logon.html',
        controller:'LogonCtrl'
      });

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/logon');

});

在这里，我新建了一个空白html文件，定义名称为logon.html

第一种是placeholder（占位符）模拟输入，当用户输入时，占位符将会隐藏

在logon.html里的代码如下：

    
        

            
                
            
            
                
            
            
                
            
        
        登陆
    

接下来，第二个是内联标签，使用输入标签将标签放在输入元素的左边，当用户输入内容时标签不隐藏

在logon.html里的代码：

    
        

            
                Username
                 
            
            
                Password
                
            
        
        登陆
    

第三个是堆叠标签，既使用占位符标签，也使用内联标签，当然，主要是它自身的堆叠效果（stacked）

在logon.html里的代码如下：

    
        

            
                Username
                
            
            
                Password
                
            
        
        登陆
    

第四种是浮动标签

在logon.html里的代码如下：

    
        

            
                Username
                
            
            
                Password
                
            
        
        登陆
    

第五种 插图的形式

在logon.html里的代码如下：

    
        

            
                
            
            
                
            
        
        登陆
    

第六种  插入输入

在logon.html里的代码如下：

    
        

            

            
                
            
            
             

             
                
             
            
         
         登陆
     
 

第七种  输入图标

在logon.html里的代码如下：

  
    
        

            
                
                
            
            
                
                
            
        
        登陆
    

第八种

代码：

    

        
登陆
    
    
        
            

                
Username：
                
                    
                
            
            

                
Password：
                
                    
                
            
            

                
Email：