get select option value without form='sg' attribute

Question

I have a select option tag in my code, and I would like to get the value of it. I know 2 solution but none of them is w3c valid, and it has to be valid.. I tried these:

<form id="carform">
Firstname:<input type="text" name="fname">
<input type="submit">
</form>

<select name="carlist" form="carform">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 

the problem with this is that w3c validation using 4.01 html and this attribute is not part of it (html5).

I tried this too:

<form id="carform">

Firstname:<input type="text" name="fname">
<input type="submit">


<select name="carlist">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 
</form>

but its not valid either. so I wonder how to make it work and valid.

Answer 1

You don’t need the form attribute; instead, just put all the form fields inside the form element, as you have done in your second attempt. That attempt has some other issues, but they are unrelated to the issue of associating a control with a form. They are: lack of action' attribute; not wrappingform` element content in a block-level container (if you need to conform to HTML 4.01 for some odd reason; it has strange requirements like this).

Minimally fixed version (just to please validators, not considering usability, functionality, etc.):

<form id="carform" action="">
<div>
Firstname:<input type="text" name="fname">
<input type="submit">


<select name="carlist">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select> 
</div>
</form>