如何格式化玉表格？

Question

我想重構我的應用程序來使用玉代替ejs，但我遇到了一些設置登錄表單的問題。

這裏是我的EJS原始形式：

<% if (message) { %> 
<p><%= message %></p> 
<% } %> 

<form class="form-horizontal" action='/login' method="POST" id="loginForm"> 
    <fieldset> 
    <div id="legend"> 
     <legend class="">Login</legend> 
    </div> 
    <div class="control-group"> 
     <!-- Username --> 
     <label class="control-label" for="username">Username</label> 
     <div class="controls"> 
     <input type="text" id="username" name="username" placeholder="" class="input-xlarge"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <!-- Password--> 
     <label class="control-label" for="password">Password</label> 
     <div class="controls"> 
     <input type="password" id="password" name="password" placeholder="" class="input-xlarge"> 
     </div> 
    </div> 

    <div class="control-group"> 
     <!-- session--> 
     <label class="control-label" for="rememberme">Remember Me</label> 
     <div class="controls"> 
     <input type="checkbox" name="rememberme"/> 
     </div> 
    </div> 


    <div class="control-group"> 
     <!-- Button --> 
     <div class="controls"> 
     <button class="btn btn-success">Login</button> 
     </div> 
    </div> 
    </fieldset> 
</form> 

而且這裏是我在玉臺新形式：

extends layout 

block content 
    if message 
     p= message 
    form(class='form-horizontal',action='/login',method='POST',id='loginForm') 
     fieldset 
      div#legand 
       legend Login 
      div.control-group 
       label(for='username',class='control-label') Username 
       div.controls 
        input(type='text',id='username',name='username',placeholder='Username',class='input-xlarge') 
      div.control-group 
       label(for='password',class='control-label') Password 
       div.controls 
        input(type='text',id='password',name='password',placeholder='Password',class='input-xlarge') 
      div.control-group 
       label(for='rememberme',class='control-label') Remember Me 
       div.controls 
        input(type='checkbox',name='rememberme') 
      div.control-group 
       div.controls 
        input(type='submit',class='btn btn-success') Login 

Codekit拋出一個錯誤：

/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/runtime.js:173 
    throw err; 
     ^
Error: /Users/sm/Documents/Projects/Web_Applications/App/app/views/login.jade:27 
    25| 
    26| 
    > 27| 

Invalid indentation, you can use tabs or spaces but not both 
    at Object.Lexer.indent (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:672:15) 
    at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:770:15) 
    at Object.Lexer.blank (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:179:19) 
    at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:744:15) 
    at Object.Lexer.blank (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:179:19) 
    at Object.Lexer.next (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:744:15) 
    at Object.Lexer.lookahead (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/lexer.js:106:46) 
    at Object.Parser.lookahead (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:115:23) 
    at Object.Parser.peek (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:92:17) 
    at Object.Parser.tag (/Applications/CodeKit.app/Contents/Resources/engines/jade/lib/parser.js:666:30) 

我怎樣才能得到過去這個縮進錯誤並讓這個表單起作用？我只使用製表符並且沒有空格，所以我不明白問題所在。

Answer 1

這可能是由您的Jade模板中的後續空行中的空格造成的（您不會發布，但是根據錯誤消息存在）。

Answer 2

我認爲你的問題可能是你如何指定按鈕。相反的：

  div.control-group 
 
       div.controls 
 
        input(type='submit',class='btn btn-success') Login

嘗試：

  div.control-group 
 
       div.controls 
 
        button(type='submit',class='btn btn-success') Login