I have a table 900px wide with 13 columns. The problem I'm having is that my first column Tap won't change regardless of the width I give it. I want to make the first column smaller so that my last column doesn't look as squished.
This is what my table looks like:
I've even tried adding a style="width: 40px;" to my first column but it doesn't affect it.
.print_ttr {
width: 900px;
border: solid 1px;
border-collapse: collapse;
}
.print_ttr th {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.print_ttr td {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
text-align: center;
}
.print_tableInputBox {
width: 100%;
height: 100%;
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: black;
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
}
.holder{
width: 100%;
height: auto;
margin: 0 auto;
}
.section{
width: 100%;
margin-bottom: 15px;
}
<div class="section">
<div class="holder">
<table class="print_ttr">
<tbody>
<tr>
<th style="width: 30px;">Tap</th>
<th>Primary Voltage</th>
<th>Secondary Voltage</th>
<th>Calculated Ratio</th>
<th>Phase A Ratio</th>
<th>Phase A Excitation[mA]</th>
<th>Phase A Deviation %</th>
<th>Phase B Ratio</th>
<th>Phase B Excitation[mA]</th>
<th>Phase B Deviation %</th>
<th>Phase C Ratio</th>
<th>Phase C Excitation[mA]</th>
<th>Phase C Deviation %</th>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_334_7556" value="1">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_334_7556" value="28980">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_334_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_334_7556" value="48.3000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_334_7556" value="48.1370">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_334_7556" value="1.542">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_334_7556" value="48.1380">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_334_7556" value="2.493">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_334_7556" value="48.3220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_334_7556" value="2.398">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_334_7556" value="0.045">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_335_7556" value="2">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_335_7556" value="28290">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_335_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_335_7556" value="47.1500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_335_7556" value="47.2070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_335_7556" value="1.598">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_335_7556" value="0.120">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_335_7556" value="47.2110">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_335_7556" value="2.594">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_335_7556" value="0.122">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_335_7556" value="47.2250">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_335_7556" value="2.525">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_335_7556" value="0.159">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_336_7556" value="3">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_336_7556" value="27600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_336_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_336_7556" value="46.0000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_336_7556" value="1.689">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_336_7556" value="2.704">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_336_7556" value="46.0160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_336_7556" value="2.601">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_336_7556" value="0.010">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_337_7556" value="4">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_337_7556" value="26910">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_337_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_337_7556" value="44.8500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_337_7556" value="44.9060">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_337_7556" value="1.773">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_337_7556" value="44.9080">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_337_7556" value="2.830">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_337_7556" value="44.9160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_337_7556" value="2.736">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_337_7556" value="0.147">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_338_7556" value="5">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_338_7556" value="26220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_338_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_338_7556" value="43.7000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_338_7556" value="43.7160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_338_7556" value="1.857">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_338_7556" value="0.036">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_338_7556" value="43.7090">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_338_7556" value="2.970">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_338_7556" value="0.020">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_338_7556" value="43.7130">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_338_7556" value="2.874">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_338_7556" value="0.029">
</td>
</tr>
</tbody>
</table>
</div>
</div>
After inserting your code into JS Bin here, this is what it came out as:
Even after adding your container div:
You can try adding this to your code:
.print_ttr th:first-child{
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 30px;
}
I don't know what is going on, but I am pretty sure this is what you were looking for. I am using Google Chrome. Even after inserting your code into a code snippet it still comes out that way. Look here:
.print_ttr {
width: 900px;
border: solid 1px;
border-collapse: collapse;
}
.print_ttr th {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
}
.print_ttr td {
border-color: black;
font-size: 12px;
border: solid 1px;
border-collapse: collapse;
margin: 0;
padding: 0;
text-align: center;
}
.print_tableInputBox {
width: 100%;
height: 100%;
border: none;
display: inline-block;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: black;
text-align: center;
margin: 0;
padding: 0;
border-collapse: collapse;
}
<table class="print_ttr">
<tbody>
<tr>
<th style="width: 30px;">Tap</th>
<th>Primary Voltage</th>
<th>Secondary Voltage</th>
<th>Calculated Ratio</th>
<th>Phase A Ratio</th>
<th>Phase A Excitation[mA]</th>
<th>Phase A Deviation %</th>
<th>Phase B Ratio</th>
<th>Phase B Excitation[mA]</th>
<th>Phase B Deviation %</th>
<th>Phase C Ratio</th>
<th>Phase C Excitation[mA]</th>
<th>Phase C Deviation %</th>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_334_7556" value="1">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_334_7556" value="28980">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_334_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_334_7556" value="48.3000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_334_7556" value="48.1370">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_334_7556" value="1.542">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_334_7556" value="48.1380">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_334_7556" value="2.493">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_334_7556" value="0.338">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_334_7556" value="48.3220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_334_7556" value="2.398">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_334_7556" value="0.045">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_335_7556" value="2">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_335_7556" value="28290">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_335_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_335_7556" value="47.1500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_335_7556" value="47.2070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_335_7556" value="1.598">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_335_7556" value="0.120">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_335_7556" value="47.2110">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_335_7556" value="2.594">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_335_7556" value="0.122">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_335_7556" value="47.2250">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_335_7556" value="2.525">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_335_7556" value="0.159">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_336_7556" value="3">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_336_7556" value="27600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_336_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_336_7556" value="46.0000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_336_7556" value="1.689">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_336_7556" value="46.0070">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_336_7556" value="2.704">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_336_7556" value="0.010">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_336_7556" value="46.0160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_336_7556" value="2.601">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_336_7556" value="0.010">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_337_7556" value="4">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_337_7556" value="26910">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_337_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_337_7556" value="44.8500">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_337_7556" value="44.9060">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_337_7556" value="1.773">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_337_7556" value="44.9080">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_337_7556" value="2.830">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_337_7556" value="0.124">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_337_7556" value="44.9160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_337_7556" value="2.736">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_337_7556" value="0.147">
</td>
</tr>
<tr>
<td>
<input type="text" class="print_tableInputBox" name="ttr_0_338_7556" value="5">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_1_338_7556" value="26220">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_2_338_7556" value="600">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_3_338_7556" value="43.7000">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_4_338_7556" value="43.7160">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_5_338_7556" value="1.857">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_6_338_7556" value="0.036">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_7_338_7556" value="43.7090">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_8_338_7556" value="2.970">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_9_338_7556" value="0.020">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_10_338_7556" value="43.7130">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_11_338_7556" value="2.874">
</td>
<td>
<input type="text" class="print_tableInputBox" name="ttr_12_338_7556" value="0.029">
</td>
</tr>
</tbody>
</table>
Related
I'm trying to get a list of radio buttons listed below eachother inside a
table data. Is this possible? Here is my current code
<table>
<tr>
<td> Voornaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Studentennr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Achternaam </td>
<td> <input type="text" class="profiel_inp"> </td>
<td> Klas </td>
<td> <select class="selectinp">
<option value="volvo">V1L</option>
<option value="saab">V1C</option>
<option value="mercedes">V1E</option>
<option value="audi">V1F</option>
</select>
</td>
</tr>
<tr>
<td> Adres </td>
<td > <input type="text" class="profiel_inp size2"> </td>
<td> Studierichting </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > BIM <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SIE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
<td > SNE <input type="radio" class="profiel_inp" name="Studierichting"> </td>
</tr>
<tr>
<td> E-mail </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Telefoonnr </td>
<td> <input type="text" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geslacht </td>
<td> Man<input type="radio" name="geslacht" class="profiel_inp">
Vrouw<input type="radio" name="geslacht" class="profiel_inp"> </td>
</tr>
<tr>
<td> Geboortedatum </td>
<td> <input type="date" class="profiel_inp"> </td>
</tr>
</table>
with the CSS :
table {
width:100%;
margin-top:25px;
margin-bottom:25px;
}
input[type="text"], input[type="date"], .selectinp {
min-height:30px;
border:1px solid black;
padding:5px;
width:75%;
}
table tr {
padding-bottom:5px;
}
.size2 {
min-height:60px!important;
}
So ive got a table with a left and right side. Now on the left side is pretty basic but the right side has to contain a list of 4 radio buttons listed beneath eachother!
You could add them to a fieldset and wrap them in labels. Then in css set label display to block.
html
<td name="Studierichting">
<fieldset>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">BIM</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SIE</label>
<label><input type="radio" class="profiel_inp" name="Studierichting">SNE</label>
</fieldset>
css
label {
display:block;
}
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..
Sorry, this is my jsfiddle.net link >> http://jsfiddle.net/2vw1035n/
Why my column keep frozen at right side ?
This is my table
#table {
margin-left: 260px;
border: none;
font-size: 14pt;
font-weight: bold;
font-family: 'bookman old style';
}
<form>
<div class="regisContent">
<table id='regisTable'>
<tr>
<td>
<label for="fname">Name</label>
</td>
<td>:</td>
<td>
<input type="text" name="fname" id="fname" placeholder="Input your name here.." id='textConf'/>
</td>
</tr>
<tr>
<td>
<label for="passw">Password</label>
</td>
<td>:</td>
<td>
<input type="password" name="passw" id="passw" placeholder="Input your password here.." id='textConf'/>
</td>
</tr>
<tr>
<td>
<label for="cnpass">Confirm Password</label>
</td>
<td>:</td>
<td>
<input type="password" name="cnpass" id="cnpass" placeholder="Please input your password again.." id='textConf'/>
</td>
</tr>
<tr>
<td>
<label for="email">Email</label>
</td>
<td>:</td>
<td>
<input type="text" name="email" id="email" placeholder="Input your email here.." id='textConf'/>
</td>
</tr>
<tr>
<td>
<label for="phone">Phone</label>
</td>
<td>:</td>
<td>
<input type="phone" name="phone" id="phone" placeholder="Input your telephone number here.." id='textConf'/>
</td>
</tr>
<tr>
<td>
<label for="gender">Gender</label>
</td>
<td>:</td>
<td>
<input type="radio" name="gender" id="male" value="male"> Male
<input type="radio" name="gender" id="female" value="female"> Female
</td>
</tr>
<tr>
<td>
<label for="address">Address :</label><br/>
<textarea rows="7" cols="57" name="address" id="address" placeholder="Input your address here.."></textarea>
</td>
</tr>
<tr>
<td>
<fieldset id =box>
<legend>Terms & Conditions:</legend>
<pre id=terms>
Welcome to our website. If you continue to browse and use this website,
you are agreeing to comply with and be bound by the our terms
and conditions of use, which together with our privacy policy govern Baggy
Bag Shop relationship with you in relation to this website.
</pre>
</fieldset>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="agreement" id="ck" value="agreement">
<label for="ck" class='textConf'>I agree with the terms and conditions stated above</label>
</td>
</tr>
<tr>
<td>
<input type="submit" value="Submit"onclick="validate()"/>
<input type="reset" value="Cancel"/>
<!--<input type="button" value="Poke" onmouseover="this.style.background='white'" onmouseout="this.style.background='gray'" />-->
</td>
</tr>
</table>
</div>
</form>
I can not post any images here since i got no reputation ..
i switched up your table format a little and applied a max-width onto the td's with the label. demo here: http://jsfiddle.net/2vw1035n/2/
<tr>
<td>
<label for="fname">Name</label>:
</td>
<td>
<input type="text" name="fname" id="fname" placeholder="Input your name here.." id='textConf'/>
</td>
</tr>
css:
tr>td:nth-child(1) {
max-width:100px;
}
hope this helps
I have a html form with 124 fields, where some fields are required and others can be omitted. What is the best way to get all the filled out fields to the database?
I have already tried making a MySQL table with all the fields setting the fields that can be omitted to NULL but it won't enter any values when I click submit on my form.
This is the html form:
<table border="1">
<tr>
<td>
<form name="createcomp" method="post" action="createform.php">
<table class="table table-striped" border="0">
<tr>
<td>
<select name="regtype" class="input-xxlarge" required="">
<option selected value="">
Please select registration type
</option>
<option value="form1a">
Articles of Incorporation Company Limited by Shares (Form
1A)
</option>
<option value="form1a">
Articles of Incorporation Company Limited by Guarantee
Without a Share Capital (Form 1B)
</option>
<option value="form1a">
Articles of Incorporation Company Limited by Guarantee
With a Share Capital (Form 1C)
</option>
<option value="form1a">
Articles of Incorporation Unlimited Company (Form 1D)
</option>
<option value="form1a">
Registration of Business Names - Registration by Sole
Proprietor (FORM BN1)
</option>
<option value="form1a">
Registration of Business Names - Registration by
Partneship (FORM BN2)
</option>
<option value="form1a">
Registration of Business Names - Registration by
Corporation (FORM BN3)
</option>
</select>
</td>
</tr>
</table>
<table class="table table-striped">
<tr>
<td>
<input class="input-xlarge" type="text" name="compname"
required="" placeholder="1. NAME OF COMPANY">
</td>
<td></td>
<td>
<div id="available"></div>
</td>
</tr>
<tr>
<td>
<input class="input-xxlarge" type="tel" name="faxnum"
placeholder="1A. COMPANY FAX NUMBER (XXX) XXX-XXXX" required=
"">
</td>
<td>
<label class="control-label">1B. TYPE OF COMPANY</label>
</td>
<td>
<label class="radio inline"><input type="radio" name=
"comptype" id="inlinePub" value="public" required="">
PUBLIC</label> <label class="radio inline"><input type=
"radio" name="comptype" id="inlinePriv" value="private"
required=""> PRIVATE</label>
</td>
</tr>
<tr>
<td>
<label class="control-label">2. IS THE REGISTERED OFFICE IS
SITUATED JAMAICA?</label>
</td>
<td>
<label class="radio inline"><input type="radio" name=
"injamaica" id="inlineYes" value="yes" required="">
YES</label> <label class="radio inline"><input type="radio"
name="injamaica" id="inlineNo" value="no" required="">
NO</label>
</td>
</tr>
</table><br>
<table class=" table table-striped" border="0">
<tr>
<td>
<label class="control-label">3. CORE BUSINESS OF THE
COMPANY</label>
</td>
<td>
<input type="text" name="coredescrip" placeholder=""
required="">
</td>
</tr>
<tr>
<td>
<label class="control-label">4. THE CLASSES OF SHARES, IF ANY
THAT THE COMPANY IS AUTHORIZED TO ISSUE</label>
</td>
<td>
<input type="text" name="classshare" placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">4A. THE MAXIMUM NUMBER OF
SHARES, IF ANY THAT THE COMPANY IS AUTHORIZED TO
ISSUE</label>
</td>
<td>
<input type="text" name="maxshares" placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">5. RESTRICTIONS,IF ANY, ON SHARE
TRANSFERS</label>
</td>
<td>
<input type="text" name="resshares" placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">6. MINIMUM NUMBER OF
DIRECTORS</label>
</td>
<td>
<input type="text" name="mindirectors" placeholder=""
required="">
</td>
</tr>
<tr>
<td>
<label class="control-label">6A. MAXIMUM NUMBER OF
DIRECTORS</label>
</td>
<td>
<input type="text" name="maxdirectors" placeholder=""
required="">
</td>
</tr>
</table>
<table class=" table table-striped" border="0">
<tr>
<td>
<label class="control-label">6B. NAMES OF FIRST
DIRECTORS</label>
</td>
<td>
<label class="control-label">NAME(S)</label>
</td>
<td>
<label class="control-label">RESIDENTIAL ADDRESS</label>
</td>
<td>
<label class="control-label">OCCUPATION</label>
</td>
<td>
<label class="control-label">CONTACT #</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="dirname1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="diraddress1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="diroccu1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="dircontact1"
placeholder="(XXX)XXX-XXXX" required="">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="dirname2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diraddress2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diroccu2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="dircontact2"
placeholder="(XXX)XXX-XXXX">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="dirname3"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diraddress3"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diroccu3"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="dircontact3"
placeholder="(XXX)XXX-XXXX">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="dirname4"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diraddress4"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diroccu4"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="dircontact4"
placeholder="(XXX)XXX-XXXX">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="dirname5"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diraddress5"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="diroccu5"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="dircontact5"
placeholder="(XXX)XXX-XXXX">
</td>
</tr>
<tr>
<td>
<label class="control-label">6C.NAME OF 1ST COMPANY
SECRETARY</label>
</td>
<td>
<label class="control-label">NAME(S)</label>
</td>
<td>
<label class="control-label">RESIDENTIAL ADDRESS</label>
</td>
<td>
<label class="control-label">OCCUPATION</label>
</td>
<td>
<label class="control-label">CONTACT #</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="secname"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="secaddress"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="seecoccu"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="seccontact"
placeholder="(XXX)XXX-XXXX" required="">
</td>
</tr>
</table>
<table class=" table table-striped" border="0">
<tr>
<td>
<label class="control-label">7. RESTRICTIONS, IF ANY, ON THE
BUSINESS THE COMPANY MAY CARRY ON</label>
</td>
<td>
<input class="input-xlarge" type="text" name="busrestricts"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">7A. JUSTIFICATION OF PROPOSED
NAME, WHERE APPLICABLE</label>
</td>
<td>
<input class="input-xlarge" type="text" name="namejustify"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">8. THE FOLLOWING ARTICLES FROM
TABLE A SHALL APPLY WITHOUT VARIATION</label>
</td>
<td>
<div id="myModal" class="modal hide fade" tabindex="-1" role=
"dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">×</button>
<h4 id="myModalLabel">
TABLE A - Articles Relevant to Questions 8 and 8A.
</h4>
</div>
<div class="modal-body">
<h5>
SCHEDULE I
</h5>
<h6>
Article 85
</h6>
<p>
“The Directors may exercise all the power of the
Company to borrow money, and to mortgage or charge its
undertaking, property and uncalled capital, or any part
thereof, and to issue debentures, debenture stock, and
other securities whether outright or as security for
any debt, liability or obligation of the Company or of
any third party.”
</p>
<h5>
SCHEDULE II
</h5>
<h6>
Article 143
</h6>
<p>
‘Subject to the provisions of sections 56, 57 and 58 of
the Act, a Company may issue shares which by the terms
of the issue will be redeemed or at the option of the
Company, may be redeemed.’
</p>
<h6>
Article 144
</h6>
<p>
‘Subject to the provisions of section 58 of the Act, a
Company may purchase or otherwise acquire shares issued
by it.’
</p>
<h6>
Article 145
</h6>
<p>
‘Subject to section 59 of the Act, the Company may
acquire its own shares of any class to:
</p>(a) settle or compromise a debt or claim asserted by
or against the Company
<p>
(b) eliminate fractional shares
</p>
<p>
(c) fulfill the terms of non-assignable agreement under
which the Company has an option or is obliged to
purchase shares owned by an officer or an employee of
the Company.’
</p>
<h6>
Article 146
</h6>
<p>
'No share or class of shares may be issued unless the
shares have first been offered to the shareholders of
the Company holding shares of that class.’
</p>
<h6>
Article 147
</h6>
<p>
‘Subject to section 71 of the Act, the Company may by
special resolution:
</p>
<p>
(a) extinguish or reduce a liability in respect of an
amount unpaid on any shares;
</p>
<p>
(b) reduce its stated capital by an amount that is not
represented by realizable assets; or
</p>
<p>
(c) return to its shareholders any of its assets which
are in excess of the wants of the Company.’
</p>
<h6>
Article 148
</h6>
<p>
‘Subject to section 184 of the Act, the Company may
give financial assistance by means of a loan, guarantee
or otherwise:
</p>
<p>
(a) to a shareholder, director, officer or employee of
the Company or affiliated company, or to an associate
of any such person for any purpose; or
</p>
<p>
(b) to any person for the purpose of, or in connection
with, a purchase of a share issued or to be issued by
the Company or a company with which it is affiliated.’
</p>
<h6>
Article 149
</h6>
<p>
‘Subject to section 201 of the Act, the Company may
pursuant to section 201 indemnify:
</p>
<p>
(a) a director or officer of the Company or any person
employed by the Company as an auditor;
</p>(b) a former director, officer or auditor of the
Company; or (c) a person who acts or has acted at the
Company’s request as a director or officer of a body
corporate of which the Company is or was a shareholder or
creditor, and his legal representatives, against all
costs, charges and expenses reasonably incurred by him in
respect of any civil, criminal or administrative action
or proceeding to which he is made a party by reason of
being, or having been, a director or officer of that
company or body corporate, or any person employed by a
company or body corporate or an auditor.’
</div>
<div class="modal-footer"></div>
</div><a data-toggle="modal" data-target="#myModal" class=
"btn" role="button">ARTICLES 7-84 and 86-142 SHALL APPLY</a>
</td>
</tr>
<tr>
<td>
<label class="control-label">8. THE FOLLOWING ARTICLES FROM
TABLE A SHALL APPLY WITHOUT VARIATION</label>
</td>
<td>
<a data-toggle="modal" data-target="#myModal" class="btn"
role="button">SEE SCHEDULE 1 for varied artcles 85 and
schedule 2 for articles 143-149 ATTACHED</a>
</td>
</tr>
<tr>
<td>
<label class="control-label">9. HAS THERE BEEN AN ALLOTMENT
OF SHARES FOR CONSIDERATION OTHER THAN CASH PURSUANT TO A
PREINCORPORATION CONTRACT?</label>
</td>
<td>
<label class="radio inline"><input type="radio" name=
"allotshares" id="inlineYes" value="yes" required="">
YES</label> <label class="radio inline"><input type="radio"
name="allotshares" id="inlineNo" value="no" required="">
NO</label>
</td>
</tr>
<tr>
<td>
<label class="control-label">9A. THE NATURE AND VALUE OF THIS
CONSIDERATION IS SET OUT BELOW:</label>
</td>
<td>
<input class="input-xlarge" type="text" name="nature"
placeholder="">
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<label class="control-label">10. LIABILITY OF THE MEMBERS IS
LIMITED</label>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>
<label class="control-label">11. SUBSCRIBERS AND WITNESSES
(Where a company is subscriber, two officers must sign on
behalf of the company. See attached schedule III.)</label>
</td>
</tr>
</table>
<table class=" table table-striped">
<tr>
<td></td>
<td>
<label class="control-label">SUBSCRIBE 1</label>
</td>
<td>
<label class="control-label">SUBSCRIBE 2</label>
</td>
<td>
<label class="control-label">SUBSCRIBE 3</label>
</td>
</tr>
<tr>
<td>
<label class="control-label">PRINT NAME</label>
</td>
<td>
<input class="input-medium" type="text" name="susname1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="susname2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="susname3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">ADDRESS 1</label>
</td>
<td>
<input class="input-medium" type="text" name="susaddr1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="susaddr2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="susaddr3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">ADDRESS 2</label>
</td>
<td>
<input class="input-medium" type="text" name="susaddr21"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="susaddr22"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="susaddr23"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">OCCUPATION</label>
</td>
<td>
<input class="input-medium" type="text" name="susoccu1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="susoccu2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="susoccu3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label"># OF SHARES TAKEN</label>
</td>
<td>
<input class="input-medium" type="text" name="susshare1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="susshare2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="susshare3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">CONTACT #</label>
</td>
<td>
<input class="input-medium" type="text" name="suscontact1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="suscontact2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="suscontact3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">DATE</label>
</td>
<td>
<input class="input-medium" type="date" name="susdate1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="date" name="susdate2"
placeholder="">
</td>
<td>
<input class="input-medium" type="date" name="susdate3"
placeholder="">
</td>
</tr>
<tr>
<td></td>
<td>
<label class="control-label">WITNESS 1</label>
</td>
<td>
<label class="control-label">WITNESS 2</label>
</td>
<td>
<label class="control-label">WITNESS 3</label>
</td>
</tr>
<tr>
<td>
<label class="control-label">PRINT NAME</label>
</td>
<td>
<input class="input-medium" type="text" name="witname1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="witname2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="witname3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">ADDRESS 1</label>
</td>
<td>
<input class="input-medium" type="text" name="witaddr1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="witaddr2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="witaddr3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">ADDRESS 2</label>
</td>
<td>
<input class="input-medium" type="text" name="witaddr21"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="witaddr22"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="witaddr23"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">OCCUPATION</label>
</td>
<td>
<input class="input-medium" type="text" name="witoccu1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="witoccu2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="witoccu3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">CONTACT #</label>
</td>
<td>
<input class="input-medium" type="text" name="witcontact1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="text" name="witcontact2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="witcontact3"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">DATE</label>
</td>
<td>
<input class="input-medium" type="date" name="witdate1"
placeholder="" required="">
</td>
<td>
<input class="input-medium" type="date" name="witdate2"
placeholder="">
</td>
<td>
<input class="input-medium" type="date" name="witdate3"
placeholder="">
</td>
</tr>
</table>
<table class=" table table-striped">
<tr>
<td>
<label class="control-label">13.PARTICULARS OF
DIRECTORS</label>
</td>
<td>
<label class="control-label">NAME OF DIRECTORS</label>
</td>
<td>
<label class="control-label">EMAIL ADDRESS</label>
</td>
<td>
<label class="control-label">TRN NUMBER</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="pdirname1"
required="">
</td>
<td>
<input class="input-medium" type="email" name="pdiremail1"
required="">
</td>
<td>
<input class="input-medium" type="text" name="pditrn1"
required="">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="pdirname2"
placeholder="">
</td>
<td>
<input class="input-medium" type="email" name="pdiremail2"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="pditrn2"
placeholder="">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="pdirname3"
placeholder="">
</td>
<td>
<input class="input-medium" type="email" name="pdiremail3"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="pditrn3"
placeholder="">
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="pdirname4"
placeholder="">
</td>
<td>
<input class="input-medium" type="email" name="pdiremail4"
placeholder="">
</td>
<td>
<input class="input-medium" type="text" name="pditrn4"
placeholder="">
</td>
</tr>
<tr>
<td>
<label class="control-label">13.PARTICULARS OF
SECRETARY</label>
</td>
<td>
<label class="control-label">NAME OF SECRETARY</label>
</td>
<td>
<label class="control-label">EMAIL ADDRESS</label>
</td>
<td>
<label class="control-label">TRN NUMBER</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="psecname"
required="">
</td>
<td>
<input class="input-medium" type="email" name="psecemail"
required="">
</td>
<td>
<input class="input-medium" type="text" name="psectrn"
required="">
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
<table class=" table table-striped">
<tr>
<td>
<label class="control-label">12. THIS FORM WAS COMPLETED
BY?</label>
</td>
<td>
<label class="control-label">PRINT NAME</label>
</td>
<td>
<label class="control-label">DATE</label>
</td>
<td>
<label class="control-label">TRN NUMBER</label>
</td>
<td>
<label class="control-label">EMAIL ADDRESS</label>
</td>
</tr>
<tr>
<td></td>
<td>
<input class="input-medium" type="text" name="creatrname"
required="">
</td>
<td>
<input class="input-medium" type="date" name="creatrdate"
required="">
</td>
<td>
<input class="input-medium" type="text" name="creatrtrn"
required="">
</td>
<td>
<input class="input-medium" type="email" name="creatremail"
required="">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="hidden" name="user_id" value=
"<?php echo $userid;?>">
</td>
<td>
<input type="submit" name="Submit" value="Register" class=
"btn-large">
</td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
</table>