This appearance of numeric fields is caused by the date-role="listview" attribute on the ul element. The radio buttons also do not appear correctly, only one of them shows up - they are all on top of each other. What am I doing wrong? It's a new app and a view is created by the view editing tool.
<div data-role="view" data-title="Home" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
<div id="homeModel" class="form-view">
<form>
<ul class="form-content" data-role="listview" data-style="inset">
<li class="group-separator">
<h4 class="group-separator-header">You</h4>
</li>
<li class="form-content-item">
<label>
<span>Age</span>
<input id="age" data-bind="value: homeModel.fields.age" type="number">
</label>
</li>
<li class="form-content-item">
<label>
<span>Gender</span>
<input data-bind="checked: homeModel.fields.gender" value="Male" type="radio" name="gender">Male</input>
<input data-bind="checked: homeModel.fields.gender" value="Female" type="radio" name="gender">Female</input>
</label>
</li>
<li class="form-content-item">
<label>
<span>Income</span>
<input id="income" data-bind="value: homeModel.fields.income" type="number" >
</label>
</li>
</ul>
<div class="button-group">
<a class="primary" data-role="button" data-bind="events: { click: homeModel.submit }">Results</a>
</div>
</form>
</div>
</div>
