I have an html page with two forms, one for signup and one for login, i have made all fields required, but i want to make it so, the signup fields only are required, when you sign up, and the login fields only are required one you login.
Here is my code snippet:
<body>
<form name="register" action="FrontController" method="POST" style="border:1px solid #ccc">
<div class="container">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Adresse</label>
<input type="text" placeholder="Skriv din adresse" name="adresse" required>
<label for="email"><b>Telefonnummer</b></label>
<input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me
</label>
<div class="container">
<h1>Login</h1>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<p>By creating an account you agree to our Terms & Privacy.</p>
<div class="clearfix">
<button type="submit" class="loginbtn" value="Submit">Login</button>
<button type="submit" class="signupbtn" value ="Submit">Login</button>
</div>
Is this in any way possible?
You are using both submit buttons under same form so that validation is required. Use different form for login and signup.
<form>
Login form
<input type="text" required>
<br>
<input type="submit" value="Login">
</form>
<form>
Register form
<input type="text" required>
<br>
<input type="submit" value="Register">
</form>
You need to use two separate forms to achieve what you want,
as the required property only applies to the current form.
Here is your HTML modified:
<body>
<div class="container">
<form name="register" action="FrontController" method="POST" style="border:1px solid #ccc">
<h1>Sign Up</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Postnummer</b></label>
<input type="text" placeholder="Skriv dit postnummer" name="postnummer" required>
<label for="email"><b>Adresse</b></label>
<input type="text" placeholder="Skriv din adresse" name="adresse" required>
<label for="email"><b>Telefonnummer</b></label>
<input type="text" placeholder="Skriv dit telefonnummer" name="phonenr" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label><input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Remember me</label>
<div class="clearfix">
<button type="submit" class="signupbtn" value="Submit">Sign-up</button>
</div>
</form>
</div>
<div class="container">
<form name="login" action="FrontController" method="POST" style="border:1px solid #ccc">
<h1>Login</h1>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<div class="clearfix">
<button type="submit" class="loginbtn" value="Submit">Login</button>
</div>
</form>
</div>
</body>
Hope it helps.
Related
I am creating a form for a website, but right now it's only allowing me to tab through from phone down. I cannot tab from first name to last name to phone. how do I change it to allow me to tab through the whole thing?
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input type="submit" name="submit" value="Submit" id="submit">
</form>
When I copied the HTML into an HTML viewer it works fine. But in the rest of the page it stops working.
Not sure why it's not letting you tab as is, but you could try setting the tabindex property:
<form data-customer-information-form="true" autocomplete="off" method="POST" action="addticket/submit" name="ticketForm" id="ticketform" accept-charset="UTF-8">
<p>
<label for="customerFirstName">First Name:</label></br>
<input tabindex="0" type="text" name="customerFirstName" id="customerFirstName" placeholder="first name" pattern="[A-Za-z]+" required>
</p>
<p>
<label for="customerLastName">Last Name:</label></br>
<input tabindex="0" type="text" name="customerLastName" id="customerLastName" placeholder="last name" required>
</p>
<p>
<label for="phoneNumber">Phone: used for contact</label></br>
<input tabindex="0" type="tel" id="phone" maxlength="12" name="phoneNumber" placeholder="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
</p>
<p>
<label for="email">Email:</label></br>
<input tabindex="0" type="email" name="email" id="email" placeholder="email">
</p>
<p>
<label for="service">Computer/Service Name:</label></br>
<input tabindex="0" type="text" name="service" placeholder="computer model or service" required>
</p>
<p>
<label for="description">Anything else we need to know:</label></br>
<textarea tabindex="0" type="text" maxlength="200" name="description" id="description" placeholder="What's gone wrong?"></textarea>
</p>
<input tabindex="0" type="submit" name="submit" value="Submit" id="submit">
</form>
Make sure your javascript isn't preventing certain keys.
document.getElementById("customerFirstName").onkeydown = function(e){
if(!(e.keyCode === 8 || e.keyCode ===46 || keypress.keyCode === 9)){
if(!(/[A-Za-z]/i.test(String.fromCharCode(e.keyCode)))) {
e.preventDefault();
return false;
}
}
}
So I wanted to make a form of login to a website and this is my code.
<form method="post" class="form">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
But I cant figure out how to go to other page when I click the Login input. I tried to add href="", but it didnt work because its not an <a> element.
Simply add action="yourPage.html" in your form div.
<form method="post" class="form" action="yourPage.html">
<label for="user-email" style="padding-top:13px"> Email</label>
<input class="form-content" type="email" name="email" autocomplete="on" required/>
<div class="form-border"></div>
<label for="user-password" style="padding-top:22px"> Password</label>
<input class="form-content" type="password" name="password" required />
<div class="form-border"></div>
<input id="submit-btn" type="submit" name="submit" value="LOGIN" />
</form>
I am taking a course and one of our projects is to create a form. Forgive me as I am a total newbie here.
The instructor is asking that the form action attribute="#" and the method="post"
When I use the # I just get an error
<form name="my-form" action='#' method='post'>
<fieldset>
<legend>Sign Up Here</legend>
<div class="form-box">
<label for="username">Username</label>
<input type="text" id="username" name="username" tabindex="1" placeholder="Username">
</div>
<div class="form-box">
<label for="email">Email</label>
<input type="email" id="email" name="email" tabindex="2" placeholder="Email" required>
</div>
<div class="form-box">
<label for="phone-number">Phone</label>
<input type="text" id="phone-number" name="phone-number" tabindex="3" placeholder="Phone" required>
</div>
<div class="form-box">
<label for="password">Password</label>
<input type="password" id="password" name="pass" tabindex="4" placeholder="Password" required>
</div>
<div id="message">
<h6>Password must contain the following:</h6>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<div class="form-box">
<label for="password-confirm">Confirm Password</label>
<input type="password" id="password-confirm" name="password-confirm" tabindex="5" placeholder="Confirm Password" required>
</div>
<div class="form-box">
<label for="avatar">Choose a profile picture:</label>
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" class="uploader button-upload">
</div>
<div class="form-box">
<button class="btn" id="btnSend" tabindex="6">Register</button>
</div>
</fieldset>
</form>
This page isn’t working If the problem continues, contact the site owner.HTTP ERROR 405
This is on google chrome.
Well I got this code
<html>
<div class="form">
<h2>Login to your account</h2>
<form action="#" method="post">
<input type="text" name="Username" placeholder="Username" required=" ">
<input type="password" name="Password" placeholder="Password" required=" ">
<div class="g-recaptcha" data-sitekey="thecode"></div>
<input type="submit" value="Login">
</form>
</div>
<div class="form">
<h2>Create an account</h2>
<form action="#" method="post">
<input type="text" name="Username" placeholder="Username" required=" ">
<input type="password" name="Password" placeholder="Password" required=" ">
<input type="email" name="Email" placeholder="Email Address" required=" ">
<input type="text" name="Phone" placeholder="Phone Number" required=" ">
<div class="g-recaptcha" data-sitekey="thecode"></div>
<input type="submit" value="Register">
</form>
</div>
</html>
However it doesn't load in the form like i didn't add the captcha code .. any solutions ?
Can you provide more info?Did you add recaptcha sdk in head section?And do you use correct keys?Also check if you correctly add domain in Domains list.
There's a weird issue that I had popped into a few days ago, but still cannot find a suitable solution as to how best to go about fixing it. I am currently creating a website where-in I need a certain date-picker to be used (Materalize Date-Picker).
https://codepen.io/Shadow1209/pen/oWvxav
//HTML
<div class="col-md-5 horizontal">
<div class="">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class=" col-md-5 horizontal">
<div class=" ">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
//CSS
.horizontal
{
display:inline-block;
}
//JS
.horizontal
{
display:inline-block;
}
There you can find an example of code that I just quickly arranged to display the "normal" way that the date-picker is supposed to work; basically once the start-date or end-date is clicked on, the pop-up takes over the viewport and centers itself there.
However, once I added animations to the project by means of Animate-it in order to include scrolling animations, issues arose, where the date-picker would suddenly no longer cover the viewport, but rather just the section (form) itself, as can be seen here:
(To add animations, I added the animatedParent and animateOnce classes to the outer container, and the animated fadeInDown classes to the inner containers, as described by the code-creator)
https://codepen.io/Shadow1209/pen/QvLEEB
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
<div class="animatedParent animateOnce col-md-5 horizontal">
<div class="animated fadeInDown">
<form class="contact-form form">
<fieldset class="fieldset">
<legend class="legend">Some Form</legend>
<input type="text" name="Name" placeholder="Name" class="textbox">
<input type="text" name="Surname" placeholder="Surname" class="textbox surname">
<input type="email" name="Email" placeholder="Email" class="textbox">
<input type="text" name="Phone" placeholder="Phone Number" class="textbox phone">
<input type="date" name="Start Date" placeholder="Start Date" class="textbox datepicker">
<input type="date" name="End Date" placeholder="End Date" class="textbox datepicker">
<textarea name="Enquiry" placeholder="Enquiry" class="textbox textarea"></textarea>
<button type="submit" name="Submit" class="form-button">Some Button</button>
</fieldset>
</form>
</div>
</div>
I have even tried changing from Animate-It to Wow Animations, but the problem stayed the same.
While investigating the code, I found out that, should I remove the classes 'animated', 'fadeInDown', and the newly automatically added 'go' class, the issue goes away. This in turn made me think that maybe a way to work around the issue would be to create an on click event that removes the classes from the parent container once a date-selector field has been clicked on, however this does not really seem like a solution to the issue and more of a work-around.
My question would be, "Is there a good way to go about fixing the issue rather than having to resort to creating a work-around?"
Thank you for any help.