主要表單輸入字段和提交按鈕問題

我設計了這個表單，當我嘗試填寫輸入字段（名稱，電話，電子郵件）時，它不會讓我點擊填寫，除非我將光標移動到末尾（大多數人不會這樣做）。此外，提交按鈕不會顯示提交指針，除非我將光標移動到其下方。主要表單輸入字段和提交按鈕問題

 <div class="grid_4 alpha signUp"> 
    <img alt='Sign Up' data-src-base='images/' data-src-base2x='images/retina/' data-src='<480:sign_up_xsmall.png, 
                          <768:sign_up_small.png, 
                          <960:sign_up_medium.png, 
                          >960:sign_up.png' /> 
    </div> 



    <form id="myform" name="theform" class="group grid_4 omega" action="/index.php" method="POST"> 


     <p class="firstname"> 
     <label for="myname">Name (Last, First):</label> 
     <br> 
     <input type="text" name="myname" class="name" id-"myname" value:""/> 
     </p> 
          <br> 
     <p class="mail"> 
     <label for="email">Email:</label> 
     <br> 
     <input type="text" name="email" id="email" value=""/> 
     </P> 
          <br> 
     <p class="telephone"> 
     <label for="phone">Phone:</label> 
     <br> 
     <input type="text" name="phone" id="phone" value=""/> 
     </p> 
     <br> 
     <p class="sub"> 
     <input type="submit" name="action" value="SUBMIT" alt="Submit" /> 
     </p> 
    </form>

非常感謝您的幫助。

來源

2014-01-23 corelur

請發表您的代碼在這裏，而不是作爲一個鏈接到你的網站。 – Barmar

您現在註冊圖層存在問題。更改此

grid_4 alpha signUp

這個

`grid_2 alpha signUp`

來源

2014-01-23 06:17:30

哇，我沒有注意到它是網格系統：P很好的修復。 – codeaddict

如果它幫助你，你可以請選擇答案作爲正確的答案。 –

你有這裏的問題是與z-index。與.alpha類的div在表格的一半之上。你可以做什麼來解決這個問題是確保表單處於最頂端。

我注意到你的表單有一個id爲#myform所以你可以添加這樣的東西。

#myform { 
    position: relative; 
    z-index: 1000; 
}

編輯：這有點破解。

@Sankalp Srivastava有正確的答案。

來源

2014-01-23 06:17:45 codeaddict

您使用class =「grid_4 alpha signUp」的div覆蓋了表單的最左側部分。將寬度設置爲少一點（我將其設置爲100px，並且所有內容仍然顯示）。

我能夠通過使用Chrome的「檢查元素」功能快速查看此信息。右鍵單擊被阻止的表單部分，單擊檢查元素並查看該div如何覆蓋表單。如果將鼠標懸停在「元素」窗格中的塊上，div將突出顯示，您將很容易看到問題。

來源

2014-01-23 06:19:03 unclekyky

看到你的源代碼，你會發現你的<div class="grid_4 alpha signUp">重疊你的<form>標籤。減少從你的CSS的寬度，它會起作用。

如果從DIC刪除grid_4類，將工作

來源

2014-01-23 06:20:36 user2936213

回答

相關問題