/    Sign up×
Community /Pin to ProfileBookmark

styling large forms.

I have this form looking pretty much the way i want it to look, but I want it to be coded right and in a lot of places I kinda did a hack job to make stuff work.

to get my text fields to align i had to double close </P > </P >

If i didn’t then it would indent the next text field box.

here is my form and here is my css. if someone could direct me on how this should look from a professional level I would appreciate it.

here is a link to the form…

[url]http://www.skylinestaffingservices.com/application.php[/url]

CSS

[code] .labelR {
width: 180px;
float:right;
text-align:right;
margin: 0px 0px 0px 0px;
display:block;
}

.labelER {
width: 180px;
float:right;
text-align:left;
margin: 0px 0px 0px 0px;
display:block;
color: #F00;
}

.labelLA {
width: 180px;
float:left;
text-align:left;
display:block;
margin: -35px 0px 0px 75px;
}

.labelL {
width: 180px;
float:left;
text-align:left;
margin: 0px 0px 0px 0px;
display:block;
}

.tBox {
width: 520px;
height:205PX;
float:right;
text-align:left;
margin: 10px 0px 0px 0px;
display:inline-block;
overflow:auto;
border: 1px solid #000;

}

.rBox {
width: 500px;
height:250PX;
float:right;
text-align:left;
margin: 10px 0px 0px 0px;
display:block;
border: 1px solid #000;
padding:15px;
}
[/code]

Form

[code]<form id=”english1″ name=”english1″ method=”post” action=”actions/appSubmit.php” enctype=”multipart/form-data”>
<h1><center>Application For Employment</center></h1>
<br />
<center><strong>Experience:</strong></center>
<textarea class=”tBox” name=”experience” id=”experience”></textarea>
<br /><br />
<br /><br />
<div style=”float_left”>
<p class=”labelL”><strong>Date:</strong><input type=”text” name=”date” id=”date” />
</p></p><br /><br />
<br />

<p class=”labelL”><strong>Position:</strong><input type=”text” name=”position” id=”position” />
</p></p><br />
<br />

<p class=”labelL”><strong>Email:</strong><input type=”text” name=”email” id=”email” />
</p></p><br />
<br />
</div>

<h2>Personal Information<span style=”float:right; color:#F00; margin-right: 10px”>Emergency Contact</span></h2>
<br /> <br />

<div style=”float:right”>
<p class=”labelER”><strong>First_Name:</strong><input type=”text” name=”ename” id=”ename” />
</p></p><br />
<br />

<p class=”labelER”><strong>Last_Name:</strong><input type=”text” name=”elname” id=”elname” />
</p></p><br />
<br />

<p class=”labelER”><strong>Relationship:</strong><input type=”text” name=”relationship” id=”relationship” />
</p></p><br />
<br />

<p class=”labelER”><strong>Phone:</strong><input type=”text” name=”ephone” id=”ephone” />
</p></p><br />
<br />

<p class=”labelER”><strong>Cell:</strong><br /><input type=”text” name=”ecell” id=”ecell” />
</p></p><br />
<br />
</div>

<div style=”float:left”>
<p class=”labelL”><strong>First_Name:</strong><input type=”text” name=”fname” id=”fname” />
</p></p><br />
<br />

<p class=”labelL”><strong>Last_Name:</strong><input type=”text” name=”lname” id=”lname” />
</p></p><br />
<br />

<p class=”labelL”><strong>Middle_Name:</strong><input type=”text” name=”mname” id=”mname” />
</p></p><br />
<br />

<p class=”labelL”><strong>DOB:</strong><input type=”text” name=”dob” id=”dob” />
</p></p><br />
<br />

<p class=”labelL”><strong>DL#:</strong><br /><input type=”text” name=”dl” id=”dl” />
</p></p><br />
<br />
</div>

<div class=”clear”></div>
<br />

<h2>Current Residence<span style=”float:right; margin-right: 30px”>Availability To Work</span></h2>
<br />
<div class=”rBox”
<p><strong>Are You Available For All Shifts?</strong><br /><br />
<input type=”radio” name=”availability” id=”availability” value=”yes”>
<label for=”availability”>Yes</label>
<input type=”radio” name=”availability” id=”availability” value=”no” />
<label for=”availability”>No</label>

<br />
<br />
<br />

<p><strong>Have You Ever Worked Or Applied At SSS Before?</strong><br /><br />
<input type=”radio” name=”previous” id=”previous” value=”yes”>
<label for=”previous”>Yes</label>
<input type=”radio” name=”previous” id=”previous” value=”no” />
<label for=”previous”>No</label>

</div>

<div style=”float_left”>
<p class=”labelL”><strong>Address:</strong><input type=”text” name=”address” id=”address” />
</p></p><br />
<br />
<br />

<p class=”labelL”><strong>City:</strong><br /><input type=”text” name=”city” id=”city” />
</p></p><br />
<br />

<p class=”labelL”><strong>State:</strong>
<select style=”width:158px” name=”state” id=”state”>
</SELECT></center>
</p></p><br />
<br />

<p class=”labelL”><strong>Zip_Code:</strong><input type=”text” name=”zip” id=”zip” />
</p></p><br />
<br />

<p class=”labelL”><strong>Telephone:</strong><input type=”text” name=”telephone” id=”telephone” />
</p></p><br />
<br />

<p class=”labelL”><strong>Cell_Phone:</strong><input type=”text” name=”cell” id=”cell” />
</p></p><br />
<br />

</div>
<div class=”clear”></div>
<br />

<h3>Previouse Employment</h3>
<br />

<center><strong><span style=”margin-left:55px”>Reason For Leaving:</span></strong></center>
<textarea class=”tBox” name=”leaving” id=”leaving”></textarea>

<div style=”float_left”>
<p class=”labelL”><strong>Company:</strong><input type=”text” name=”company” id=”company” />
</p></p><br /><br />
<br />

<p class=”labelL”><strong>Title:</strong><input type=”text” name=”title” id=”title” />
</p></p><br />
<br />

<p class=”labelL”><strong>Supervisor:</strong><input type=”text” name=”supervisor” id=”supervisor” />
</p></p><br />
<br />

<p class=”labelL”><strong>Supervisor_Phone:</strong><input type=”text” name=”supervisorphone” id=”supervisorphone” />
</p></p><br />
<br />
</div>

<h3>Equal Employment Opportunity</h3>
<p>
We do not discriminate against qualified applicants based upon any protected group status, including but not limited to
race, color, creed, religion, sex (except where it is a bona fide occupational qualification), national origin, ancestry, age,
marital status, military or veteran status, sexual orientation, physical or mental disability or medical condition as defined
by applicable equal opportunity laws. </p>
<p>
To help us comply with federal/state equal opportunity record keeping, reporting and other legal requirements, we
would appreciate you voluntarily providing the information below.</p>
<p>
I certify that the information on this application is correct and I understand that any misrepresentation or omission of
any information will result in my disqualification from consideration for employment or, if employed, my dismissal. I
understand that this application is not a contract, offer, or promise of employment and that if hired, I will be able to
resign at any time for any reason. Likewise, the company can terminate my employment at any time with or without
cause, unless otherwise required by law.</p>
<p>
Offers reasonable accommodation in the employment process for individuals with disabilities. If you need assistance
in the application or hiring process to accommodate a disability, you may request an accommodation at any time
</p>
<br />
<h3>Additional Information</h3>
<br />
Are You Male Or Female?
<br />
Male&nbsp; <input type=”radio” name=”sex” id=”sex” value=”male” /> &nbsp;&nbsp;&nbsp;Female&nbsp; <input type=”radio” name=”sex” id=”sex” value=”female” /> &nbsp;&nbsp;&nbsp;Choose Not To Respond&nbsp; <input type=”radio” name=”sex” id=”sex” value=”noresponse” />
<br /> <br />
Can you Provide Proof Of Work Authorization In The United States&nbsp; <input type=”radio” name=”proof” id=”proof” value=”yes” />Yes
<input type=”radio” name=”proof” id=”proof” value=”no” />No
<br /> <br />
By signing I confirm that I have read, understand and insure all the information provided on this application is correct.
<br /><br />
<div id=”response”><!–This will hold our error messages and the response from the server. –></div>
Signature Of Applicant:&nbsp;<input type=”text” name=”signature” id=”signature” /> &nbsp;&nbsp; Date:&nbsp;<input type=”text” name=”datesign” id=”datesign” /> <input class=”submit” type=”submit” id=”submit” value=”Submit Application” />&nbsp;&nbsp;<input type=”reset” name=”reset” value=”Reset All Fields” />

<div class=”inputs”>
<input type=”hidden” name=”honeypot” id=”honeypot” value=”http://” />
<input type=”hidden” name=”humancheck” id=”humancheck” class=”clear” value=”” />
</form> [/code]

to post a comment
CSS

0Be the first to comment 😎

×

Success!

Help @Nicholas_Diaz spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...