Jump to content

How to css a form


Recommended Posts

Hello,

 

I have two images attached. Current shows the image of the website. Trying showing what i am trying to achieve. Below html shows the current page html. I am trying to apply css so my current page looks like the Trying page. If you can help me with the css, I would be so happy. I spent few hours and middle of no where.

<div class="Address_FL form-item webform-component webform-component-addressfield webform-component--PersonalInfo--myaddress">  <label for="edit-submitted-personalinfo-myaddress">myaddress <span class="form-required" title="This field is required.">*</span></label> <div class="form-item form-type-select form-item-submitted-PersonalInfo-myaddress-country">  <label for="edit-submitted-personalinfo-myaddress-country--3">Country </label> <select class="country form-select ajax-processed" autocomplete="country" id="edit-submitted-personalinfo-myaddress-country--3" name="submitted[PersonalInfo][myaddress][country]"><option value="">- None -</option><option value="US" selected="selected">United States</option></select></div><div class="street-block"><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-thoroughfare">  <label for="edit-submitted-personalinfo-myaddress-thoroughfare">Address 1 <span class="form-required" title="This field is required.">*</span></label> <input class="thoroughfare form-text required" autocomplete="address-line1" id="edit-submitted-personalinfo-myaddress-thoroughfare" name="submitted[PersonalInfo][myaddress][thoroughfare]" value="" size="30" maxlength="255" type="text"></div><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-premise">  <label for="edit-submitted-personalinfo-myaddress-premise">Address 2 </label> <input class="premise form-text" autocomplete="address-line2" id="edit-submitted-personalinfo-myaddress-premise" name="submitted[PersonalInfo][myaddress][premise]" value="" size="30" maxlength="255" type="text"></div></div><div class="addressfield-container-inline locality-block country-US"><div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-locality">  <label for="edit-submitted-personalinfo-myaddress-locality">City <span class="form-required" title="This field is required.">*</span></label> <input class="locality form-text required" autocomplete=""address-level2" id="edit-submitted-personalinfo-myaddress-locality" name="submitted[PersonalInfo][myaddress][locality]" value="" size="30" maxlength="255" type="text"></div> <div class="form-item form-type-select form-item-submitted-PersonalInfo-myaddress-administrative-area">  <label for="edit-submitted-personalinfo-myaddress-administrative-area">State <span class="form-required" title="This field is required.">*</span></label> <select class="state form-select required" autocomplete="address-level1" id="edit-submitted-personalinfo-myaddress-administrative-area" name="submitted[PersonalInfo][myaddress][administrative_area]"><option value="" selected="selected">- Select -</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option><option value=" ">--</option><option value="AA">Armed Forces (Americas)</option><option value="AE">Armed Forces (Europe, Canada, Middle East, Africa)</option><option value="AP">Armed Forces (Pacific)</option><option value="AS">American Samoa</option><option value="FM">Federated States of Micronesia</option><option value="GU">Guam</option><option value="MH">Marshall Islands</option><option value="MP">Northern Mariana Islands</option><option value="PW">Palau</option><option value="PR">Puerto Rico</option><option value="VI">Virgin Islands</option></select></div> <div class="form-item form-type-textfield form-item-submitted-PersonalInfo-myaddress-postal-code">  <label for="edit-submitted-personalinfo-myaddress-postal-code">ZIP code <span class="form-required" title="This field is required.">*</span></label> <input class="postal-code form-text required" autocomplete="postal-code" id="edit-submitted-personalinfo-myaddress-postal-code" name="submitted[PersonalInfo][myaddress][postal_code]" value="" size="10" maxlength="255" type="text"></div></div></div>

post-168746-0-87001300-1440025021_thumb.png

post-168746-0-33548900-1440025027_thumb.png

Edited by newcoder1010
Link to post
Share on other sites

That is no CSS I have ever seen, that said the CSS in the tutorial looks like this: <!DOCTYPE html><html><head><style>form { display: block; margin-top: 0em;}</style></head><body><p>A form element is displayed like this:</p><form action="demo_form.asp">First name: <input type="text" name="FirstName" value="Mickey"><br>Last name: <input type="text" name="LastName" value="Mouse"><br><input type="submit" value="Submit"></form><p>Change the default CSS settings to see the effect.</p></body></html>

Link to post
Share on other sites

I don't think it is practical to have such long names for every class and every id. How is "edit-submitted-personalinfo-myaddress-country--3" necessary? Why isn't "country" or "country3" good enough? You have increased the confusion-factor with these wordy strings.

 

Here is a simplified version without your long strings...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>div{margin:5px 8px}.leftmar50{margin-left:90px}.leftmar50f{margin-left:90px;float:left}label{color:blue;font-weight:bold}span.red{color:red}#state{width:120px}</style></head><body><div style="border:1px solid blue;width:550px;height:210px"> <label for="block">myaddress <span class="red" title="This field is required.">*</span></label> <div class="leftmar50">  <label for="country">Country </label><br/>  <select class="" autocomplete="country" id="country" name="submitted[PersonalInfo][myaddress][country]"><option value="">- None -</option><option value="US" selected="selected">United States</option></select> </div> <div class="leftmar50f">   <label for="addr1">Address 1 <span class="red" title="This field is required.">*</span></label><br/>   <input autocomplete="address-line1" id="addr1" name="submitted[PersonalInfo][myaddress][thoroughfare]" value="" size="30" maxlength="255" type="text"> </div> <div style="float:left">   <label for="addr2">Address 2 </label><br/>   <input autocomplete="address-line2" id="addr2" name="submitted[PersonalInfo][myaddress][premise]" value="" size="30" maxlength="255" type="text"> </div> <br style="clear:both"/> <div class="leftmar50f">   <label for="city">City <span class="red" title="This field is required.">*</span></label><br/>   <input autocomplete=""address-level2" id="city" name="submitted[PersonalInfo][myaddress][locality]" value="" size="30" maxlength="255" type="text"> </div> <div style="float:left">   <label for="state">State <span class="red" title="This field is required.">*</span></label><br/>   <select class="" autocomplete="address-level1" id="state" name="submitted[PersonalInfo][myaddress][administrative_area]"><option value="" selected="selected">- Select -</option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="CA">California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option><option value=" ">--</option><option value="AA">Armed Forces (Americas)</option><option value="AE">Armed Forces (Europe, Canada, Middle East, Africa)</option><option value="AP">Armed Forces (Pacific)</option><option value="AS">American Samoa</option><option value="FM">Federated States of Micronesia</option><option value="GU">Guam</option><option value="MH">Marshall Islands</option><option value="MP">Northern Mariana Islands</option><option value="PW">Palau</option><option value="PR">Puerto Rico</option><option value="VI">Virgin Islands</option></select> </div> <div style="float:left">  <label for="zip">ZIP code <span class="red form-required" title="This field is required.">*</span></label><br/>  <input autocomplete="postal-code" id="zip" name="submitted[PersonalInfo][myaddress][postal_code]" value="" size="10" maxlength="255" type="text"> </div> <br style="clear:both"/></div></body></html>
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...