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文件中

.searchform {
  display: block;
}

和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错误，我在标签中留下了语义上它有意义，但没有看到对输入产生任何影响。

<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提供display: block元素的CSS样式。

＆＃13;

label {
  display: block;
}

＆＃13;

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

＆＃13;

Answer 3

标签标签用于标记特定输入。这是W3C推荐标准。

输入的id应等于标签的id。

这是代码

<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错误，我在标签中留下了语义上它有意义，但没有看到对输入产生任何影响。

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

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

4 个答案: