I have a reservation form on my website, I own a limo company.
But in order to save space on my website I want to know how to make a 2 column form.
This is my form now:
<form method="post" id="myForm" action="send2.php" class="sendmail" onsubmit="return validateForm()" style="text-align:center;">
<h1 class="lead" align="center" style="font-size:35; font-weight:800">RESERVE TRIP</h1>
<ul li><h1 class="lead" align="center" style="color:black;font-weight:bold;list-style:none;">Contact Information</h1></ul li>
<ul li style="list-style:none">
<li>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<p>
<table>
<td><p><label>Full Name:<input type="text" id="name" name="name" style="margin:10px; width:285px; height:15px"></td>
<td><p><label>Company Name:<input type="text" id="company" name="company" style="margin:10px; width:340px; height:15px"></label></p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<p><label>Phone #:<input type="text" id="phone" name="phone" placeholder="###-###-####" style="margin:10px; width:100px; height:15px">
</td>
<td class="width:70px; height:15px">
<p><label>E-mail:<input type="text" id="email" name="email" style="margin:10px; width:220px; height:15px">
</td>
</tr>
<tr>
</td>
</tr>
</table>
</li>
</ul>
<ul li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Pick-Up Information</h1></ul li>
<ul li style="list-style:none">
<li>
<option selected="">--</option>
<option>AM</option>
<option>PM</option>
</select></td>
</p>
</table>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="rtairport" name="rtairport" class="input85" style="width:180px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="rtairline" name="rtairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="rtfnumber" name="rtfnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</td>
</tr>
<tr>
<td>
</tr>
</td>
</table>
<br>
<li><h1 class="lead" align="center" style="font-weight:bold;color:black;list-style:none">Drop-Off Information</h1></li>
<ul li style="list-style:none">
<center><p><label>Full Address:<input type="text" id="rtstreet" name="rtstreet" style="margin:10px; width:360px; height:15px"></label></p></center>
<table align="center">
<tr>
<td class="width:110px; height:15px">
<label style="font-size:15px">Airport Name: <span class="error"></span></label>
<td class="width30">
<input type="text" id="doairport" name="doairport" class="input85" style="width:200px; margin:10px" value="">
</td>
</td>
<td class="width:110px; height:15px" align="center">
<label style="font-size:15px">Airline/Code:</label>
<td class="width30">
<input type="text" id="doairline" name="doairline" class="input85" style="width:75px; margin:10px" value="">
</td>
</td>
<td class="width:70px; height:15px">
<label style="font-size:15px">Flight #:</label>
<td class="width30">
<input type="text" id="dofnumber" name="dofnumber" class="input85" style="width:40px;margin:10px" value="">
</td>
</table>
</div>
</ul></li>
Any help/advice would help. Thank you.
Put the form fields in two separate divs and float them left. Also make sure to set their widths and to make them fit next to each other.
Make two <div>s. These will be the two columns. Then, in their css, add float: left. If you need any more help, just ask.
What browsers do you need to support? If you're OK using semi-experimental CSS3 features that won't work in older browsers, just use CSS3 columns.
it looks like you need some work with your tables
a general table format might look like
<form action="checkInput.php" method="POST">
<table border="1px solid #C00">
<tr>
<th colspan="2">Table Heading</th>
</tr>
<tr>
<td>Column 1</td><td>Column 2</td>
</tr>
<tr>
<td>An Input for Column 1
<input class="inputCSS" type="text" id="col1input" placeholder="Input Column 1" />
</td>
<td>An Input for Column 2
<input class="inputCSS" type="text" id="col2input" placeholder="Input Column 2" />
</td>
</tr>
<tr>
<td>Another row down for<br>Column 1</td><td>Another row down for<br>Column 2</td>
</tr>
</table>
</form>
this example shows a title "Table Heading" and 3 rows by 2 columns. if you follow the pattern with the <tr> (table rows) and <td> (individual cells) you can expand on this 2 column format. Then you can tweak it to your preference. Also, keep the columns you want lined up in the same tables so the browser lines them up for you
once you start to understand how to type tables, a 2 column form won't be hard.
Related
In HTML I am making a form where there are 2 tables side by side. In one table all the form <label>/Name/E Mail/Password</label> and in another table I am trying to put the form <inputs> text/email/password to make them look nicely visible.
But when I gave the label Message and <textarea name="Message" rows="1" cols="30"></text area> my whole form layout is getting disturbed due to which I am not able keep my initial labels and inputs aligned.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<table>
<tr>
<td>
<label>Name</label>
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
When the labels and inputs are aligned
When the labels and inputs are not aligned
There is no need for the extra table inside of the table, and you are including everything inside of 1 row, which is why its formatted like that.
You shouldn't be using tables for this, not when you have things like CSS Flexbox and CSS Grid. Here is a basic example of using flexbox with a form.
But if you must use a table, try a table format like this ...
<table>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
<tr>
<td>label here</td>
<td>form field here</td>
</tr>
...
</table>
Here is an example using your code.
<form class="" action="index.html" method="post">
<table>
<tr>
<td>
<label>Name</label>
</td>
<td>
<input type="text" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Email</label>
</td>
<td>
<input type="email" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Password</label>
</td>
<td>
<input type="password" name="" value="">
</td>
</tr>
<tr>
<td>
<label>Message</label>
</td>
<td>
<textarea name="Message" rows="1" cols="30"></textarea>
</td>
</tr>
</table>
</form>
I am trying to develop a form, which has Emp details and Personal info details i need to display in the the below way.
This is my code
<table style="border: 1px solid; width: 900px; height: 200px; table-layout:fixed">
<tr>
<td>
<label for="Employee" style="height:20px">Employee:</label>
</td>
<td>
<label for="Id" style="height: 20px">Id</label>
</td>
<td>
<input type="text" id="txtId" />
</td>
<td>
<label for="Designation" style="height:20px">Designation</label>
</td>
<td>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td> <label for="Mail" style="height: 20px">Mail</label></td>
<td> <input type="text" id="Text3" /> </td>
<td> <label style="height: 20px">Ext</label> </td>
<td> <input type="text" id="Text4" /> </td>
</tr>
<tr>
<td>
<label for="PersonalInfo" style="height:20px">Personal Info:</label>
</td>
<td>
<label for="Name" style="height:20px">Name:</label>
</td>
<td>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="City" style="height:20px">City:</label>
</td>
<td>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label for="State" style="height:20px">State:</label>
</td>
<td>
<input type="text" id="txtState" />
</td>
</tr>
</table>
The issue is the textboxes are not in the same line and the form looks weird.
You can start like this:
table{border: 1px solid; width: 1500px;}
table tr td label{width: 95px;display: inline-flex;}
<table>
<tr>
<td>
<label>Employee:</label>
</td>
<td>
<label id="lblId">Id</label>
<input type="text" id="txtId " />
<label id="lblDesig">Designation</label>
<input type="text" id="txtDesig" />
</td>
</tr>
<tr>
<td></td>
<td>
<label id="Label3">Mail</label>
<input type="text" id="Text3 " />
<label id="Label4 ">Ext</label>
<input type="text" id="Text4" />
</td>
</tr>
<tr>
<td>
<label>Personal Info:</label>
</td>
<td>
<label>Name:</label>
<input type="text" id="txtName" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>City:</label>
<input type="text" id="txtCity" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<label>State:</label>
<input type="text" id="txtState" />
</td>
</tr>
</table>
I'm guessing you have to use tables for some reason? If not consider moving to using something a little more practical. Tables are cumbersome for this sort of thing. Having a column based approach would make a lot more sense.
In order to do this with tables, you're going to have to nest them. I only did a portion of the table to give you an idea of how to do it. So don't copy paste this. I took the IDs out to make it simpler to read. You'll obviously want those in there. Also when you run the code snippet make sure you scroll all the way left as the width is set to 1500. You can edit this when you apply it to your code. Just change where it says width: 33% to whatever you need.
<table style="border: 1px solid; width: 1500px; height: 400px;">
<tr>
<td style="width:33%;">
<label style="height:20px; width:33%;">Employee:</label></td>
</td>
<td style="width:33%;">
<table>
<tr>
<td><label height: 20px ">Id</label></td>
<td><input type="text " /></td>
<td><label id="lblDesig " height: 20px">Mail</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
<tr>
<td><label style="height:20px;">Designation</label</td>
<td><input type="text" id="txtDesig" /></td>
<td><label id="lblId" height: 20px ">Ext</label></td>
<td><input type="text" id="txtDesig" /></td>
</tr>
</table>
</td>
</tr>
</table>
Normally table shouldn't be used for layout. Suggest using Bootstrap Grid system and Forms: http://getbootstrap.com/css/#grid
It gives you a modern/professional look, as well as handles different resolutions/devices for you nicely.
Here is a simple example:
<div class="row">
<div class="col-lg-2">
<label>Employee</label>
</div>
<div class="col-lg-5">
<div class="form-group">
<label for="Id" class="col-sm-2 control-label">ID</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Id">
</div>
</div>
<div class="form-group">
<label for="Mail" class="col-sm-2 control-label">Mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Mail">
</div>
</div>
</div>
<div class="col-lg-5"></div>
</div>
I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..
I trying to make the text bar wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
This is my HTML:
HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Benodigheden">Benodigheden:</label>
</td>
<td>
<input type="text" id="Benodigheden"name="Benodigheden" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
While the above code is very good, minimal and clean, which is best. But IF you need different widths for each of your text inputs then inline CSS is needed.
Example code:
<input style="width: 300px;" type="text">
<input style="width: 340px;" type="text">
If you only wish to make input-type="text" have a certain width, add this style in your css file fx:
input[type=text] {
width: 300px;
}
add some css to the head section of your html
<style>
input{width: 300px}
</style>
Make your table wider.
Add desired width to your td's
Ajust your inputs widht.
I want to use two forms inside a JSP page, in which one form is of enctype="multipart/form-data" and another is of simple Post method, but it's not working. How should I deal with this?
1)
<form action="NewUserRegn" method="POST">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr class="entry">
<th class="entry" colspan="2">
Personal Details
</th>
</tr>
<tr>
<td class="entry">
Candidate's Name :<br>
<p>(As given in Matriculation Certificate)</p>
</td>
<td class="entry">
<input type="text" name="cdname" size="35" />
</td>
</tr>
<tr>
<td class="entry">
Gender :
</td>
<td class="entry">
<input type="radio" name="gender" value="Male" />Male
<input type="radio" name="gender" value="Female" />Female
</td>
</tr>
</table>
</form>
2)
<form name="docs"
action="NewUserRegn"
method="POST"
enctype="multipart/form-data">
<table class="mai">
<tr>
<td>
<table class="entry">
<tr>
<th class="entry" colspan="2">
Documents Upload
</th>
</tr>
<tr>
<td class="entry">
Photograph : <input type="file" name="photo" accept="image/*"/>
</td>
<td class="entry">
Signature : <input type="file" name="sign" accept="image/*"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
<table class="mai">
<tr>
<td>
<input type="submit"
value="Recheck"
name="recheck" /></center>
</td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
</form>