I'm trying to make a form in which the user enters an email and password and after clicking submit the page redirects to another page without saving or doing anything with email and password, but I want the form to check whether the entered value for email is valid and password field is not empty. Is it possible to do in HTML (just HTML)?
Here is what I have tried so far...
<form action="../../../redirect.html">
<input name="username" id="login-username" class="login-input pure-u-1 " type="text" maxlength="96" tabindex="1" aria-required="true"
value="" placeholder="Indtast din e-mail" title="Indtast din e-mail" autocorrect="off" spellcheck="false" autofocus>
<input name="password" id="login-password" class="login-input pure-u-1 " type="password" maxlength="96" tabindex="1" aria-required="true"
value="" placeholder="Indtast din adgangskode" title="Indtast din adgangskode" autocorrect="off" spellcheck="false" autofocus>
<button id="login-signing" class="pure-u-1 pure-button mbr-button-primary" type="submit" value="Submit" tabindex="1">Login</button>
</form>
In your input use required
exemple
Username: <input type="text" name="usrname" required>
From w3schools
Try using javascript email validation
<!DOCTYPE html>
<html>
<script>
function ValidateEmail()
{
if (/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.email.value))
{
return (true);
}
alert("Invalid Email");
return (false);
}
</script>
<form name=myForm action='demo_form.asp' onsubmit='return ValidateEmail();'>
<input type='text' name='email'>
<input type='submit'>
</form>
</html>
Related
I am making a html page where you login to see links but I cant get the enter key working
<form name = "myform">
<p style="text-align:center">ENTER USERNAME <input type="text" name="username"></p>
<p style="text-align:center">ENTER PASSWORD <input type="password" name="pword"></p>
<p style="text-align:center"><input type="button" value="Check In" name="Submit" onclick= "validate()">
</p></center>
For your enter button to work, you need to change your button input type to submit.
<!DOCTYPE html>
<html>
<body>
<form action="action_page">
Username:<br>
<input type="text" name="username">
<br>
Password:<br>
<input type="password" name="pword">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I upvoted Darkhouse's answer but wanted to post this most simple version of your code that should also work just fine:
<form name = "myform">
<input type="text" name="username" placeholder="Enter Username">
<input type="password" name="pword" placeholder="Enter Password">
<input type="submit" value="Check In" name="Submit">
</form>
I made a form for sending an e-mail to my address by the user by creating an email filled with the form data. The problem is that after pressing the send button, I only want the values to appear filled in the email, and not the keys. Is there a possible way to do that?
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
When submitting the form, it opens outlook new email with this filled in:
name=your name
mail=your email
comment=your comment
But I want it to look like this:
your name
your email
your comment
Building on my other answer, you could concat all values into one hidden value, and then use the = as a natural separator:
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain" onsubmit="concat_form_values()">
Name:<br>
<input id="name" type="text" value="your name"><br>
E-mail:<br>
<input id="email" type="text" value="your email"><br>
Comment:<br>
<input id="comment" type="text" value="your comment" size="50"><br><br>
<input id="aggregate" type="hidden" name=" ">
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
<script>
function concat_form_values(){
document.getElementById("aggregate").value = '============================\n' +
document.getElementById("name").value + '\n' +
document.getElementById("email").value + '\n' +
document.getElementById("comment").value
}
</script>
</html>
which would result in an email opened pre-filled with this content:
=============================
your name
your email
your comment
I don't think you can get rid of the =, but you can name all the inputs " " to kinda remove the key:
<!DOCTYPE html>
<html>
<body>
<form action="MAILTO:someone#somethig.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name=" " value="your name"><br>
E-mail:<br>
<input type="text" name=" " value="your email"><br>
Comment:<br>
<input type="text" name=" " value="your comment" size="50"><br><br>
<input type="submit" value="Send">
<input type="reset" value="Reset">
</form>
</body>
</html>
This results in the following output in the pre-filled email:
=your name
=your email
=your comment
I have a form. Right now it has one action and simply just submits the inputs to URL. I would like it to be modified where when the form is completed the inputs are saved to a file and then submitted to the URL.
<form class="snp-subscribeform snp_subscribeform" action="join.cgi" method="post">
<input name="page" type="hidden" value="1" />
<div>
<input id="snp-firstname" class="snp-field snp-field-firstname " name="firstname" required="" type="text" value="" placeholder="Enter Your First Name" />
<input id="snp-lastname" class="snp-field snp-field-lastname " name="lastname" required="" type="text" value="" placeholder="Enter Your Last Name" />
<input id="snp_email" class="snp-field snp-field-email" name="email" type="text" placeholder="Enter Your Email " />
<input id="snp-password" class="snp-field snp-field-password " name="password" required="" type="text" value="" placeholder="Select A Password" />
</div>
<div>
<input class="snp-subscribe-button snp-submit" type="submit" value="CONTINUE" data-loading="Creating Account!" data-success="Account Created!" />
</div>
</form>
</div>
You would need to use javascript and the onclick event for the submit button to retrieve the values from the DOM elements you are interested in and save them to the file.
Here is a sample of how to get started:
<input type="submit" name="submit" value="Save" onclick="writedata()" />
<script>
function writeData() {
}
</script>
I have a form on a website where a user needs to enter in their name and email twice to download something. However, the user can type two different emails in the fields, hit submit, and it will still show the success message. Why? Is there a pattern attribute I can use to accomplish this? I want the user to be forced to type in the same email twice or get the error message.
This is my HTML:
<form id="form" method="post" action="formmail.php" name="form" width="100%">
<input type="hidden" name="good_url" value="https://MYURL.com/index.html#submitgood" />
<input type="hidden" name="bad_url" value="https://MYURL.com/index.html#submitbad" />
<input type="hidden" name="env_report" value="REMOTE_HOST,REMOTE_ADDR,HTTP_USER_AGENT,AUTH_TYPE,REMOTE_USER" />
<input type="hidden" name="derive_fields" value="email=EmailAddr,realname=username" />
<input type="hidden" name="recipients" value="myaddress" />
<input type="hidden" name="subject" value="Download" />
<fieldset>
<legend>Please fill out the information below to download.<br><br>Filesize, 59.8 MB.</legend><br>
<table cellspacing="0" cellpadding="0" id="confquest"><tr height="80px"><td>
<label for="Name" id="namelabel"><strong>Full name:</strong></label><br>
<input id="Name" type="text" name="username" title="Enter your full name" placeholder="Your Name" autofocus required /></td></tr>
<tr height="80px"><td><label for="eMail" id="emaillabel"><strong>Email address:</strong></label><br>
<input id="eMail" type="email" name="EmailAddr" title="Enter your email address" placeholder="example#mail.com" required /></td></tr>
<tr height="80px"><td><label for"eMail_repeat" id="emaillabel2"><strong>Repeat Email address:</strong></label><br>
<input id="eMail_repeat" type="email" name="email_addr_repeat" title="Repeat your email address" placeholder="example#mail.com" required oninput="check(this)" /></td></tr>
</table>
<input id="reset2" type="reset" name="reset" value="Clear" />
<input id="submit2" type="submit" name="submit" value="Submit" />
<input type="hidden" name="mail_options"
value="HTMLTemplate=https://www.MYURL.com/fmtemplates/mailtemplate5.html" />
</fieldset></form>
It works after you add this after the input field for the email repeat.
<script>
function check(input) {
if (input.value != document.getElementById('eMail').value) {
input.setCustomValidity('The two email addresses must match.');
} else {
// input is valid -- reset the error message
input.setCustomValidity('');
}
}
</script>
Is it possible to change default value of the attribute required that we add to an element in HTML?
For example:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required />
<input type="submit" value="Notify Me" />
</form>
I do believe that the HTML code block you have given ought be as below:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" required="required" />
<input type="submit" value="Notify Me" />
</form>
And if you wanted to remove it completely:
<form action="" method="post">
<input type="email" name="signup-email" id="signup-email" placeholder="enter your email address" />
<input type="submit" value="Notify Me" />
</form>
Obviously as you have no URL address in the ACTION attribute of the form, the form will POST back to itself (ie. meaning the page it is hosted on, so if it was on your contact.aspx form it will post back to contact.aspx)