I am currently working on my debut MVC web application and seeking assistance from this forum for the first time after reading numerous posts. My query pertains to simplifying the process of creating a form (image reference available at this link) without resorting to extensive code as shown below the image. Although I find the model and controller aspects concise due to MVC, I struggle with effectively utilizing CSS and div elements within the view. The specific formatting requirements I aim to achieve include: 1) displaying labels and input fields on the same line; 2) ensuring that validation messages beneath each field do not increase the spacing between fields when displayed; and 3) maintaining a consistent distance between the end of the label text and the edge of the input box.
<div style="width: 315px; height: 300px; margin: auto auto; text-align:center">
@using (Html.BeginForm()) {
<div>
<fieldset>
<div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.LabelFor(m => m.ClientId)
</div>
<div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.TextBoxFor(m => m.ClientId, new { @class = "logon-field" })
</div>
<div style="clear:both; height:15px">
@Html.ValidationMessageFor(m => m.ClientId,null, new {@class="logon-validation"})
</div>
<div style="clear:both"></div>
<div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.LabelFor(m => m.UserName)
</div>
<div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.TextBoxFor(m => m.UserName, new { @class = "logon-field" })
</div>
<div style="clear:both; height:15px">
@Html.ValidationMessageFor(m => m.UserName,null, new {@class="logon-validation"})
</div>
<div style="clear:both"></div>
<div class="logon-label" style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.LabelFor(m => m.Password)
</div>
<div style="float:left; width: 110px; margin: 10px 0px 0px 0px">
@Html.TextBoxFor(m => m.Password, new { @class = "logon-field" })
</div>
<div style="clear:both; height:15px">
@Html.ValidationMessageFor(m => m.Password,null, new {@class="logon-validation"})
</div>
<div style="clear:both"></div>
<p>
<input type="submit" style="width: 150px; font-size:large" value="Login" />
</p>