jeudi 9 avril 2015

Form not displaying as expected

Am working on a form which has 5 input fields and one submit button is expected to be display as two rows and three columns with the form fields. Am getting output like first two input fields are displaying properly in first row but the other three elements are broken.



My code:

<div id="form_div">
<form id="fm_form">
<label>
Date1<br />
<input id="nn" name="dd" type="text" />
</label>
<label>
Date2<br />
<input id="kk" name="ff" type="text" />
</label>
<label>
Vehicle<br />
<select id="dd" style="">
<option value="null">--text--</option>
</select>
</label>

<label>
Name<br />
<select id="name" style="">
<option value="null">--Name--</option>
</select>
</label>

<label>
Location<br />
<select id="location" style="">
<option value="null">--Location--</option>
</select>
</label>
<label>
<br />
<input id="submit_btn" type="submit" value="SUBMIT">
</label>
</form>
</div>


Css:



#fm_form label
{
display:block;
float:left;
margin-right:21px;
vertical-align:top;
width: 210px;
/*padding:25px;*/
}

#fm_form input[type=text]
{

height: 25px;
width: 210px;
}

#fm_form input[type=submit]
{

height: 30px;
width: 210px;
}


#fm_form select
{

height: 30px;
width: 210px;
}

#form_div, #fm_form{

height: 154px;
width: 696px;
border: solid 1px #ddd;
}

Aucun commentaire:

Enregistrer un commentaire