Remove indent in table in HTML - html

I want to indent the text "Did you forget your username instead" to the position where the text "username" is.
Screenshot of what it looks like and you'll understand what I mean:
</td>
</tr></tbody></table><table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#FFBF00">
<tbody><tr>
</tr><tr>
<form id="form1" method="post" action="checklogin.php"></form>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#D8D8D8">
<tbody><tr>
<td colspan="3"><strong>
</strong></td>
</tr>
<tr>
<td colspan="3"><strong>Forgot your password? </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
</tr>
<tr>
<td> </td>
<td> </td>
<td>Did you forget <a href=http://www.google.com>your username</a> instead? <br></br>
<input type="submit" name="Submit" value="Submit">
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</div>
</div></body></html>

I believe you are looking for colspan
Remove the two columns before the 'Did you forget...' column like this:
Here is an example: http://jsfiddle.net/nKx3U/
<tr>
<td colspan="3">Did you forget <a href=http://www.google.com>your username</a> instead? <br></br>
<input type="submit" name="Submit" value="Submit">
</tr>
I am also not sure if a table is the best option for this.

Related

HTML Form embedded in <table> tag is not rendered properly?

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>

My form answers are not attaching to email

I have wrote in scripting a simple question list, I need the responses to be returned in a txt file via email when the person hits submit. The front end of the file works, the email creates but the form does not post. Can anyone help with this scripting please?
Coding listed below:
<form action="mailto:test#yahoo.com?subject=Test" id="form" method="post" name="form" >
<!-- PAGE HEADER -->
<table bgcolor=#D1DEE5>
<tr>
<td width="833px"align="center">
<input class="title" name="Title" value="Customer Satisfaction Survey">
</td>
</tr>
</table>
<!-- QUESTIONS -->
<p>
<table>
<tr>
<td>
<p> Welcome message
<p>
</ul>
</td>
</tr>
</table>
<br>
<table>
<tr class="shaded">
<td align="left">
<p><b>Please tell us based on your experience, how satisfied you are with the following services:</b>
</td>
<td align="center" width="50px">Very satisfied</td>
<td align="center" width="50px">Satisfied</td>
<td align="center" width="50px">Dissatisfied</td>
<td align="center" width="50px">Very Dissatisfied</td>
<td align="center" width="50px">N/A</td>
</tr>
<tr>
<td>A</td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Satisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="Very Dissatisfied"></td>
<td align="center" width="50px"><input type="radio" name="q1" value="N/A"></td>
</tr>
</table>
<br>
<table class="outlineTable" bgcolor=#D1DEE5>
<tr>
<td align="left" rowspan=5 width=500 style="vertical-align:top" style="padding-top:5px">
<p><b>Please add comments to explain your answers</b>
<br><textarea name="Comments10" id="Comments10" rows="7" cols="55"></textarea>
</td>
<td align="left">
Month being scored
</td>
<td align="left" class="submitButton">
<input class="name" name="Month">
</td>
</tr>
<tr>
<td align="left">
Name
</td>
<td align="left" class="submitButton">
<input class="name" name="Name">
</td>
</tr>
<tr>
<td align="left">
Date
</td>
<td align="left" class="submitButton">
<input class="name" name="Date">
</td>
</tr>
<tr>
<td align="left">
</td>
<td align="left" class="submitButton">
<input class="button2" type="submit" value="Click here to submit results">
</td>
</tr>
</table>
<br>
<table bgcolor=#D1DEE5>
<tr>
<td align="center">
<h1> Many thanks for taking the time to complete this survey
</td>
</tr>
</table>
<p>
</form>
</body>
</html>

Contact form html

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.

how to make a table responsive when it has an input

My table does not resize when i have an input in it.
<table class="table table-hover table-responsive " cellspacing="1" cellpadding="2" border="2">
<tr class="info">
<td align="left"><b>Name</b>
</td>
<td width="200" align="left"><b>URL</b>
</td>
<td></td>
</tr>
<tr bgcolor="#DFE9F9">
<td align="left">
<input class="input" name="name">
</td>
<td align="left">
<input class="input" size="41" name="web">
</td>
<td align="left">
<input type="submit" name="Submit_add" value="Add">
</td>
</tr>
</table>
the following table is not responsive.
How to make it responsive?
Thanks
Replace class="input" with class="form-control"
<table class="table table-hover table-responsive " cellspacing="1" cellpadding="2" border="2">
<tr class="info">
<td align="left"><b>Name</b></td>
<td width="200" align="left"><b>URL</b></td>
<td></td>
</tr>
<tr bgcolor="#DFE9F9">
<td align="left"><input class="input form-control" name="name"></td>
<td align="left"><input class="input form-control" size="41" name="web"></td>
<td align="left"><input type="submit" name="Submit_add" value="Add"></td>
</tr>
</table>
Since your loading in boostrap anyways, why not use the bootstrap grid system?
Very easy to implement, for example: class="col-lg-3". You can find more information on the bootstrap - grid page.
Goodluck

Colspan styling in nested tables failed

I have a problem with nested tables. In my Company we have an old website wich is based on an table layout. I want to add dynamicaly a new td in one tr. If this td is set, in the other tr's i will set on the last td a colspan=2.
If i do this, my table looks like this:
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
|----|-|-------|--|---|-|-|
instead of looking like this:
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
|---|-|----|--|---|-|-----|
( - only defined as width not as colspan)
This is sample markup from my code:
<table border="0" width="100%" cellspacing="0" cellpadding="1">
<tbody>
<!-- Headline tr -->
<tr>
<td width="100%" valign="middle" nowrap align="left" colspan="7">
Titel
</td>
<!-- New dynamic Field -->
<td nowrap align="right">
<img src="example.gif" width="15px" height="15px"/>
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
<tr>
<td nowrap align="left">
Name
</td>
<td>
:
</td>
<td width="50%" align="left">
<input readonly value="test" />
</td>
<td >
<img src="blank.gif" />
</td>
<td nowrap align="left">
Number
</td>
<td>
:
</td>
<td width="100%" align="left" colspan="2">
<input readonly value="test" />
</td>
</tr>
</tbody>
</table>
This table is nested in a table with <table width="100%" height="100%">
Whats the failure?
You can't have a different number of td in rows (tr) from the same parent table.
In your example, you have 8 (7+1) td in your first row and only 7 (5+2) in both others.
It may break your table..
I have solved the problem. In my First row, the first td with colspan=7 dont need the width="100%". Now its functional.