Can some one help me out to design below textbox using Bootstrap 5 or only with plane css class textbox
TextBox should be responsive
OnPage load textbox should be with placeholder
<div class="form-outline">
<input type="text" id="form1" class="form-control" />
<label class="form-label" for="form1">Example label</label>
</div>
onclick on textbox it label should get upside
Follow this codepen:
::-webkit-input-placeholder {
direction: rtl;
}
fieldset.form-group {
position: relative;
}
label {
position: absolute;
top: .6rem;
left: 1rem;
transition: all .1s ease-in-out;
cursor: text;
}
:focus + label {
color: #66afe9;
top: -.9rem;
background: white;
}
<fieldset class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
<label for="exampleInputEmail1">Email address</label>
<small class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
Related
I'm a beginner to Javascript and CSS.
I'm creating a web app that gets the user data, for example, the name of the person, etc. So, I want the form to close when its submit button is pressed and then I want it to create a table of the submitter's info.
submitter's info never ends, so it should have the capability to store many data.
I used this login form to get an idea;
https://www.w3schools.com/howto/howto_css_login_form.asp
The code is below;
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function all() {
let name = document.getElementById("output").value;
var finalName = document.createElement("PARAGRAPH")
name.innerHTML(name)
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
/* Extra styles for the cancel button */
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
/* Center the image and position the close button */
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
position: relative;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
padding-top: 60px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button (x) */
.close {
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: red;
cursor: pointer;
}
/* Add Zoom Animation */
.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
#-webkit-keyframes animatezoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
#keyframes animatezoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* Change styles for span and cancel button on extra small screens */
#media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
<h2>Modal Login Form</h2>
<h3 class="output"></h3>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
<div id="id01" class="modal">
<form class="modal-content animate" action="sub2.html" method="POST">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
<img src="img_avatar2.png" alt="Avatar" class="avatar">
</div>
<div class="container">
<label for="uname"><b>Student Name</b></label>
<input type="text" id="name" placeholder="Enter Username" name="uname">
<label for="psw"><b>Class</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<label for="psw"><b>Class Number</b></label>
<input type="text" placeholder="Enter Password" name="psw">
<div class="marks">
<label for="psw"><b>First Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Second Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
<label for="psw"><b>Third Term Marks</b></label>
<input type="text" placeholder="Maths" name="psw">
<input type="text" placeholder="Science" name="psw">
<input type="text" placeholder="Civics" name="psw">
<input type="text" placeholder="Geography" name="psw">
<input type="text" placeholder="Religion" name="psw">
<input type="text" placeholder="Aesthetics" name="psw">
<input type="text" placeholder="Health Science" name="psw">
<input type="text" placeholder="English" name="psw">
<input type="text" placeholder="English Grammer" name="psw">
<input type="text" placeholder="P.T.S" name="psw">
<input type="text" placeholder="Computer Science" name="psw">
<input type="text" placeholder="Biology" name="psw">
<input type="text" placeholder="Chemistry" name="psw">
<input type="text" placeholder="Physics" name="psw">
<input type="text" placeholder="Combined Maths" name="psw">
<input type="text" placeholder="Commerce" name="psw">
<input type="text" placeholder="Arts" name="psw">
</div>
<button type="submit" onclick="all()">Done!</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Cancel</button>
</div>
</form>
</div>
The problem is you are using the submit button. After clicking on it, the data is being sent and the page is immediately reloaded and all filled data is deleted. The all() function is not executed at all. You need to submit the form via an ajax request so that the page is not refreshed. Here is the article about it https://www.w3schools.com/xml/ajax_intro.asp .
But it's much more convenient to send ajax requests using jQuery library (https://jquery.com).
So you can connect this library: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>. There is how use ajax by jQuery: https://www.w3schools.com/jquery/ajax_ajax.asp
If you have difficulties, i can detale write your code, just ask me.
I am trying to validate various forms in steps. I have 3 forms. I am able to get the first form to show and the rest to hide. When I click on "next" to show next form, the first form disappears, but the next form will not show up. Please advice what I am doing wrong. Here is my code
HTML
<!-- Progress Bar -->
<ul id="progressBar">
<li class="active">Account Basics</li>
<li>Account Details</li>
<li>Final Steps</li>
</ul>
<!-- <form class="form-horizontal" method="post" name="clientRegistration" action="" id="clientRegistration" data-validation="server" data-validation-url="processUser.php">-->
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_AccountBasics" >
<fieldset>
<!-- Form Name -->
<h2 class="fs-subtitle">Account Basics</h2>
<legend>Client Registration</legend>
<!-- firstName -->
<p>
<label class="col-md-4 control-label" for="firstName">First Name</label>
<input id="firstName" name="firstName" type="text" data-validation-regexp="^[a-zA-Z]+(([. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="First Name" class="form-control input-md rounded" required value="<?php (isset($_POST['firstName'])) ? $_POST['firstName'] : "" ;
?>">
</p>
<div id="fName-err-diag"></div>
<!-- lastName -->
<p>
<label class="col-md-4 control-label" for="lastName">Last Name</label>
<input id="lastName" name="lastName" type="text" data-validation-regexp="^[a-zA-Z]+(([. -][a-zA-Z ])?[a-zA-Z]*)*$" placeholder="Last Name" class="form-control input-md rounded" required value="<?php (!empty($_POST['lastName'])) ? $_POST['lastName'] : "" ;
?>">
</p>
<!-- company -->
<p>
<label class="col-md-4 control-label" for="company">Company</label>
<input id="company" name="company" type="text" data-validation-regexp="^[ A-Za-z0-9_.-]*$" placeholder="Company" class="form-control input-md rounded" value="<?php (!empty($_POST['company'])) ? $_POST['company'] : "" ;
?>">
</p>
<!-- email -->
<p>
<label class="col-md-4 control-label" for="email">Email</label>
<input id="email" name="email" type="text" placeholder="Email" class="form-control rounded" required value="<?php (!empty($_POST['email'])) ? $_POST['email'] : "" ; ?>">
</p>
<!-- phoneNumber -->
<p>
<label class="col-md-4 control-label" for="phoneNumber">Phone Number</label>
<input id="phoneNumber" name="phoneNumber" type="text" data-validation-regexp="^[0-9]{3}\.?[0-9]{3}\.?[0-9]{4}$" placeholder="###-###-####" class="form-control input-md rounded" required value="<?php (!empty($_POST['phoneNumber'])) ? $_POST['phoneNumber'] : "" ;
?>">
</p>
<p style="text-align: width: 90%" align="center">
<br/>
</p>
<!-- password1 -->
<p>
<label class="col-md-4 control-label" for="data-validation">Password</label>
<input name="userPass" id="userPass" type="password" placeholder="password" class="form-control input-md rounded" required>
</p>
<!-- password2 -->
<p>
<label class="col-md-4 control-label" for="password">Re-Enter Password</label>
<input name="userPassConfirmation" id="userPassConfirmation" type="password" placeholder="confirm password" class="form-control input-md rounded" required>
</p>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset></form>
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_AccountDetails" >
<fieldset>
<h2> Account Details</h2>
<legend>Client Registration</legend>
<!-- City -->
<p>
<label class="col-md-4 control-label" for="data-validation">City</label>
<input name="city" id="city" type="text" placeholder="city" class="form-control input-md rounded" required>
</p>
<!-- State -->
<p>
<label class="col-md-4 control-label" for="data-validation">State</label>
<input name="state" id="state" type="text" placeholder="state" class="form-control input-md rounded" required>
</p>
<!-- Zip Code -->
<p>
<label class="col-md-4 control-label" for="data-validation">Zip Code</label>
<input name="zipCode" id="zipCode" type="text" placeholder="zipCode" class="form-control input-md rounded" required>
</p>
<!-- Referrals -->
<p>
<label class="col-md-4 control-label" for="data-validation">How did you hear about us?</label>
<input name="referral" id="referral" type="text" placeholder="referral" class="form-control input-md rounded" required>
</p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset></form>
<form class="form-horizontal clientRegistration" method="post" action="" id="clientRegistration_FinalSteps" >
<fieldset>
<h2>Final Steps</h2>
<legend>Client Registration</legend>
<!-- CC info -->
<p>
CC info goes here
</p>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<!-- Submit Button -->
<div class="input-button">
<!-- <input type="submit" class="roundedSubmit" name="Submit" id="Submit" value="Submit">-->
<input type="submit" class="action-button" name="Submit" id="Submit" value="Submit">
</div>
</fieldset></form>
CSS
* {margin: 0; padding: 0;}
html {
height: 100%;
/*Image only BG fallback*/
/*background = gradient + image pattern combo*/
/*background:
linear-gradient(rgba(196, 102, 0, 0.6), rgba(155, 89, 182, 0.6));*/
}
body {
/* font-family: montserrat, arial, verdana; */
}
/*form styles*/
form {
width: 100%;
margin: 10px auto;
text-align: left;
position: relative;
}
form {
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: relative;
}
/*Hide all except first form*/
form:not(:first-of-type) {
display: none;
}
/*inputs*/
input[type="text"], textarea {
padding: 15px;
/*background-color: #1779ba;*/
border: 1px solid #ccc;
/*border-radius: 3px;*/
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
font-family: montserrat;
color: #2C3E50;
/*font-size: 13px;*/
}
/*buttons*/
input.action-button {
width: 100px;
background: #27AE60;
font-weight: bold;
color: white;
border: 0 none;
border-radius: 1px;
cursor: pointer;
padding: 10px 5px;
margin: 10px 5px;
}
form.clientRegistration .action-button:hover, form.clientRegistration .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: white;
text-transform: uppercase;
font-size: 9px;
width: 33.33%;
float: left;
position: relative;
}
#progressbar li:before {
content: counter(step);
counter-increment: step;
width: 20px;
line-height: 20px;
display: block;
font-size: 10px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after{
background: #27AE60;
color: white;
}
Javascript w/ jquery
<script src="js/jquery.struct.3.4.js"></script>
<script src="js/jquery.easing.1.3.min.js"></script><!-- UI Effects on Form -->
<script type="text/javascript">
// Show form in steps
//jQuery time
var current_fs, next_fs, previous_fs; //fieldset
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches
$(".next").click(function(){
/*validate form*/
//$.fn.validateForm();
if(animating) return false;
animating = true;
current_fs = $(this).parent();
console.dir(current_fs);
next_fs = $(this).parent().next();
next_fs.show();
//activate next step on progressbar using the index of next_fs
//$("#progressbar li").eq($("form").index(next_fs)).addClass("active");
//show the next form
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
$(".previous").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
//de-activate current step on progressbar
$("#progressbar li").eq($("form").index(current_fs)).removeClass("active");
//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});
Thought it would help to provide url of what I am trying to emulate, I changed the code from 1 form and 3 legends to 3 forms each with their own legend.
jsfiddle url: jsfiddle url of what I want to achieve
Any and all help would be appreciated. Thanks.
Try to point out the issue with your question from comment but I guess there is not enough space to summarize it.
What you intended to do is considered as a bad practice and abuse the usage of form. Each form generally has its own submit button and holds its own task (or business logic) so data can be sent to server for processing once you hit the submit button. And you would expect refresh and redirect your page to somewhere else upon submission. That's why we always want to have one form for each page and prevent duplicated submission.
If you noticed the url provides, data from all 3 panels are contained in just one account-create form. All data will be sent to server and validated at one time. There are many buttons but button types are different. If something is broken during the process, user can always restart from the beginning.
In short, form -> server.
If you separated them to three forms (even put each form into its own page), it's messy with a lot of security hole.
form1->server (pass the validation, account is created) , form2 somehow failed due to any reasons(internet issues,etc). Now users has trouble to go back to step1 because
the account is created, whether you have to create another block to solve this messy completely. Not to mention you are trying to put three forms with same intention within one page, it's unsalvageable on your case.
The required attribute in input type display's once at a time. Is it possible to display required notification in html5 all at once when the user submits the form?
This snippet will help you to implement form validation.
Here we are adding a data attribute data-required to identify the required field and implement the validation logic.
var $ = jQuery;
$('#form').on('submit', function(e) {
e.preventDefault();
let validation = validateForm($(this))
})
validateForm = (formElement) => {
let form = formElement;
let valid = true;
$('.error').remove();
const generalError = "<span class='error'>This Field can not be empty</span>";
form.find('.form-group').each(function(index, item) {
let formItem = $(item).find('.form-item');
// check only inputs with validation required
if (formItem.data('required')) {
let type = formItem.data('field');
let formItemLength = formItem.val().length
if (formItem.val() === '') {
$(item).append(generalError)
valid = false
}
if (formItem.attr('type') == 'checkbox' && !formItem.is(':checked')) {
$(item).append(generalError)
valid = false
}
}
})
return valid
}
form {
padding: 20px;
background: #2c3e50;
color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
form label,
form input,
form button {
border: 0;
margin-bottom: 3px;
display: block;
width: 100%;
}
form input {
height: 25px;
line-height: 25px;
background: #fff;
color: #000;
padding: 0 6px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
form button {
height: 30px;
line-height: 30px;
background: #e67e22;
color: #fff;
margin-top: 10px;
cursor: pointer;
}
form .error {
color: #ff0000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form" method="post">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-item" id="name" name="name" data-field="name" data-required="required">
</div>
<div class="form-group">
<label for="lastname">Lastname</label>
<input type="text" class="form-item" id="lastname" name="lastname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" class="form-item" data-field="email" data-required="required">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" id="phone" name="phone" class="form-item" data-field="phone" data-min="6" data-max="8" data-required="required">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-item" id="password" name="password" data-field="password" data-min="6" data-max="12" data-required="required">
</div>
<div class="form-group">
<label for="agreement">Agreement</label>
<input type="checkbox" class="form-item" id="agreement" name="agreement" data-required="required">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea cols="57" id="description" name="description" rows="10" class="form-item" data-field="description"></textarea>
</div>
<div class="form-action">
<input class="form-submit" type="submit" value="Apply">
</div>
</form>
Given that I have the following html bit:
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField.error {
content: 'validation error occurred';
display: block;
}
<form>
<div id="myField">
<p class="required">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="error" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
how can I show the validation error message above the input field, floating to the right? I don't want to modify the html code manually. However, adding some span tag using jquery or js is fine. All said, a css solution is preferred.
I made small change to your html, moved the error class from input to p element. And in css used ::before CSS pseudo element (and took the liberty to add a red border for input & red color for error message)
form p label {
display: block;
float: left;
font-size: 14px;
color: green;
}
#myField .error::before {
content: 'validation error occurred';
position: absolute;
top: -4px;
color: red;
}
#myField .error input {
border-color: red;
}
<form>
<div id="myField">
<p class="required error">
<label for="username">Username:</label>
<input type="text" name="username" id="username" class="" maxlength="10" value="" title="Username" required />
</p>
</div>
</form>
JS Fiddle link for this code
I am trying to create 2 divs that are next to each other but have a little space in between them. This is the following code that i have and the spacing is to far apart. I can't figure out how to set the spacing:
<style type="text/css">
.formLayout
{
background-color: #f3f3f3;
border: solid 1px #a1a1a1;
padding: 10px;
width: 300px;
border-radius: 1em;
}
.formLayout label, .formLayout input
{
display: block;
width: 120px;
float: left;
margin-bottom: 10px;
}
.formLayout label
{
text-align: right;
padding-right: 20px;
}
br
{
clear: left;
}
.box_header {
font-weight: 600;
color: #000000;
text-align: center;
border-radius: 1em;
}
</style>
<div class="formLayout" style="float:left;">
<div class="box_header">
Account Manager Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
</div>
<div class="formLayout" style="float:right;">
<div class="box_header">
Client Information
</div>
<label>First Name</label>
<input id="fname" name="fname"><br>
<label>Last Name</label>
<input id="lname" name="lname"><br>
<label>Address</label>
<input id="address1"><br>
<label></label>
<input id="address2"><br>
<label>City</label>
<input id="address2"><br>
<label>State</label>
<input id="zip"><br>
<label>Zip</label>
<input id="zip"><br>
</div>
On your second formLayout, you can do:
style='float:left; margin-left: 20px' instead of floating right: http://jsfiddle.net/33Tma/
Obviously you can change the margin to whatever you need.
Also, you should try to avoid inline styling as much as possible.