Home/ Questions/Q 9187393
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T19:45:24+00:00

I am designing a html form using JSP. Below is my css file- body

  • 0

I am designing a html form using JSP. Below is my css file-

    body {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial,
        Helvetica, sans-serif;
    font-size: 12px;
}

p,h1,form,button {
    border: 0;
    margin: 0;
    padding: 0;
}

.spacer {
    clear: both;
    height: 1px;
}
/* ----------- My Form ----------- */
.myform {
    margin: 0 auto;
    width: 400px;
    padding: 14px;
}

/* ----------- stylized ----------- */
#stylized {
    border: solid 2px #b7ddf2;
    background: #ebf4fb;
}

#stylized h1 {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 8px;
}

#stylized p {
    font-size: 11px;
    color: #666666;
    margin-bottom: 20px;
    border-bottom: solid 1px #b7ddf2;
    padding-bottom: 10px;
}

#stylized label {
    display: block;
    font-weight: bold;
    text-align: right;
    width: 140px;
    float: left;
}

#stylized .small {
    color: #666666;
    display: block;
    font-size: 11px;
    font-weight: normal;
    text-align: right;
    width: 140px;
}

#stylized input {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 200px;
    margin: 2px 0 20px 10px;
    height: 30px;
}

#stylized checkbox {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 10px;
    margin: 2px 0 20px 10px;
}

#stylized select {
    float: left;
    font-size: 12px;
    padding: 4px 2px;
    border: solid 1px #aacfe4;
    width: 250px;
    margin: 2px 0 20px 10px;
    height: 100px;
}

#stylized button {
    clear: both;
    margin-left: 150px;
    width: 125px;
    height: 31px;
    background: #666666 url(img/button.png) no-repeat;
    text-align: center;
    line-height: 31px;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: bold;
}

Below is the form that I am building using JSP.

<div id="stylized" class="myform">

        <form:form id="form" name="form" method="POST" action="/showResponse">
            <h1>Service call Form</h1>
            <p></p>

            <form:label path="userId">User Id
                <span class="small">Enter User Id</span>
            </form:label>
            <form:input name="name" id="name" path="userId" />

            <form:label path="debugFlag">Debug Flag :
                <span class="small">Select Debug Flag</span>
            </form:label>
            <form:checkbox path="debugFlag" name="name" id="name" />


            <form:label path="attributeNames">Attribute Names :
                <span class="small">Select Attribute Names</span>
            </form:label>
            <form:select path="attributeNames" items="${attributeNamesList}"
                multiple="true" name="name" id="name" />

            <form:label path="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </form:label>
            <form:input name="name" id="name" path="machineName" />

            <form:label path="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </form:label>
            <form:input path="portNumber" name="name" id="name" />


            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form:form>
    </div>

The only problem that I am facing is, it’s not aligned properly with it’s label and corresponding input. Below is the screenshot-

enter image description here

Only user id and debug flag are assigned properly. Other than that, it’s messed up somehow. Can anyone tell me what wrong I have done in CSS?

Actual HTML Code after doing view page source-

<html>
<head><link href="/ressvr/z/u4/apo4x4yiqe23jo4erdz5ig4tm.css?dataUri=true" type="text/css" rel="stylesheet"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="layout" content="main" />
    <title>Sample App</title>
</head><body><div id="stylized" class="myform">

        <form id="form" name="form" action="/showResponse" method="POST"><h1>Service call Form</h1>
            <p></p>

            <label for="userId">User Id
                <span class="small">Enter User Id</span>
            </label><input id="name" name="userId" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="debugFlag">Debug Flag
                <span class="small">Select Debug Flag</span>
            </label><input id="name" name="debugFlag" name="name" type="checkbox" value="true"/><input type="hidden" name="_debugFlag" value="on"/><div class="spacer"></div>

            <label for="attributeNames">Attribute Names
                <span class="small">Select Attribute Names</span>
            </label><select id="name" name="attributeNames" name="name" multiple="multiple"><option value="ACCOUNT">ACCOUNT</option><option value="ADVERTISING">ADVERTISING</option><option value="INFORMATION">INFORMATION</option></select><input type="hidden" name="_attributeNames" value="1"/><div class="spacer"></div>

            <label for="machineName">Machine Name
                <span class="small">Enter Machine Name</span>
            </label><input id="name" name="machineName" name="name" type="text" value=""/><div class="spacer"></div>

            <label for="portNumber">Port Number
                <span class="small">Enter Port Number</span>
            </label><input id="name" name="portNumber" name="name" type="text" value=""/><div class="spacer"></div>

            <button type="submit">Submit</button>
            <div class="spacer"></div>

        </form></div>
</body></html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You are setting the width of ALL inputs to be the same. You certainly don’t need a width of 200px on a checkbox.

    Put different class names on different input types and style these individually.

    You may also want to wrap your form in an unordered list, to allow it to control the spacing and clear your floats.

    <fieldset>
  <legend>Delivery Details</legend>
  <ol>
    <li>
      <label for="name">Name<em>*</em></label>
      <input id="name" />
    </li>
    <li>
      <label for="address1">Address<em>*</em></label>
      <input id="address1" />
    </li>
    <li>
      <label for="address2">Address 2</label>
      <input id="address2" />
    </li>
    <li>
      <label for="town-city">Town/City</label>
      <input id="town-city" />
    </li>
    <li>
      <label for="county">County<em>*</em></label>
      <input id="county" />
    </li>
...

    This is a very good guide: http://www.alistapart.com/articles/prettyaccessibleforms/

    • 0