Question

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

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

提前感谢您的帮助。

Answer 1

现在注册图层存在问题。改变这个

 grid_4 alpha signUp

到这个

`grid_2 alpha signUp`

Answer 2

您遇到的问题是z-index。 .alpha类的div位于表单的一半之上。您可以采取哪些措施来确保表格处于最顶层。

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

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

编辑：这有点像黑客。

@Sankalp Srivastava有正确的答案。

Answer 3

您的div = class =“grid_4 alpha signUp”覆盖了表单的最左侧部分。将宽度设置为稍微小一点（我将其设置为100px，并且所有内容仍然显示）。

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

Answer 4

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

如果从该序列中删除grid_4类，则可以使用

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

4 个答案: