How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'
Related
I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.
I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.
Not sure why it wouldn't, perhaps share your code online.
Like this,
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
where we can inspect and debug it.
As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too
you have to replace form-floating by form-group
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img class="mb-4" src="../images/example.png" alt="" width="72" height="57" />
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
I'm a newbie front-end dev, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input. I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
As Phil said in the comment to your post the issue is that you're using Bootstrap Floating Labels (by wrapping your inputs with a .form-floating) but you're not supplying labels (yours are commented out).
<div class="form-floating">
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Alternatively you can remove the .form-floating surrounding div and use the placeholders as normal
<div>
<label for="firstname">FirstName</label>
<input
type="text"
class="form-control"
id="firstName"
name="firstname"
placeholder="FirstName"
required
autofocus/>
</div>
Here they are uncommented and working correctly: on codepen
Remove class form-floating from div tag it will work.
I am not able to perform client-side form validation. It's a simple check. I wanna make sure that the passwords are the same. This is the javascript code snippet that I am using for the same.
$(document).ready(function(e) {
$("#reg-form").submit(function(event)) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
return true;
} else {
$error.text("Passwords don't match");
event.preventDefault();
}
}
})
Although, I don't think the problem is in the javascript code because I tried to style some items in the form and that didn't work either so I think it's an HTML issue. However, I can't pinpoint the issue. This is my HTML Code.
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
The following is the CSS code that I tried to work with.
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
I found some issues with the JavaScript markup, had a few closing brackets missing and closing parentheses declared too early in the code; but your code itself looks like it works with the correct markup on the JS, please see below:
$(document).ready(function() {
$("#reg-form").submit(function(e) {
let $password = $('#password');
let $confirm = $('#confirmPass');
let $error = $('#confirmError');
if ($password.val() === $confirm.val()) {
console.log(true);
return true
} else {
e.preventDefault();
$error.text("Passwords don't match");
}
})
})
#reg-form input[type="text"],
#reg-form input[type="email"] {
border-radius: unset;
border: none;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-ubuntu);
font-size: 18px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="d-flex justify-content-center">
<form class="reg-form" id="reg-form" enctype="multipart/form-data" action="register.php" method="post">
<div class="form-row">
<div class="col">
<input type="text" name="firstName" id="firstName" class="form-control" value="" placeholder="First Name*" required>
</div>
<div class="col">
<input type="text" name="lastName" id="lastName" class="form-control" value="" placeholder="Last Name*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="email" name="email" id="email" class="form-control" value="" placeholder="Email*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="password" id="password" class="form-control" value="" placeholder="Password*" required>
</div>
</div>
<div class="form-row my-4">
<div class="col">
<input type="password" name="confirmPass" id="confirmPass" class="form-control" value="" placeholder="Confirm Password*" required>
<small id="confirmError" class="text-danger"></small>
</div>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" name="agreement" class="form-check-input" value="" required>
<label for="agreement" class="form-check-label font-ubuntu text-black-50"> I agree to the Terms and Conditions*</label>
</div>
<div class="submit-btn text-center my-5">
<button type="submit" class="btn btn-warning rounded-pill text-dark px-5" name="button">Continue</button>
</div>
</form>
</div>
I have two radio button one for credit card and one for debit card. If i press any one of my radio button, I should get a form which comes under credit and for debit.
Current Code
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
</div>
but the problem is, I'm not able to expose additional form when I press radio button.
my whole code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form method="post" action="#">
<h4>Payment type:</h4>
<div>
<div>
<input type="radio" name="credit" id="credit" required>
<label>Credit card</label>
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
<div>
<input type="radio" name="debit" id="debit">
<label>Debit card</label>
<div class="fordebit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
</div>
<div>
<input type="submit" value="Pay">
</div>
</form>
</body>
</html>
Can anyone reform the CSS file so that when ever I press the radio button a similar type of form should be displayed?
Basically you need to add :checked status in your css to display next sibling
input[type=radio] + .fordebit,
input[type=radio] + .forcredit{
display:none;
}
input[type=radio]:checked + .fordebit{
display:block;
}
input[type=radio]:checked + .forcredit{
display:block;
}
UPDATE
Ok here is an update. there were some issues with your html too. if you want to use radio buttons for multiple choice items, they should have same name. See the full working code below
input[type=radio] + .details{
display: none;
}
input[type=radio]:checked + .fordebit {
display: block;
}
input[type=radio]:checked + .forcredit {
display: block;
}
input[type=radio] {
float:left;
}
<form method="post" action="#">
<h4>Payment type:</h4>
<div>
<div>
<label>Credit card</label>
<input type="radio" name="payment_type" id="credit" required>
<div class="forcredit details">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
<br>
</div>
</div>
<div>
<label>Debit card</label>
<input type="radio" name="payment_type" id="debit">
<div class="fordebit details">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
<br>
</div>
</div>
</div>
<div>
<input type="submit" value="Pay">
</div>
CSS can't do this. Javascript is required for event capturing. Using a library like jquery, you'll need to attach a click event handler to the card selector radio button. Double check your radio button names, then you'll need something like:
$('.card').click(function() {
$('.forcredit').show();
});
Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :
Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.
display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}
Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick