Form not working in Internet Explorer - html

This form code is working in Mozilla and Chrome, but in Internet Explorer it is not working.
<form method="post" action="logincheck.php" >
<span class="meta">
<table>
</span>
<tr>
<td>
<span class="meta">
<label >Username </label>
</span>
<label>
</td>
<td> <input name="username" type="text" />
</label>
</form>
</td>
</tr>
<tr>
<td> <label ><span class="meta">Password</td>
<td>
<input name="password" type="password" />
</span>
</label>
</td>
</tr>
<tr>
<td>
<span class="meta">
</span>
<label>
<input type="submit" name="Submit" value="Submit" class="submit"/>
</label>
</td>
</tr>
</table>
</form>

You have a number of HTML errors, most important being an extra </form> tag shortly after the first <input>. That means the second input and the submit button are outside the form, so it won't work. Firefox and Chrome are being a bit more forgiving here it seems.
Fix your HTML and the form should work fine.

You have errors that automated QA tools can detect

<form method="post" action="logincheck.php">
<label for="username">Username</label>
<input name="username" type="text" />
<label for="password">Password</label>
<input name="password" type="password" />
<input type="submit" name="Submit" value="Submit" class="submit" />
</form>
The correct code for this form must look like this.
You do not need the table, you can style the form with easily with CSS over selecting the label & input fields

<span class="meta">
<table>
</span>
The nesting is wrong. In fact, there's a lot more wrong. Try googling what <label> does exactly, and what <span> does and when you want to use it. You probably want something like this:
<form method="post" action="logincheck.php" >
<table>
<tr>
<td><label class="meta">Username </label></td>
<td><input name="username" type="text" /></td>
</tr>
<tr>
<td><label class="meta">Password</td>
<td><input name="password" type="password" /></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="Submit" value="Submit" class="submit"></td>
</tr>
</table>
</form>

Here is a version without span tags, label and extra </form> in the middle of the table before submit button.
I guess, you added those by hands in plain text editors.
<form method="post" action="logincheck.php">
<table>
<tr>
<td>
Username
</td>
<td>
<input name="username" type="text" />
</td>
</tr>
<tr>
<td>
Password
</td>
<td>
<input name="password" type="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit" value="Submit" class="submit" />
</td>
</tr>
</table>
</form>

One first error is:
<span class="meta">
<table>
</span>
But you have many errors.
Open and close tags as you will do with parenthesis. No horse riding. HTML and now XHTML need you to be a little bit more conscientious.
usefull tool:
http://giminik.developpez.com/xhtml/
http://validator.w3.org/

Related

How to hide html5 form validation on reseting form

I have an HTML page with input fields and two buttons: Submit and Reset. When the user clicks on Submit, the required validation messages come up, that's fine, but they also come up when clicking Reset.
HTML:
<html>
<body>
<form action="insertVoucherCategory" method="post">
<table>
<tr>
<td>Voucher Category</td>
<td> </td>
<td><input name="voucherCategory" id="voucherCategory" title="Please Enter Voucher Category" required="required" placeholder="Enter Voucher Category" tabindex="1" /></td>
</tr>
<tr>
<td>Description</td>
<td> </td>
<td><input name="description" id="description" title="Please Enter Description" required="required" placeholder="Enter Description" tabindex="2" /></td>
</tr>
<tr>
<td><input type="submit" id="btnAdd" value="Submit" tabindex="3"/></td>
<td> </td>
<td><input type="reset" id="btnReset" value="Reset" tabindex="4"/></td>
</tr>
<table>
</form>
</body>
</html>
This is what happens on Reset:
This is what I want:
<input type="button" value="Reset" onclick="hideMsg()" />
function hideMsg(){
$('.errMsg').hide();
$('.required').val('');
$('.required').addClass('blueBorder');
$('.required').removeClass('redBorder');
}
Use the type="reset" attribute on an <input> or <button> to automatically use HTML5 validation to clear the validation highlighting.
Tested satisfactorily on IE11 and Edge on Windows 10...

setting a submit button from my simple form to send to my email (current code included)

I'm not sure what I'm missing here. I'm just trying to get the submit button to send the information to my email. What am I doing wrong? Sorry for all the table code, had to be a table for an assignment.
<form method="post" action="mailto:suzanne#nielsenwebdesigns.com" > <table width="478" align="center">
<tr>
<td width="166" style="font-family: 'Letter Gothic Std', 'Lithos Pro Regular', 'Mesquite Std', 'Trebuchet MS'">Name:
</td>
<td width="281">
<input name="name" type="text" required id="name" title="name" size="30">
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input name="email" type="text" required id="email" title="email" size="30"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text" id="phone" size="30"></td>
</tr>
<tr>
<td>Subject:</td>
<td><select name="subject" required id="subject" title="subject">
<option value="info">General Information</option>
<option value="web design">Web Design</option>
<option value="hosting">Hosting services</option>
<option value="logo design">Logo Design</option>
</select></td>
</tr>
<tr>
<td>How did you hear of us?</td>
<td>
<label>
<input type="radio" name="how did you hear" value="friend" id="howdidyouhear_0">
friend
</label>
<label>
<input type="radio" name="how did you hear" value="search" id="howdidyouhear_1">
search
</label>
<label>
<input type="radio" name="how did you hear" value="ad" id="howdidyouhear_2">
ad
</label>
</td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="message" cols="60" rows="15" id="message" title="message">
</textarea>
</td>
</tr>
<tr>
<td><input name="clear" type="image" id="clear" src="clear.png" alt="clear" /></td>
<td>
<input name="submit" type="image" id="submit" src="submit.png" alt="submit" value="send email" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
are you dutch? a lot of dutch people have that name ;) )
I think what you're trying to do is send information which is in an input field to your e-mail adress. You can do this using PHP and maybe some other solution, but i dont know them.
For sending the mail with php i would recommend using something like this:
first change the html to:
<form action="mail.php" method="post">
<textarea cols='40' rows='7' name='mailcontent'></textarea>
<input type="submit" value="Submit"/>
</form>
Then create a file called "mail.php" and add this code to it:
<?php
$mail_content = $_POST['mailcontent'];
$mail_subject = "a subject you like, can not be removed."
$mail_to = "suzanne#nielsenwebdesigns.com";
$mail = mail($mail_to, $mail_subject, $mail_content);
if($mail){echo "Success!";}else{echo "Something went wrong, please try again later.";}
?>
or if you just want to let please send a mail themselves i suggest you use this:
Click here to send me a mail

html5 form validation is not working when input type is submit is used

HI i want to validate an input type=email field with a submit button.
I have two form element in the page. And i am opening a div(divForgotPassword) as a modal.
But the required attribute is not working inside the modal .
Below is my my code
<form id="form1" runat="server">
//some elements
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" style="display:none" title="Forgot password">
<table>
<tr>
<td>
<asp:Label ID="lblForgotPassword" runat="server" Text="Email"></asp:Label>:
</td>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
</form>
<form id="form2" action="javascript:RetrievePassword();">
<div id="divForgotPassword" title="Forgot password">
<table>
<tr>
<td>
<label for="txtForgotEmail">
EMAIL : </label>
<td>
<input type="email" required="required" id="txtForgotEmail" />
</td>
</tr>
<tr>
<td>
<input type="submit" style="background-image:url('Images/buttons/btn_send.png')" id="btnSend" />
</td>
</tr>
</table>
</div>
please find this demo DEMO

is way that value of disable inputs send data to another page?

i have one form and i want send data when i have disable input.
is way for this.
my code is :
<form method="post" action="">
<table class="tbl_wheader" style="width: 200px;">
<tbody>
<tr class="even">
<td>
state
</td>
<td>
<input type="text" id="state_id" name="state_id" disabled="">
</td>
</tr>
<tr class="even">
<td>
</td>
<td>
<input type="submit" value="ok" name="addschool">
</td>
</tr>
</tbody>
thanks.
you can store your data in hidden input
<input type="text" name="state_id" disabled="disabled" value="value" />
<input type="hidden" name="state_id" value="same value" />
or you can use readonly attribute
<input type="text" name="state_id" readonly value="value" />

Is this HTML valid?

Does this code contain anything invalid. I have a form with a table inside. Is that alright?
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td>
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td>
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
For the result -- http://jsfiddle.net/mBwAh/
A <form> can contain text and markup (paragraphs, lists, etc.), there are no restrictions listed for what it can contain. Here's the W3C spec which says so:
http://www.w3.org/TR/html4/interact/forms.html#h-17.3
As for you're <table> usage, it's perfectly valid HTML, in fact the <table> element is in the HTML5 spec Here's the W3C Spec for that:
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
You'll want to also add a colspan to your <tr> which only contains one <td>, You should also add a name attribute to your <input> as it won't do anything on submit without it.
<input type="text" id="id" name="id" />
You're not saying what the problem is, but one thing that catches the eye is the fact that you have differing numbers of tds per row without a colspan to even them out.
<tr>
<td colspan="2"> <--- makes column span across three columns in the other rows
<form name="myForm" id="myForm">
<table id="myTab">
<tr>
<td colspan="2">
<label for="id">User ID:</label>
<input type="text" id="id" />
</td>
</tr>
<tr>
<td>
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" />
</td>
<td colspan="2">
<button type="button" class="submit">Submit</button>
</td>
</tr>
<tr><td colspan="2"><input type="reset" /></td></tr>
</table>
<div class="error"></div><div class="correct"></div>
</form>
Some colspans were missing.
You can check the code for HTML5 validity here: http://validator.w3.org/#validate_by_input
This might be "Valid", but you're using a table structure for layout purpose, which is not a great idea. If possible, you should change your stucture to something like this.
<form name="myForm" id="myForm">
<label for="id">User ID:</label>
<input type="text" id="id" /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" name="pass" /><br />
<button type="button" class="submit">Submit</button><br />
<input type="reset" /><br />
<div class="error"></div><div class="correct"></div>
</form>
Hope this help :)