My Captcha is not appearing in html form - html

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.

Related

Go to Other Page When Form Input Element Is Clicked

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>

HTML Form action="#"

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.

html required only apply to one form

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.

Moving some fields from the form to the right

So I am building a website and now that I got a register form I might aswell just make it fancy so stuff like address etc comes to the right and personal info stays at the left.
As of now I got
<section id="form"><!--form-->
<div class="container">
<div class="row">
<div class="col-sm-4 col-sm-offset-1">
<div class="login-form"><!--login form-->
<h2>Login to your account</h2>
<form method="post">
<div id="login-error"></div>
<input id="login-mail" type="email" placeholder="Email Address" />
<input id="login-pass" type="password" placeholder="Password" />
<button id="login- submit" type="submit" class="btn btn-default">Login</button>
</form>
</div><!--/login form-->
</div>
<div class="col-sm-1">
<h2 class="or">OR</h2>
</div>
<div class="col-sm-4">
<div class="signup-form"><!--sign up form-->
<h2>New User Signup!</h2>
<form name="signup-form" action="/register" method="post" >
<input required id="sign-up-name" type="text" placeholder="Name"/>
<input required id="sign-up-surname" type="text" placeholder="Last Name"/>
<input required id="sign-up-mail" type="email" placeholder="Email Address"/>
<input required id="sign-up-phone" type="tel" placeholder="Telphone"/>
<input required id="sign-up-gsm" type="tel" placeholder="Mobile Phone"/>
<input required id="sign-up-pass" type="password" placeholder="Password"/>
<input required id="sign-up-pass-re" type="password" placeholder="Password again"/>
<input required id="sign-up-street" type="text" placeholder="Street"/>
<input required id="sign-up-nr" type="text" placeholder="Nr"/>
<input required id="sign-up-postalcode" type="text" placeholder="Postalcode"/>
<input required id="sign-up-city" type="text" placeholder="City"/>
<input required id="sign-up-country" type="text" placeholder="Country"/>
<button id="sign-up-submit" type="submit" class="btn btn-default">Signup</button>
</form>
</div><!--/sign up form-->
</div>
</div>
</div>
</section>
I have read something about span but I tried it and it didn't really work. So here it is. Is this something I need to edit in css or in html and what exactly am I looking for?
Did you provide a reference to bootstrap.min.css
I added reference to form control using class="form-control" for the inputs
Is this what you are looking for - https://jsfiddle.net/pmankar/qh6sav52/
Try resizing the output pane to see how your final page would be displayed.

How can i create message box using bootstrap?

I am using Bootstrap 3. I am just unable to create message box which should have 4 rows inside. can anyone please help me? My code is below:
<div class="row">
<div class="col-lg-12">
<form action="" method="POST" enctype="multipart/form-data" id="form_id">
<div class="form-group">
<h5><label for="inputName">Name</label></h5>
<input type="text" name="career[name]" class="form-control" tabindex="1" placeholder="Enter your name" pattern="[a-zA-Z. ]{1,50}" required>
</div>
<div class="form-group">
<h5><label for="inputEmail">Email</label></h5>
<input type="email" name="career[email]" class="form-control" tabindex="2" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<h5><label for="inputMobile">Mobile</label></h5>
<input type="tel" name="career[mobile]" class="form-control" tabindex="3" placeholder="Enter your mobile number" pattern="[0-9]{10}" maxlength="10" required>
</div>
<div class="form-group">
<h5><label for="inputMessage">Message</label></h5>
<input type="text" name="career[message]" class="form-control" tabindex="4" placeholder="Write your details" required>
</div>
<button type="submit" name="submit" class="btn btn-primary btn-block" tabindex="5">Submit</button>
</form>
</div>
</div>
I want my message box something like this.
Your problem is you are not using textarea! Replace the below code:
<input type="text" name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required>
With:
<textarea name="career[message]" class="form-control" tabindex="4"
placeholder="Write your details" required></textarea>