Current display
Im working on a asp.net site for work and I need to have inputs both text and checkboxes. My current solution is as follows:
<form method="post" style="width:100%">
<table style="padding:5px; width:100%">
<tr>
<td style="white-space:nowrap; width:1%">Printer name:</td>
<td><input type="text" name="PrinterName" value="#Request["PrinterName"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Model:</td>
<td><input type="text" name="Model" value="#Request["Model"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">Location:</td>
<td><input type="text" name="Location" value="#Request[" Location"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td style="white-space:nowrap">IP:</td>
<td>
<table style="margin:0px; padding:0px">
<tr>
<td style="padding:0px"><input type="text" name="IP" value="#Request["IP"]" style="max-width:100%; width:100%" /></td>
<td style="white-space:nowrap;width:1%">
<div><input style="margin:0px; padding:0px" type="checkbox" />QuickIP</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="white-space:nowrap">MAC(XX-XX-XX-XX-XX-XX):</td>
<td><input type="text" name="MAC" value="#Request["MAC"]" style="max-width:100%; width:100%" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Submit" class="Sumbit" style="max-width:100%; width:100%" /></td>
</tr>
</table>
</form>
The checkbox is not reporting the correct size(IE and Chrome) and the text is not being kept inside of the space either.
The aim is to have the text directly beside the checkbox, and both fo those being in line as small as possible to the right of the text input. How would i achieve that without this strange bug ?
Edit: in my testing i had switched the textbox and the button as wel las added a height in the style of the checkbox, those have been corrected now
Edit2: Added in a picture of what shows up right now
It seems you just need to remove height: 1% from
<td style="white-space:nowrap;width:1%">
<!-- remove the height from the style below -->
<div><input style="margin:0px; padding:0px; height:1%" type="checkbox" />QuickIP</div>
</td>
This will render the checkbox next to the "QuickIP" text
Take a look at this codepen.
I, getting a lot of errors in validator but I don't understand the reasons of it.
end tag for "form" omitted, but OMITTAG NO was specified
required attribute "action" not specified
<div class="serch_block">
<form method="post" action="/search">
<table>
<tr>
<td>
<input type="text" class="form_in" name="search" value="" />
</td>
<td>
<input type="image" src="/design/img/button.jpg" name="submit" style="width:20px;height:19px;" onfocus='this.value="";' value="Поиск" />
</td>
</tr>
</table>
</form>
</div>
document type does not allow element "span" here; missing one of "th", "td" start-tag
<tr>
<td width="30" valign="top" align="right" class="text2" style="padding-top:10px;padding-right: 62px;">Email:</td>
<td><input type="text" class="form_in" name="email" /></td>
<span id="error_email" style="color:#ff0000;" class="<?php if(!isset($errors['email']))echo 'invisible';?>">Name and / or E-mail / are required!</span>
</tr>
Can you help me with it?
Here is the form.
<form action="/" method="post">
<table align="center" border="0">
<tr class="boss">
<td width="30" valign="top" align="left" class="text2news">Имя:
</td>
<td>
<input type="text" class="form_in" name="name" />
<span id="error_name" style="color:#ff0000" class="invisible"></span> </td>
<!--</td> -->
</tr>
<tr>
<td width="30" valign="top" align="right" class="text2" style="padding-top:10px;padding-right: 62px;">Email:</td>
<td ><input type="text" class="form_in" name="email" /></td>
<span id="error_email" style="color:#ff0000;" class="invisible">Имя и /или E-mail/ обязательны для заполенения!</span>
</tr>
<tr class="registrationBot">
<td><input type="submit" name="subscribe" value="подписаться" /></td>
<td><input type="submit" name="unsubscribe" value="отписаться" /><input type="submit" name="cleenerror" value="закрыть" /></td>
</tr>
<tr>
<td colspan="2" style="color:#ff0000"></td>
</tr>
</table>
</form>
I want to add this calculator to my website html. What code should I write to my html? Can I do it without the extra javascript and css? Thanks in advance
There are few ways to do it but these are the two best options:
Use iframe - you don't need much extra javascript code, but you'll have to fiddle with the css and positioning as the calculator is in the middle of an empty page. As LearningPhase said, use <iframe src="http://www.superskinnyme.com/bf.html"></iframe> + styles.
Copy and paste HTML block (table) that includes the calculator, and copy the javascript code as well. You can access them through "View page source":
Javascript:
<script type="text/javascript" src="http://www.superskinnyme.com/js/fatcalc.js"></script>.
Table:
<table width="480px" border="0" cellspacing="0" cellpadding="0" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg" align="left">
<tbody><tr>
<td align="left"><form>
<table width="490" align="left" border="0" cellpadding="5" cellspacing="2" bgcolor="#F8FDFF" class="wp" background="http://www.superskinnyme.com/blog/wp-content/themes/repro/images/bg1.jpg">
<tbody><tr>
<td align="right" class="style4">Gender </td>
<td><label for="s1">
<input type="radio" id="s1" name="s" value="m" onclick="sex(this.form)">
<span class="wp"> Male</span></label>
<span class="wp">
<label for="s2"> </label>
</span>
<label for="s2">
<input type="radio" id="s2" name="s" value="f" onclick="sex(this.form)">
<span class="wp">Female</span></label></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Preferred measurement </strong></td>
<td><label for="d1">
<input type="radio" id="d1" name="d" value="1">
<span class="wp">Centimetres</span></label>
<label for="d2">
<input type="radio" id="d2" name="d" value="2.54">
<span class="wp">Inches</span></label>
<span class="wp">
<label for="d2"></label>
<label for="d2"> </label>
</span>
<label for="d2"></label></td>
</tr>
<tr>
<td><div align="right" class="wp"><strong>Height </strong></div></td>
<td><input type="text" id="h" name="h" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Neck </strong></td>
<td><input type="text" id="n" name="n" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right"><strong class="wp">Waist</strong> </td>
<td><input type="text" id="w" name="w" size="6" class="calcbox"></td>
</tr>
<tr>
<td align="right" class="wp"><strong>Hips</strong> </td>
<td><input type="text" id="r" name="r" size="6" disabled="disabled" class="calcbox"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="button" value="Calculate" onclick="calc(this.form);return false;" name="button2" class="calcbutton" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996;vertical-align:middle">
<input type="reset" value="Reset" onclick="clearForm(this.form)" class="calcbuttons" style="font-size:12px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight: bold;color:#305996; vertical-align:middle"></td>
</tr>
<tr>
<td height="19" colspan="2" align="center" class="bigbold"> </td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#DDDDDD" id="mus"><div align="center"><span class="smallw">RESULT</span></div></td>
</tr>
<tr>
<td align="right"><strong>BODY FAT </strong></td>
<td><input type="text" id="f" name="f" size="6" readonly="readonly" class="calcboxa"></td>
</tr>
</tbody></table>
</form></td>
</tr>
</tbody></table>
As I mentioned in the topic, even-though I have set the style to not display a particular part of the code given below, it still appears on the page. Should I be including the part of the code in a separate table? Please give your suggestions on what the problem could be.
<div id="submit">
<table
style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
; border="0" cellpadding="5" cellspacing="0" align="center">
<form id="frm" name="frm" action="http://app1/submitProxy.php"
method="POST" enctype="multipart/form-data">
<tr>
<th colspan="2" bgcolor="#004276"><font color="white">
Submit a File
</th>
</tr>
<tr>
<td>File:</td>
<td><input name="upfile" type="file" value="">
</td>
</tr>
<input type="hidden" name="email" readonly="readonly"
value="<%=user.getUserName()%>" /> <input type="hidden"
name="reanalyze" value="true" />
<tr>
<td>Case or Reference Number:</td>
<td><input type="text" name="caseno" value="${caseno}" /></td>
</tr>
<%-- <tr>
<td>Date acquired:</td>
<td><input type="text" name="acq" id="acq" readonly="readonly"
value="${document.frm.acq}" /><strong><a href="#"
onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
name="anchor1" id="anchor1"><font face="Helvetica,sans-serif">
SELECT</font> </a> </strong></td>
</tr>
<tr>
<td>Type of system acquired from:</td>
<td><input type="text" name="systemAcquired"
value="${systemAcquired}" /></td>
</tr> --%>
<tr>
<td>Obtained via:</td>
<td></td>
</tr>
<tr>
<td><dd>Search Warrant:</dd></td>
<td><input type="checkbox" name="searchWarrant"
onclick="showhidefield()" value="Y">
</td>
</tr>
<div id='hideablearea' style='display: none;'>
<tr>
<td>Search Warrant Number:</td>
<td><input name="searchWarrantNumber" type="text"
value="${searchWarrantNumber}" /> <br />
</td>
</tr>
<tr>
<td>Jurisdiction:</td>
<td><input name="jurisdiction" type="text"
value="${jurisdiction}" /> <br />
</td>
</tr>
</div>
<tr>
<td><dd>Grand Jury:</dd></td>
<td><input type="checkbox" name="grandJury" value="Y"
onclick="checkGrandJury()">
</td>
</tr>
<tr>
<td><dd>Found in the wild:</dd>
</td>
<td><input type="checkbox" name="foundInTheWild" value="Y"
onclick="checkFoundInTheWild()">
</td>
</tr>
<tr>
<td><dd>Email:</dd></td>
<td><input type="checkbox" name="obtainedEmail" value="Y"
onclick="checkObtainedEmail()">
</td>
</tr>
<tr>
<td><dd>Other:</dd></td>
<td><input type="checkbox" name="obtainedOther" value="Y"
onclick="checkObtainedOther()">
</td>
</tr>
<tr>
<td>Environment:</td>
<td><select name="sandboxes[]" size="1">
<option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option>
<option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name="notes">Add comments here...</textarea><br>
</td>
</tr>
<td colspan="2">
<center>
<input type="submit" name="button" value="Submit"
onclick="onSubmit()" />
</center>
</td>
</form>
</table>
</div>
A DIV between TRs is invalid HTML. Put the "display:none" on the TR itself.
</tr>
<div id='hideablearea' style='display: none;'> <----- invalid
<tr>
Arrgh, you broke the table: You inserted a 'div' tag within two table tr's, which is not valid html.
I suggest creating two separate tables, and hide the 2nd one. To make sure they have the same with, use the "width=" attribute on the table and td tags.
Or, as another approach, use "style='display:none;'" tag on each you want to hide, and toggle them by a class identification, eg like this:
<tr class="firstHidden" style="display:none;"> .....</tr>
With the right JS library (e.g. jQuery), toggling them on all at once is very simple:
$('.firstHidden').show();
All you have to do is put your id='hideablearea' style='display: none;' in the row(s) you're trying to hide - oh and remove the divs
you can't put table rows inside a div like that. It would be better to split your code into two tables, and hide the second.
<div id="submit">
<form id="frm" name="frm" action="http://app1/submitProxy.php"
method="POST" enctype="multipart/form-data">
<table
style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
; border="0" cellpadding="5" cellspacing="0" align="center">
<tr>
<th colspan="2" bgcolor="#004276"><font color="white">
Submit a File
</th>
</tr>
<tr>
<td>File:</td>
<td><input name="upfile" type="file" value="">
</td>
</tr>
<input type="hidden" name="email" readonly="readonly"
value="<%=user.getUserName()%>" /> <input type="hidden"
name="reanalyze" value="true" />
<tr>
<td>Case or Reference Number:</td>
<td><input type="text" name="caseno" value="${caseno}" /></td>
</tr>
<%-- <tr>
<td>Date acquired:</td>
<td><input type="text" name="acq" id="acq" readonly="readonly"
value="${document.frm.acq}" /><strong><a href="#"
onclick="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
title="cal1.select(document.frm.acq,'anchor1','MM/dd/yyyy'); return false;"
name="anchor1" id="anchor1"><font face="Helvetica,sans-serif">
SELECT</font> </a> </strong></td>
</tr>
<tr>
<td>Type of system acquired from:</td>
<td><input type="text" name="systemAcquired"
value="${systemAcquired}" /></td>
</tr> --%>
<tr>
<td>Obtained via:</td>
<td></td>
</tr>
<tr>
<td><dd>Search Warrant:</dd></td>
<td><input type="checkbox" name="searchWarrant"
onclick="showhidefield()" value="Y">
</td>
</tr>
</table>
<table id='hideablearea' style="display: none; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
; border="0" cellpadding="5" cellspacing="0" align="center">
<tr>
<td>Search Warrant Number:</td>
<td><input name="searchWarrantNumber" type="text"
value="${searchWarrantNumber}" /> <br />
</td>
</tr>
<tr>
<td>Jurisdiction:</td>
<td><input name="jurisdiction" type="text"
value="${jurisdiction}" /> <br />
</td>
</tr>
</div>
<tr>
<td><dd>Grand Jury:</dd></td>
<td><input type="checkbox" name="grandJury" value="Y"
onclick="checkGrandJury()">
</td>
</tr>
<tr>
<td><dd>Found in the wild:</dd>
</td>
<td><input type="checkbox" name="foundInTheWild" value="Y"
onclick="checkFoundInTheWild()">
</td>
</tr>
<tr>
<td><dd>Email:</dd></td>
<td><input type="checkbox" name="obtainedEmail" value="Y"
onclick="checkObtainedEmail()">
</td>
</tr>
<tr>
<td><dd>Other:</dd></td>
<td><input type="checkbox" name="obtainedOther" value="Y"
onclick="checkObtainedOther()">
</td>
</tr>
<tr>
<td>Environment:</td>
<td><select name="sandboxes[]" size="1">
<option value="00-0C-29-CF-B8-A6">VMSB1 - Windows 7</option>
<option value="00-0C-29-0A-AB-9A">VMSB2 - Windows XP</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea name="notes">Add comments here...</textarea><br>
</td>
</tr>
<td colspan="2">
<center>
<input type="submit" name="button" value="Submit"
onclick="onSubmit()" />
</center>
</td>
</table>
</form>
Thank you for you help. I was for some reason not able to use any of your ideas. But, I found a work-around to it. I used a drop down menu for selecting the "obtained via" option. And since I wanted extra fields only when I select search warrant, I did something like the following:
<jsp:include page="template-header-menu.jsp" />
<script type="text/javascript">
function showFields(num){
container = document.getElementById('field1GoHere');
container.innerHTML = '';
if(num == 1){
container.innerHTML += '<td>Search Warrant Number:</td><td><input name="searchWarrantNumber" type="text" value="${searchWarrantNumber}" /></td>';
}
container = document.getElementById('field2GoHere');
container.innerHTML = '';
if(num == 1){
container.innerHTML += '<td>Jurisdiction:</td><td><input name="jurisdiction" type="text" value="${jurisdiction}" /></td>';
}
}
.
.
.
.
.
</script>
<div id="submit">
<table
style="font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif"
; border="0" cellpadding="5" cellspacing="0" align="center" width=450>
<form id="frm" name="frm" action="http://app1/submitProxy.php"
method="POST" enctype="multipart/form-data">
.
.
.
.
.
.
. <tr>
<td width=450><font face="Helvetica,sans-serif">Obtained
via:* </font>
</td>
<td><select onchange="showFields(this.options[this.selectedIndex].value)">
<option value="0">Choose:</option>
<option value="1">Search Warrant</option>
<option value="2">Grand Jury</option>
<option value="3">Found in the wild</option>
<option value="4">Email</option>
<option value="5">Other</option></select>
</td>
</tr>
<tr id="field1GoHere"></tr>
<tr id="field2GoHere"></tr>
<tr>
<td colspan="2">
<center>
<input type="submit" name="button" value="Submit"
onclick="onSubmit()" />
</center></td>
</form>
</table>
</div>
<jsp:include page="template-bottom.jsp" />
Thus on selecting the drop down menu, the the options I wanted to hide appear and I didn't have to use the "display:none" at all.
There are two tables on my page and they appear side-by-side. I want to align the tops of the two tables. How to do that?
Edited:
<body>
<table id="main" cols="2">
<tr>
<td>
<Form id="frmNewEntry" method="post" action="insert_listing.php">
<table id="tblEntry" cols="3" style="border-color:lightblue; border-style:solid;">
<tr><td colspan="3" bgcolor="lightblue" align="center"><strong>Real-Time Vacancy Entry</strong></td></tr>
<tr><td>Date:</td><td><input id="LDate" name="LDate" type="text" size="20" maxlength="11"/>[Select Date from the Calendar Control]
<script type="text/javascript">
calendar.set("LDate");
</script></td>
<td>
<table>
<tr>
<td rowspan="6">
<!-- <iframe src="show_db_vacancy_entries.php" height="800px" width="300px" bordercolor="cyan">
</iframe> -->
</td>
</tr>
</table>
</td>
</tr>
<tr><td>Places:</td><td><input id="Places" name="Places" type="text" size="35" maxlength="30" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Company:</td><td><input id="Company" name="Company" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);">
<!-- <input type="button" value="Make Initial Capital" align="left" onclick="this.value=MakeInitialCapital(this.value);"></tr> -->
<tr><td>Designation:</td><td><input id="Designation" name="Designation" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"></td></tr>
<tr><td>Project Details:</td><td><textarea id="ProjectDetails" name="ProjectDetails" cols="100" rows="10"></textarea></td></tr>
<tr><td>Desired Candidate:</td><td><textarea id="DesiredCandidate" name="DesiredCandidate" rows="3" cols="100"></textarea> <br></td></tr>
<tr><td>HR Name:</td><td><input id="HRName" name="HRName" type="text" size="50" onblur="this.value=MakeInitialCapital(this.value);"> <br></td></tr>
<tr><td>HR Contact:</td><td><input id="HRContact" name="HRContact" type="text" size="50"> <br></td></tr>
<tr><td>Email:</td><td><input id="Email" name="Email" type="text" size="50"> <br></td></tr>
<tr></tr>
<tr>
<td bgcolor="lightblue">
<input id="Submit" name="Submit" value="Clear" type="button">
</td>
<td bgcolor="lightblue">
<input id="Submit" name="Submit" value="Submit" type="button">
</td>
</tr>
</table>
</Form>
</td>
<td>
<table id="list" cols="2" style="border:none">
<tr>
<td colspan="2" style="border:none">
<iframe src="show_db_vacancy_entries.php" height="800px" style="border:none;">
</iframe>
</td>
</tr>
<tr>
<td align="left">
<input id="Update" name="Update" value="Update" type="button">
</td>
<td align="right">
<input id="Delete" name="Delete" value="Delete" type="button">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
as far as i could understand your question: you should use:
<table id="table 1">
<tr>
<td valign="top">....<td>
</tr>
</table>
<table id="table 2">
<tr>
<td valign="top">....<td>
</tr>
</table>
Try This one
<div>
<table id="tbl1" style="float:left"></table>
<table id="tbl2" style="float:left"></table>
</div>