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

问题描述：

I designed this form, and when I try to fill out the input fields(name,phone,email) it won't let me click to fill out unless I move cursor towards the end of the field(which most people will not do). Also, the submit button won't show pointer for submitting unless I move the cursor just below it.

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

Thank you in advance for your help.

答

There is problem with your signup now layer. Change this

 grid_4 alpha signUp

to this

`grid_2 alpha signUp`

答

The problem you have here is with the z-index. the div with .alpha class is on top of half of the form. What you could do to fix this is make sure the form is at the very top.

I noticed your form has an id of #myform so you could add something like this.

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

Edit: this is a bit of a hack.

@Sankalp Srivastava has the right answer.

答

Your div with class="grid_4 alpha signUp" is covering the left-most portion of your form. Set the width to be something a bit less (I set it to 100px, and everything still displayed).

I was able to quickly see this by using the "Inspect Element" feature of Chrome. Right click on the part of the form that is being blocked, click Inspect Element and see how that div covers the form. If you hover over the block in the Elements pane, the div will highlight and you will easily see the problem.

答

See your source code you will find your <div class="grid_4 alpha signUp"> is overlapping your <form> tag. Decrease the width of that from your css and it will work.

If you remove grid_4 class from that dic it will work

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

相关推荐