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.
Related
I tried adding an image to the table data, but it turned out to be very small and took up a lot of space. I also need to only use HTML for this challenge. Image size for a calculator is 400x300 (heigh and width).
my outputenter image description here
expected outputenter image description here
my code
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="calculator.jpg" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
Use CSS to tell the system what size you want the image to be and that you want all the image to be visible, whatever its aspect ratio compared to the size of space you can give it.
For example for a space with height 400px and width 300px:
<img src="calculator.jpg" style="height: 400px; width: 300px;object-fit: contain;">
I think that problem is associated with Your image as I did code pen on it. With another image. It worked Fine.
https://codepen.io/ash_000001/pen/abVqXxq?editors=1000
<html>
<body>
<table border="1">
<tr>
<td>
<form action="">
<table cellpadding="3">
<tr>
<td colspan="2" align="center">
<font size="20" color="blue">Calculator</font><br />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<img src="https://media.istockphoto.com/vectors/mobile-phone-vibrating-or-ringing-flat-vector-icon-for-apps-and-vector-id1141778521?k=20&m=1141778521&s=612x612&w=0&h=HR00_7snTNcWcsXAFuzcVPTPnU--qT8R6H-ve4lG2m8=" height="300" width="400" />
</td>
</tr>
<tr>
<td><label for="">Input1</label></td>
<td><input type="number" name="input1" /><br /></td>
</tr>
<tr>
<td><label for="">Input2</label></td>
<td><input type="number" name="input2" /><br /></td>
</tr>
<tr>
<td><label for="">Select Operation</label></td>
<td>
<select name="operation">
<option value="Select..">Select..</option>
<option value="ADD">ADD</option>
<option value="SUBTRACT">SUBTRACT</option>
<option value="MULTIPLY">MULTIPLY</option>
<option value="DIVIDE">DIVIDE</option></select
><br />
</td>
</tr>
<tr>
<td>
<input
type="image"
name="submit"
img
src="calc.jpg"
alt="Submit"
height="80"
width="80"
/>
</td>
<td>
<input
type="image"
name="reset"
img
src="reset.jpg"
alt="Reset"
height="80"
width="80"
/>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</body>
</html>
I have following simple HTML form:
<html>
<head>
</head>
<body>
<table border="0" cellpadding="2" cellspacing="0" width="400">
<form name="logon" method="post" id="logon" action="take.php">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>
</form>
</table>
</body>
</html>
When I open this page in any browser and inspect element, I found weird structure of the HTML form. I found <form> tag immediately closed after start,
please find the screen shot of html form inspection,
What is the reason behind this?
In HTML, when you open a tag within another tag, the tag you open (in your case the <form> tag) gets clsoed when its parent gets closed.
Therefore (for example):
<p><form></p>
<p></form></p>
will result in the following:
<p><form></form></p>
<p></p>
This is because, according to the W3C (which sets international standards on HTML among other things), the only context a form element can be used in is where flow content can be expected. Flow content are most elements that are used in the body of documents and applications, for example:
The solution to this is to place the form tags above that of the table, encasing the table in the form as below:
<form>
<table>
</table>
</form>
To clarify:
You need to be sure that the table is inside the form tags. See a complete example as working below:
<html>
<head>
</head>
<body>
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton">
<button type="submit" form="nameform" value="Submit">Submit</button>
</p>
</td>
</tr>
</table>
</form>
</body>
</html>
Using the inspect function in Chrome proves that the output to the browser shows the table nested inside of the form tags:
Feel free to ask any further questions.
Move the table tags inside of the form also:
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>
</table>
</form>
The reason for this could just be that the form is unsure why there are tr tags without a table tag within it. It seems a strange limitation however maybe somebody else can clarify further.
you have this:
<table border="0" cellpadding="2" cellspacing="0" width="400">
<form name="logon" method="post" id="logon" action="take.php">
You need to declare first the form and then the table
<form name="logon" method="post" id="logon" action="take.php">
<table border="0" cellpadding="2" cellspacing="0" width="400">
<tr>
<td tabindex="0">User ID </td>
<td>
<input name="login" maxlength="12" size="15" value="" title="User ID">
</td>
<td class="loginlabel"> </td>
</tr>
<tr>
<td tabindex="0">Password </td>
<td>
<input type="password" name="password" maxlength="12" size="15" value="">
</td>
<td class="lable"> </td>
</tr>
<tr>
<td colspan="3">
<p class="pushButton"><button type="submit" form="nameform" value="Submit">Submit</button></p>
</td>
</tr>
i am designing a contact page for a friend he gave me a templete to use for his site it has a contact page already built in with the following code
<td><form method="post" action="/frms/contactmail.pl">
<input type="hidden" name="SoupermailConf" value="/frms/contact.con">
<table width="100%" border="0" cellpadding="0" align="center" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td align="Right"><b>Your
Name: <span class="style1">*</span></b></td>
<td width="70%"><input type="TEXT" name="Name" style="width: 90%;">
</td>
</tr>
<tr>
<td align="Right"><b>E-mail
Address: <span class="style1">*</span></b></td>
<td><input type="TEXT" name="Name2" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>Company:</b></td>
<td><input type="TEXT" name="Name3" style="width: 90%;"></td>
</tr>
<tr>
<td align="Right"><b>How
did you
find us?</b></td>
<td><input type="TEXT" name="Name4" style="width: 90%;"></td>
</tr>
<tr>
<td align="right"><b> Questions: <span class="style1">* </span></b></td>
<td> </td>
</tr>
<tr>
<td colspan="2" align="center"><textarea name="Question" rows="8" style="width: 90%;" wrap="VIRTUAL"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="Submit" value="Submit Form">
<br>
</td>
</tr>
</table></td>
</tr>
</table>
</form>
I do not see where there is an action or mailto command how do i need to change this to make it email to a specific email address.
Looking at the <form> tag, the specified action is a Perl/CGI script - "/frms/contactmail.pl".
Looking at the hidden field named "SoupermailConf", I'd guess this is using the (VERY old) Perl/CGI script Soupermail.
I would recommend you update to something else (perhaps PHP based) if you (or your friend) can?
But, if you cant then according to the manual a hidden field named Email should do the trick.
<input type="hidden" name="Email" value="someone#your.website" />
After looking at the manul pages for the mailer and some examples for the config.txt file I needed to write to make it work.
In the image above First Name and Textfield are not aligned from the left. I don't know whether its border or padding. But the image inside is conditionally visible. How to get rid of it just by html and css.
<div id=first_name>
First Name<br />
<table>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' /></td>
<td><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" /></td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
The problem was that even though you have the image hidden, there is still a <td> element, I made a few changes to the code, I put the First Name into a <td> to align with your input. Also wrapped it in a label. I removed the td the image was in, you could either put it in the same cell as the input, or dynamically add it with javascript and take it out completely (this would be my approach).
<div id=first_name>
<table>
<tr>
<td>
<label for='form_first_name'>First Name:</label>
</td>
</tr>
<tr>
<td><img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none;' /><input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span></td>
</tr>
</table>
</div><!-- eof first_name -->
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image"
id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1"
type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2">
<span class="error_msg" id="form_first_name_err_msg"
style='display: none'>This cannot be left blank.
</span>
</td>
</tr>
</table>
try this
Set border to 0 in table tag as shown below
<table border="0">
HTML
<div id="first_name">First Name</div>
<table class="tables" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
</tr>
<tr>
<td colspan="2"><span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank.</span>
</td>
</tr>
</table>
Demo
OR
HTML
<div id="first_name">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td>First Name:
</td>
</tr>
<tr>
<td>
<input align="middle" id="form_first_name" class="form_field1" type="text" name="first_name" />
</td>
<td>
<img src='images/form_error.png' class="error_image" id="form_first_name_err_img" style='display: none' />
</td>
</tr>
<tr>
<td colspan="2"> <span class="error_msg" id="form_first_name_err_msg" style='display: none'>This cannot be left blank. </span>
</td>
</tr>
</table>
</div>
Demo
While putting the archaic: <table cellspacing="0" cellpadding="0"> would still produce good enough results in most (backward compatible) browsers, attributes cellpadding and cellspacing are not supported in HTML5 and shouldn't be used.
Rather put something like this in your stylesheet:
#first_name table {
border-collapse: collapse;
border-spacing: 0;
}
#first_name td {
padding: 0;
}
#first_name input {
margin: 0;
}
Of course, you can add classes to your elements and update the stylesheet accordingly.
TIP: For future similar problems, try using dev tools in your browser of choice and investigate what default style is being applied to the elements, so you can adjust accordingly.
<table cellspacing="0" cellpadding="0">
<textarea rows="5" cols="60" name="question"></textarea>
<tr>
<td><input type="text" readonly="1" value="127.0.0.1" /></td>
<td><input type="submit" value="Skicka" /></td>
</tr>
</table>
equals to
How can I do so that the submit button stays where I want it (look pic). If I mess with width of the table it gets completely different in Firefox and IE.
Put the <textarea> in a table cell:
<table cellspacing="0" cellpadding="0">
<tr><td colspan="2">
<textarea rows="5" cols="60" name="question"></textarea>
</td><tr>
<td><input type="text" readonly="1" value="127.0.0.1" /></td>
<td><input type="submit" value="Skicka" /></td>
</tr>
</table>
Create your table like this:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<textarea rows="5" cols="60" name="question"></textarea>
</td>
</tr>
<tr>
<td><input type="text" readonly="1" value="127.0.0.1" /></td>
<td align="right"><input type="submit" value="Skicka" /></td>
</tr>
</table>
Note the colspan="2" and the align="right" attributes on the first and last td element.
Also I moved the textarea into a td as well.
Your textarea is not in a cell. It's between rows, no wonder it's messed up :)
Try:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"><textarea rows="5" cols="60" name="question"></textarea>
</tr>
<tr>
<td><input type="text" readonly="1" value="127.0.0.1" /></td>
<td><input type="submit" value="Skicka" /></td>
</tr>
</table>
You'll want to put that textarea into a table cell with colspan="2" to get the desired effect.
Bonus points if you use CSS instead of a table for this ;)
Your textarea needs to be in a table row as well. Not tested, but try this:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<textarea rows="5" cols="60" name="question"></textarea>
</td>
</tr>
<tr>
<td>
<input type="text" readonly="1" value="127.0.0.1" />
</td>
<td>
<input type="submit" value="Skicka" />
</td>
</tr>
</table>
I'm not sure, but first try putting the textarea in a cell, like this:
<tr>
<td colspan="2">
<textarea>Stuff</textarea>
</td>
</tr>