Question

我正在使用CSS和html5来创建网站。我有一个带有3个文本框的表单作为输入。我用div标签环绕表单，3个文本框中的每一个都带有用于定位的div标签。找到文本框后，我无法在文本框中输入文本。有什么问题？

Here is the HTML used:

<div id = "textboxsection">
<form method= "post" action= "pdonameinsert.php" >

<!--First name.-->
<div id = "firstnametextbox">
First Name: <input type="text" name ="firstname" placeholder = "First Name">
</div><br><br>

<!--Middle name.-->
<div id = "middlenametextbox">
Middle Initial: <input type="text" name ="middleinitial" placeholder = "Middle Initial"><br>
</div><br>

<!--Last name.-->
<div id = "lastnametextbox"></div>
Last Name: <input type="text" name = "lastname" placeholder = "Last Name"><br>
<br>

</div>

这是使用的CSS

#textboxsection
{
   position:relative;
   top:3px;
   left:160px;
}

这里CSS代码用于每个文本框输入。定位不同。

#firstnametextbox
{
   position:relative;
   top:0px;
   left:5px;
   width:500px;
   height:10px;
}

Answer 1

以下是一个功能示例：jsfiddle.net/cUv28/3

HTML：

<form id="textboxsection" method="post" action="pdonameinsert.php">
    <!--First name.-->
    First Name:
    <input id="firstnametextbox" type="text" name="firstname" placeholder="First Name">
    <!--Middle name.-->
    Middle Initial:
    <input id="middlenametextbox" type="text" name="middleinitial" placeholder="Middle Initial">
    <!--Last name.-->
    Last Name:
    <input id="lastnametextbox" type="text" name="lastname" placeholder="Last Name">
 </form>

CSS：

#textboxsection {
position:relative;
top:3px;
left:160px;
padding:10px;
background-color:#F00;
}
#firstnametextbox {
position:relative;
top:0px;
left:5px;
width:500px;
height:10px;
}

光标不会激活以允许在文本框中输入

1 个答案: