在HTML中，如何在表单的输入字段中添加标签？

Question

我有一个表单，显示四个输入字段，每个字段在其自己的行上，每个字段都有一个标签：

<form method="get" action="/artist/search">
<table>
<tr>
<td>MusicBrainz Artist Id:</td>
<td><input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/></td>
</tr>
<tr>
<td>MusicBrainz Artist Db Id:</td>
<td><input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/></td>
</tr>
<tr>
<td>Discogs Artist Id:</td>
<td><input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/></td>
</tr>
<tr>
<td>Artist Name:</td>
<td><input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></td>
</tr>
</form>

麻烦的是，尽管看起来还可以，但是在表单中包含表格是无效的html，并且在表单之后呈现html的方式引起了问题（不显示

---

）

因此，如果我取出表格并标记出来，它现在是有效的html，但看起来却不理想，因此如何向每个输入字段添加标签，使其看起来与使用表格时相同

  <form method="get" action="/artist/search"> <input type="text" name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/> <input type="text" name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/> <input type="text" name="discogsartistid" id="discogsartistid" placeholder="88711"/> <input type="text" name="artistname" id="artistname" placeholder="pale saints"/> <input type="submit" value="Submit"> </form> 

更新因此，我采取了以下建议，并使用了标签标签，因为这似乎正是它的用途，但这将所有输入都放在一行上。 然后，我尝试将解决方案的一部分用于其他答案，并添加了一个CSS类，但这没什么区别，添加
确实把每个都放在了新行上，问题是标签未对齐。

在CSS文件中

<form method="get" action="/artist/search">
<div class="searchform">
<label for="musicbrainzartistid">MusicBrainz Artist Id:</label>
<input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/><br>
<label for="musicbrainzartistdbid">MusicBrainz Artist Db Id:</label>
<input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/><br>
<label for="discogsartistid">Discogs Artist Db Id:</label>
<input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/><br>
<label for="artistname">Artist Name:</label>
<input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/><br>
<input type="submit" value="Submit">
</div>
</form>

和HTML

 <form method="get" action="/artist/search"> <div class="searchform"> <label for="musicbrainzartistid">MusicBrainz Artist Id:</label> <input type="text" name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/><br> <label for="musicbrainzartistdbid">MusicBrainz Artist Db Id:</label> <input type="text" name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/><br> <label for="discogsartistid">Discogs Artist Db Id:</label> <input type="text" name="discogsartistid" id="discogsartistid" placeholder="88711"/><br> <label for="artistname">Artist Name:</label> <input type="text" name="artistname" id="artistname" placeholder="pale saints"/><br> <input type="submit" value="Submit"> </div> </form> 

更新2

我发现使用div删除了html错误，Ive留在了标签标记中，因为从语义上讲这是有意义的，但对输入没有任何影响。

 <form method="get" action="/artist/search"> <div> <table> <tr> <td><label for="musicbrainzartistid">MusicBrainz Artist Id:</label></td> <td><input type="text" name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/></td> </tr> <tr> <td><label for="musicbrainzartistdbid">MusicBrainz Artist Db Id:</label></td> <td><input type="text" name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/></td> </tr> <tr> <td><label for="discogsartistid">Discogs Artist Db Id:</label></td> <td><input type="text" name="discogsartistid" id="discogsartistid" placeholder="88711"/><td> </tr> <tr> <td><label for="artistname">Artist Name:</label></td> <td><input type="text" name="artistname" id="artistname" placeholder="pale saints"/></td> </tr> <tr> <td colspan="2"><input type="submit" value="Submit"> </tr> </table> </div> </form> 

Answer 1

<label for="musicbrainzartistid" style="display:block;">Label text here <input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/></label>

这应该使所有内容保持一致

Answer 2

如果您希望每个标签/输入组合显示在单独的一行上，但每个标签都与相应的输入内联，则您要做的就是将input元素包装在label元素中，并为label元素提供CSS样式的display: block 。

 label { display: block; } 

 <form> <label> Foo <input type="text" /> </label> <label> Bar <input type="text" /> </label> <label> Baz <input type="text" /> </label> </form> 

Answer 3

标签标签用于标记特定的输入。 这是W3C建议。

输入的ID应等于标签的for。

这是代码

<form>
<label for="name">name</label> <input type="text" id="name"><br>
<label for="pass">password</label> <input type="password" id="pass"><br>
</form>

请参阅我的教程的在线示例：

http://tutorial.techaltum.com/htmlform.html

Answer 4

我发现使用div删除了html错误，Ive留在了标签标记中，因为从语义上讲这是有意义的，但对输入没有任何影响。

<form method="get" action="/artist/search">
<div>
<table>
<tr>
<td><label for="musicbrainzartistid">MusicBrainz Artist Id:</label></td>
<td><input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/></td>
</tr>
<tr>
<td><label for="musicbrainzartistdbid">MusicBrainz Artist Db Id:</label></td>
<td><input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/></td>
</tr>
<tr>
<td><label for="discogsartistid">Discogs Artist Db Id:</label></td>
<td><input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/><td>
</tr>
<tr>
<td><label for="artistname">Artist Name:</label></td>
<td><input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit">
</tr>
</table>
</div>
</form>