Form in Table not displaying right - html

I'm a sophomore in high school and I'm taking web design. I taught myself HTML and basic CSS over the summer. This was beneficial because my web design teacher knows nothing about HTML, CSS, or JavaScript. We have to create a personal website and the teacher said I could do my church's site since I was already working on it.
The teacher is making us use stuff from the book that's been covered in the class. The book is out of date. It teaches frames/framesets, table layouts, and talks about compatibility for the waring Netscape and Internet Explorer. (I'm doing a real website. No frames whatsoever.)
I need to include a table in my website, but I have no need for one. I decided to try to put a form inside of a table. I put my form inside of a <tr> tag, but its not displaying right.
If y'all have any better table ideas, then I'm all ears.
http://www.gracepensacola.com

I guess putting a form into tr tag is not a valid HTML. What you need to do is something like this:
<table>
<tr>
<td>Put your form here</td>
</tr>
</table>

After searching through several pages on Google, I came across an example. I put the example in JsFiddle.
The <table> should be nested inside of the <form>.
http://jsfiddle.net/Wf33B/
<form method="post">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>
<tr>
<td>
<label for="password">Password:</label>
</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="cancel" value="Cancel" />
</td>
<td>
<input type="submit" name="send" value="Send" />
</td>
</tr>
</table>
</form>

Related

Set HTML label to WebService invocation's result

Rather new to webservices when it comes to implementing them in HTML. I've been doing research on this for, no joke, an entire month, and still found nothing. Here's the code - The idea is it's just a simple email sender from a fixed email address, and the webservice is called directly from the form.
<body>
<form id="mainForm" method="post" action="http://habakkuk/api/emailHandler.asmx/SendEmailMain"">
<table>
<tr>
<td class="textcolumn">
To:
</td>
<td>
<input type="text" size="50" name="m_To"/>
</td>
</tr>
<tr>
<td class="textcolumn">
Subject:
</td>
<td>
<input type="text" size="50" name="m_Subject"/>
</td>
</tr>
<tr>
<td class="messageText">
Message:
</td>
<td class="messageBox">
<textarea name="m_Body" cols="50" rows="10"></textarea>
</td>
</tr>
<tr>
<td class="textcolumn"></td>
<td>
<input type=submit value="Send Message">
</td>
</tr>
</table>
</form>
<p>
</p>
</body>
Thing is, even this bit took me a week's worth of searching, to add to the ridiculousness. Now my issue is getting the webservice result to set the text of a label or something somehow. Preferably, I'd want an alert, though as far as I am aware, that's a javascript bit and I'm not sure how to go about that either.
Any pointers, assistance, or references to an already answered question I may have missed will be of major help.

mailto function not working on android phones

for some reason my mail to function does not seem to work in android devices.... i'm really confused what to do as it seems to be working fine on windows devices
<article class="contact_form">
<h2><i>Reach Me</i></h2>
<table class="contact-table">
<form action="mailto:sanwal.sahil#yahoo.com" method="post" enctype="multipart/form-data" name="EmailTestForm">
<tr>
<td><label for="name">Name:</label></td>
<td>
<input type="text" id="name" name="visitor" />
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" colspan="1" class="form-submit">SUBMIT</button>
</td>
</tr>
</form>
</table>
</article>
mailto:, in general, has very unreliable support as a form action. This is likely just one more example of that. You should avoid it entirely in favour of using an HTTPS (or even HTTP) URL with a server side form handler.
Additionally, your form is invalid in a way that will break it in a number of browsers. Write valid HTML.

Internet Explorer moves webpage elements by itself

I have an interesting dilemma. For an IT course, I have to design a website with a weather database, which I have done. It displays nicely in Chrome and Firefox (and I assume Safari), and for the most part in Internet Explorer.
However, as you can see in these screenshots, IE seems to take it upon itself to move links and buttons when the user moves their cursor near them.
Figure 1 - IE Layout before moving cursor to copyright link:
Figure 2 - IE Layout after moving cursor to copyright link:
Figure 3 - As compared with Chrome:
The website address is http://penguinweather.tk. Please feel free to look around if it will help. The problem also occurs on the confirmation page (again only in IE).
Here is the most relevant code from the homepage:
<body class="body">
<center>
<h1>Penguin Weather</h1>
<h2>Weather Database</h2>
<h3>Welcome to Penguin Weather! You can enter new data here, or click on the second button to view all current weather data.</h3>
<form action="Database.php" method="post">
<table>
<tr>
<td>Location:</td>
<td>
<input type="text" class="textbox" name="loc" autofocus>
</tr>
<tr>
<td>Temperature:</td>
<td>
<input type="number" class="textbox" style="width:75px;" name="temp">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" class="textbox" name="pass">
</td>
</tr>
</table>
<br>
<input type="submit" class="button" style="font-weight:bold;" value="Save Datum">
<br>
<br>
View Weather
View Weather by Month
Modify Weather
</form>
</center>
</body>
<footer>
<center>Copyright © 2016 Penguintech Ltd.</center>
<br>
<center><small>View Development Directory</small> | <small>Test</small></center>
</footer>
Thank you in advance.
(PS: Don't click on the penguin unless you like harmless annoyances!)
It turns out that Internet Explorer did not like the <center> tags, so wrapping the page in a div with CSS formatting solved the problem.
Code:
<div style="text-align:center">
*page content*
</div>
And to keep the table centred:
<table style="margin-left:auto; margin-right:auto">
*table content*
</table>

IE10 automatically submits HTML form

Hi I have a fairly simple HTML login form:
<form name="login" action="checklogin.php" method="post">
<table>
<tr>
<td>Login to Continue</td>
</tr>
<tr>
<td>Username</td>
<td><input name="username" type="text" value=""></td>
</tr>
<tr>
<td>Password</td>
<td><input name="password" type="password" value=""></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
This works fine in Google Chrome but when it comes to IE10 on Windows 7 the form auto completes and submits. I have checked the obvious auto complete options in IE10 and ensured they are off and all stored information is cleared. However the form still gets auto completed and submitted. Is there some way of explicitly instructing IE10 not to do this?
Ok got it. This is an HP machine and it was running HP Simple Pass. This installs a BHO Add-in to IE 9+ called "True Suite Website Logon" which was responsible for this behaviour. Thanks for the help.

<textarea> causing 404 error on particular inputs

I've come across a weird problem. I have a simple form which submits data to a php processor page. However, the following input to the description field causes a 404 Error.
To recognize and reward the best in
Indian theatre, The Mahindra and
Mahindra presents META (Mahindra
Excellence in Theatre Awards). The
only award of its kind, META is
designed to showcase the best in
theatre being produced in India. An
eminent selection committee shortlists
the 10 best plays from innumerable
entries from all across India. These
plays are staged and adjudged under 13
award categories. The festival
culminates with an scintillating
awards ceremnony. Entering its sixth
year, META’s objective remains to
encourage all aspects of theatre craft
such as playwriting, set, costume and
light design, direction and
performance and promoting theatre.
I've tried changing the apostrophes and commas, even the brackets, but it didn't help.
The code for the form:
<form class="cms" action="add.php" enctype="multipart/form-data" method="post">
<table>
<tr>
<td class="text">
Title
</td>
<td class="input">
<input type="text" size="20" name="title" value="" />
</td>
</tr>
<tr>
<td class="text">
Date
</td>
<td class="input">
<input type="text" size="20" name="date" value="" />
</td>
</tr>
<tr>
<td class="text">
Image
</td>
<td class="input">
<input type="file" name="image" />
</td>
</tr>
<tr>
<td class="text">
Description
</td>
<td class="input">
<textarea name="description" rows="5" cols="20"></textarea>
</td>
</tr>
<tr>
<td class="text">
Link
</td>
<td class="input">
<input type="text" size="20" name="link" value="" />
</td>
</tr>
<tr>
<td class="text">
<input type="submit" value="Add / Save" />
</td>
<td>
<input type="reset" value="Clear" />
</td class="input">
</tr>
</table>
</form>
On submitting the text above i get the following error :
Not Found The requested URL
/cms/events/add.php was not found on
this server.
Apache/1.3.41 Server at
www.xyzs.in Port 80
Is this a problem with the text-encoding?
Could the add.php page contain an execute, maybe for an error page if the input is to long and the 404 is because the error page is not there?
I have seen similar errors in ASP where execute "" was used to load another page and if that page was not found you got an error, but exactly which error can differ from server implementation.
Also, does this work with other input with shorter or same length?
For someone else with Similar Issue:
Your text contains sensitive keywords which cause 404. Last night I got similar issue with text area, After deep analyzing I found that my text contains a keyword "Select", When I remove it submits successfully. In your case keyword "META" might causing this error.
What you have to do is white list these sensitive keywords from your server by contacting your server administrator.