Question

我正在制作一个我工作过的网页表单，我只是想在为它构建网站之前使用CSS来设置它。我发现在添加标签标签后，当我点击另一个框跳转到“名字”框时，我收到错误，填写表单的唯一方法是使用Tab。

我的HTML：

<label>
<form action="Register Keys site/form.php" method="post">
First Name: <input type="text" name="first_name"><br>
Last Name: <input type="text" name="last_name"><br>
Email: <input type="text" name="email"><br>
Phone Number: <input type="text" name="phonenumber"><br>
Information on Key: <input type="text" name="keyinfo"><br>
Password: <input type="text" name="password"><br>
Password Hint: <input type="text" name="passwordhint"><br>
<textarea rows="5" name="message" cols="30" placeholder="Please add any additional comments here"></textarea><br>
<input type="submit" name="submit" value="Submit">
</form>
</label>

CSS：

label
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

input
{
    border:0; 
    padding:5px; 
    font-size:0.7em; 
    color:#aaa; 
    border:solid 1px #ccc; 
    margin:0 0 5px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    width: 160px ;
}

textarea
{
    border:0; 
    padding:5px; 
    font-size:0.7em; 
    color:#aaa; 
    border:solid 1px #ccc; 
    margin:0 0 5px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    border-radius: 4px;
    width: 160px ;
}

input:focus
{ 
    border:solid 1px #EEA34A; 
}

Answer 1

书面形式不正确，因为整个表格都包含在Label中按常规设置

<form action="">
  <div> <label for=""> </ label> </ div>
  <div> <input type="text"> </ div>
</form>

没有div

这是可能的

Answer 2

您已在form元素中包含label元素。这是无效的标记，并具有奇怪的效果。请参阅@ verdesrobert的答案，以充分利用label。出于功能原因，您应该以{{1}}的方式使用。

但是现在要做的是，整个表单的样式可以通过在label元素上设置CSS属性来完成。例如：

form

（使用样式。我不建议以form { float: left; text-align: right; margin-right: 15px; width: 300px; }为单位设置宽度和缩进（以像素为单位）。）

Answer 3

这是你应该如何使用Label标签

<form action="demo_form.asp">
    <label for="male">Male</label>
    <input type="radio" name="sex" id="male" value="male"><br>
    <label for="female">Female</label>
    <input type="radio" name="sex" id="female" value="female"><br>
    <input type="submit" value="Submit">
</form>

Answer 4

要解决此问题，您需要修改html部分。

您只需将标记标签替换为div 即可。同时将css类名称标签替换为div 。通过这样做，您可以解决此问题。

的问候，
Vishal Bagdai

Answer 5

由于标签标签的工作方式，如果用户点击标签标签内的任何内容，它将重新聚焦，将控制切换到表单（从而将光标放在第一个文本框中）。

请参阅：http://www.w3schools.com/tags/tag_label.asp

而不是标签，你想使用div，并给它一个ID（例如divID），然后将你的CSS更改为：

#divID
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

或给它一个类（例如divClass）并将你的css改为：

.divClass
{
    float: left;
    text-align: right;
    margin-right: 15px;
    width: 300px;
}

使用<label>标签</label>时HTML表单出错

5 个答案: