CODEWITHSUNDEEP
javascripthtmlcss
DAndre Ealy
DAndre Ealy

Reputation: 53

Adding style to a form

I have this form that was create in html, but uses js and pulls data from a database. I want to style it, but I'm not sure how to do it. I have the from below and some css, how do I go about bringing the two together? 

<form id="database" name="database">
            <label>School</label>
            <select id="schoolList" name="schoolList" onchange="schoolChange()">
                <option value="null">Select a School</option>
            </select>

            <br />

            <label>Edit/Add a New Merchant</label><br />

            <span id="categoryNum">0</span>
            <select id="merchantCategoryList" name="merchantCategoryList" onchange="merchantCategoryChange()">
                <option value=null>New Category</option>
            </select>
            <span id="newCategory">
                <input id="newCategoryName" type="text" placeholder="Enter the name of the New Category." size="45" />
            </span>

            <br />

            <span id="merchantNum">0</span>
            <select id="merchantList" name="merchantList" onchange="merchantChange()">
                <option value="null">New Merchant</option>
            </select>
            <span id="newMerchant">
                <input id="newMerchantName" type="text" placeholder="Enter the name of the New Merchant." size="45" />
            </span>

            <br />

            <div id="merchantInfo">
                <label>Phone Number:</label>
                <input id="phone" type="text" placeholder="Phone Number" size="45" />
                <br />
                <label>Address:</label>
                <input id="address" type="text" placeholder="Address" size="45" />
                <br />
                <label>City:</label>
                <input id="city" type="text" placeholder="City" size="45" />
                <br />
                <label>State:</label>
                <input id="state" type="text" placeholder="State" size="45" />
                <br />
                <label>Zip:</label>
                <input id="zip" type="text" placeholder="Zip Code" size="45" />
                <br />
                <label>Hours:</label>
                <input id="hours" type="text" placeholder="Hours" size="45" />
                <br />
            </div>

            <input id="Save" type="button" value="Save" onclick="save();" />


<style type="text/css">
    .form-label{
        width:150px !important;
    }
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:1px;
        padding-bottom:1px;
    }
    .form-label-right{
        width:150px !important;
    }
    .form-all{
        width:690px;
        background:transparent;
        color:#555555 !important;
        font-family:'Lucida Grande';
        font-size:14px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
        color:#555555;
    }

    /* Injected CSS Code */
.form-label-top
{
display:none !important;
}
.form-textbox
{
width: 500px !important;
height:40px !important;
}
.form-submit-button
{
width: 500px !important;
height:40px !important;
position:relative !important;
left:-151px !important;
}
.form-all input,select {
border: 1px solid #b7bbbd;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 4px;
width: 140px;
}

</style>

Upvotes: 0

Views: 47

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

You bring them together by adding class attributes to your HTML elements. For example,

<label class="form-label">School</label>

Where you add them depends on how you wish to associate elements with the CSS settings.

(It might be better to use a different approach, writing CSS rules that use element selectors when possible, etc.)

Upvotes: 0

JayD
JayD

Reputation: 6521

Your class names arnt being applied to your html... if you want to add styling..

html

<form class="myForm">
  <label>Blah</label>
</form>

css for the form

.myForm{
  width: 500px //or whatever
  height; 500px; // etc etc
}

css for the forms labels

.myForm label{
 font-size: 16px;
 color: red;
}

now that you can style it properly here is some tips on forms and different ways to style them.

http://css-tricks.com/tips-for-creating-great-web-forms/

Upvotes: 2

Related Questions