cannot encircle form html with legend - html

Question

Alright, I know how the fieldset/legend works out in HTML.
I cannot encircle form html with legend
i don't know why it is not working please HELP!
why my form is not surrounded with my legend
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy</legend>
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</fieldset>
</form>
MY CSS:
/* --FORMULAIRE-- */
#content #c2 #contact_form{
margin: 5em auto;
width: 330px;
background-color:#E03336;
}
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: 3px #000000 solid;
}
#content #c2 #contact_form h5 {
display: none;
}
#content #c2 #contact_form fildset {
overflow: hidden;
}
#content #c2 #contact_form ul {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
}
#content #c2 #contact_form ul li {
margin-bottom: 10px;
}
#content #c2 #contact_form ul li label {
float: left;
padding: 8px 10px 0 0;
width: 90px;
background-color:#36A643;
color: #348096;
font-size: 1.2em;
font-weight: bold;
text-align: right;
}
#content #c2 #contact_form ul li input {
border-style: ridge;
padding: 3px;
width: 200px;
font-size: 1.2em;
}
#content #c2 #contact_form p.submit {
text-align: center;
}
#content #c2 #contact_form #btn-send{
border-radius:10px;
background-color: #348096;
border-color: #348096;
color: #fff;
}
/* #content #c2 #form_contact {
width: 300px;
margin-left:118px;
margin-top: 59px;
}
#content #c2 input {
float:right;
display:inline;
}
#content #c2 #form_contact label{
font-size: 20px;
width:50px;
display: block;
color: #348096;
clear:both;
float:left;
}
#content #c2 #form_contact #btn_sub {
width: 40px;
margin-top: 25px;
margin-left: 25px;
border-radius:10px;
background-color: #348096;
border: #348096;
}
*/
what i'm doing wrong

Answer 1

Because it is NOT wrapped in legend. Your html should be like so, if you really want to wrap it with the legend tag:
<form id="contact_form" action="#" method="post">
<h5>Contact me</h5>
<fieldset>
<legend>Formularz kontaktowy
<ul>
<li>
<label for="nom">Nom</label>
<input id="nom" type="text" />
</li>
<li>
<label for="prenom">Prenom</label>
<input id="prenom" type="text" />
</li>
<li>
<label for="mel">Email</label>
<input id="mel" type="text" />
</li>
<li>
<label for="telephone">Telephone</label>
<input id="telephone" type="text" />
</li>
<li>
<label for="mobile">Mobile</label>
<input id="mobile" type="text" />
</li>
</ul>
<p class="submit">
<input type="button" value="ok" alt="send form" id="btn-send" />
</p>
</legend>
</fieldset>
</form>
But this makes me wonder why you want to wrap it with legend? Your code was correct. A legend tag in html is just to define the caption of a fieldset.

Answer 2

In addition the answer of uapuap: What you might want to do is to give the fieldset, or the formular the css border.