主要表单输入字段和提交按钮问题答案

【问题标题】：Major Form Input Field and Submit Button Problems主要表单输入字段和提交按钮问题
【发布时间】：2014-01-23 06:11:46
【问题描述】：

我设计了这个表单，当我尝试填写输入字段（姓名、电话、电子邮件）时，除非我将光标移到字段末尾（大多数人会不做）。此外，提交按钮不会显示提交指针，除非我将光标移到它的正下方。

     <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>

提前感谢您的帮助。

【问题讨论】：

请在此处发布您的代码，而不是作为您网站的链接。

标签： php forms

【解决方案1】：

您的 signup now 层存在问题。改变这个

 grid_4 alpha signUp

到这里

`grid_2 alpha signUp`

【讨论】：

如果对您有帮助，请选择正确答案。

【解决方案2】：

你遇到的问题是z-index。 .alpha 类的 div 位于表单的一半之上。解决此问题的方法是确保表单位于最顶部。

我注意到您的表单的 id 为 #myform，因此您可以添加类似的内容。

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

编辑：这有点小技巧。

@Sankalp Srivastava 有正确的答案。

【讨论】：

【解决方案3】：

带有 class="grid_4 alpha signUp" 的 div 覆盖了表单的最左侧部分。将宽度设置为稍小一些（我将其设置为 100 像素，并且仍然显示所有内容）。

通过使用 Chrome 的“检查元素”功能，我能够快速看到这一点。右键单击被阻止的表单部分，单击检查元素并查看该 div 如何覆盖表单。如果您将鼠标悬停在元素窗格中的块上，则 div 将突出显示，您将很容易看到问题。

【讨论】：

【解决方案4】：

查看您的源代码，您会发现您的<div class="grid_4 alpha signUp"> 与您的<form> 标记重叠。从你的css中减少它的宽度，它会起作用。

如果您从该 dic 中删除 grid_4 类，它将起作用

【讨论】：