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...
Related
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
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
Having a problem with an email form. When clicking submit doesn't recognize page. Am I missing something really obvious? I've replaced 'your email address' for a valid email address in VALUE.
Here is the code:
<form method="post" action="http://www.ftp://www.users.greenbee.net//cgi-bin/FormMail.pl" name="MyForm">
<input type="hidden" name="recipient" value="YOUR EMAIL ADDRESS" />
<input type="hidden" name="sort" value="order:FirstName,Surname,emailaddress,Comments" />
<center>
<table border="0" width="64%" bgcolor="#c0c0c0">
<tr>
<td width="41%" align="center"><strong>First Name</strong></td>
<td width="59%" align="center"><input type="text" name="FirstName" size="24" /></td>
</tr>
<tr>
<td width="41%" align="center"><strong>Surname</strong></td>
<td width="59%" align="center"><input type="text" name="Surname" size="24" /></td>
</tr>
<tr>
<td width="41%" align="center"><strong>E-mail Address</strong></td>
<td width="59%" align="center"><input type="text" name="emailaddress" size="24" /></td>
</tr>
<tr>
<td width="41%" align="center"><strong>Comments on my webpage</strong></td>
<td width="59%" align="center"><textarea rows="3" cols="24" name="Comments"></textarea></td>
</tr>
<tr>
<td width="41%" align="center"><input type="submit" value="Send Form" name="SendForm" /></td>
<td width="59%" align="center"><input type="reset" value="Clear Form" name="ClearForm" /></td>
</tr>
</table>
</center>
</form>
The form action is all messed up.
It should be either http:// or ftp:// you can't combine both.
From quick trial and error, this one "works" though requires authentication:
ftp://www.users.greenbee.net/cgi-bin/FormMail.pl
you have invalid Action Page with this
see There is a two Protocols
Http and FTP..
I think it is wrong.
check your action path. it must be absolute location of your FormMail.pl.
be sure starts with http:// or ftp://
There’s a relatively new service called Slapform that allows you to send yourself form submissions via email. All you have to do is set the form’s method to POST and point the form’s action to https://api.slapform.com/your#email.com. It’s very simple and easy to use:
<form method="POST"
action="https://api.slapform.com/your#email.com">
<input type="email" name="email">
<textarea type="text" name="message"></textarea>
<button type="submit">Submit</button>
</form>
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 :)
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/