title: In Html how do I add a label to input fields within a form?
body: <p>I have a form that displays four entry fields each on its own line, and each with a label:</p>
  
  <pre><code>&lt;form method="get" action="/artist/search"&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;MusicBrainz Artist Id:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;MusicBrainz Artist Db Id:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Discogs Artist Id:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;Artist Name:&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="submit" value="Submit"&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>the trouble is although it looks okay is it is not valid html to have a table within a form and it causes a problem with how the html is rendered after the form (doesnt display a <hr>)   </p>
  
  <p>So if I take the table and labels out it is now valid html but doesnt look how I want it to do, so how can i add a label to each input field so it looks the same as when using tables</p>
  
  <pre><code>    &lt;form method="get" action="/artist/search"&gt;
      &lt;input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/&gt;
      &lt;input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/&gt;
      &lt;input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/&gt;
      &lt;input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/&gt;
      &lt;input type="submit" value="Submit"&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p><strong>Update</strong>
  So I took the advise below and used the <strong>label for</strong> tag as this seems to be exactly what it is used for but this put all inputs on one line. I then tried using part of the solution for the other answer and added a css class but that made no difference, adding <br> did put each on a new line bu the problem is that the labels are not aligned.</p>
  
  <p>In CSS file</p>
  
  <pre><code>.searchform {
    display: block;
  }
  </code></pre>
  
  <p>and in html </p>
  
  <pre><code>&lt;form method="get" action="/artist/search"&gt;
  &lt;div class="searchform"&gt;
  &lt;label for="musicbrainzartistid"&gt;MusicBrainz Artist Id:&lt;/label&gt;
  &lt;input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/&gt;&lt;br&gt;
  &lt;label for="musicbrainzartistdbid"&gt;MusicBrainz Artist Db Id:&lt;/label&gt;
  &lt;input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/&gt;&lt;br&gt;
  &lt;label for="discogsartistid"&gt;Discogs Artist Db Id:&lt;/label&gt;
  &lt;input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/&gt;&lt;br&gt;
  &lt;label for="artistname"&gt;Artist Name:&lt;/label&gt;
  &lt;input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/&gt;&lt;br&gt;
  &lt;input type="submit" value="Submit"&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Update 2</strong></p>
  
  <p>I found that using a <strong>div</strong> removed the html errors, Ive left in the label tag as semantically it makes sense but doesnt see to have any effect on input.</p>
  
  <pre><code>&lt;form method="get" action="/artist/search"&gt;
  &lt;div&gt;
  &lt;table&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;label for="musicbrainzartistid"&gt;MusicBrainz Artist Id:&lt;/label&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="musicbrainzartistid" id="musicbrainzartistid" value="" placeholder="1584532a-62ed-4cbe-ad95-6def0af7df35"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;label for="musicbrainzartistdbid"&gt;MusicBrainz Artist Db Id:&lt;/label&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="musicbrainzartistdbid" id="musicbrainzartistdbid" value="" placeholder="29283"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;label for="discogsartistid"&gt;Discogs Artist Db Id:&lt;/label&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="discogsartistid"     id="discogsartistid" placeholder="88711"/&gt;&lt;td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td&gt;&lt;label for="artistname"&gt;Artist Name:&lt;/label&gt;&lt;/td&gt;
  &lt;td&gt;&lt;input type="text"   name="artistname"          id="artistname" placeholder="pale saints"/&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;td colspan="2"&gt;&lt;input type="submit" value="Submit"&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>