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.
Related
Im trying to create a install screen for a CMS, where I need the credantials of the User and the Database. I won't to obfuscate the User and the Database password with input="password". But then the Password Manager of the Browser (Firefox in my case) wants to save the Username of the database.
This is my code:
<form class="contentContainer stack" action="" name="install" method="post" enctype="multipart/form-data">
<h1>Installation</h1>
<fieldset class="form-inner stack">
<h2>Database</h2>
<p>Enter credentials for MYSQL/MariaDB database</p>
<div class="fraction">
<div class="formField">
<label for="db-hostname">Hostname</label>
<input type="text" id="db-hostname" name="db_hostname" value="localhost" placeholder="localhost" required
autofocus />
</div>
<div class="formField">
<label for="db-name">Database</label>
<input type="text" id="db-name" name="db_name" value="" required />
</div>
</div>
<div class="fraction">
<div class="formField">
<label for="db-uname">Database Username</label>
<input type="text" id="db-uname" name="db_uname" value="" required autocomplete="off" />
</div>
<div class="formField">
<label for="db-password">Database Password</label>
<input type="password" id="db-password" name="db_password" value="" required autocomplete="off" />
</div>
</div>
</fieldset>
<fieldset class="form-inner stack">
<h2>Admin User</h2>
<p>Set the required login credentials for the Admin</p>
<div class="fraction">
<div class="formField">
<label for="username">Username</label>
<input type="text" id="username" name="username" value="" required autocomplete="on" />
</div>
<div class="formField">
<label for="password">Password</label>
<input type="password" id="password" name="password" value="" title="Needs at least 8 characters" required minlength="8" autocomplete="on" />
</div>
</div>
<div class="fraction">
<div class="formField">
<label for="name">Real Name</label>
<input type="text" id="name" name="name" value="" required />
</div>
<div class="formField">
<label for="email">E-Mail Address</label>
<input type="email" id="email" name="email" value="" required />
</div>
</div>
</fieldset>
<div class="formField form-field--submit">
<button class="button" type="submit">Install</button>
</div>
</form>
Edit:
To clarify: with the code above the Browsers Pasword Manager will try to save the last input with type="password" as the password but the database username (name="db_uname") as the user name.
I would like to be able to tell the Browser which input to use as the Username and the Password that should be saved.
how can i place multiple inputs into a single row having responsive nature
I'm facing very difficult to place all inputs into a single row only 3 I'm able to place
I wanted to convert the below snippet into bootstrap so that I will be responsive:
here codepen:https://codepen.io/anon/pen/EpbjKL
html:
<div class="input-wrapper">
<div style="float:left;margin-right:20px;">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div style="float:left;margin-right:20px;">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
css:
input, label {
display:block;
}
Question: how to convert above codepen output to bootstrap row,col-*
use this class col-md-auto to make width auto and d-inline-block to display column inline block (bootstrap 4)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="name">Company Name</label>
<input id="name" type="text" value="" name="name" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block">
<label for="email">GST Number</label>
<input id="email" type="text" value="" name="email">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Branch Address</label>
<input id="email" type="text" value="" name="email" style="width:300px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Tin Number</label>
<input id="email" type="text" value="" name="email" style="width:200px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">pin code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">Date</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
<div class="col-md-auto col-lg-auto d-inline-block" style="">
<label for="email">code</label>
<input id="email" type="text" value="" name="email" style="width:100px">
</div>
</div>
I think that you can see the example below,this may satisfy your need. Also,you can set the col-x-x property to place more that 3 input in one row.
row-col example
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.
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.
Here is the code to my form, if anyone has a way of fixing this that would be awesome.
<form id="rendered-form">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div><div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea></div>
<div class="fb-submit form-group field-button-1480832953294"><button type="submit" class="button-input btn btn-warning" name="button-1480832953294" style="warning" id="button-1480832953294">CONTACT US</button></div></form>
</div>
Here is the new code, I have just updated it and it still doesnt work.
<div data-form-alert="true">
<div hidden="" data-form-alert-success="true" class="alert alert-form alert-success text-xs-center">We will contact you as soon as possible!</div>
</div>
<form id="rendered-form" action="mailto:zach#ztmartin.net" method="post">
<div class="fb-text form-group field-name">
<label for="name" class="fb-text-label">Name <span class="required">*</span> </label>
<input type="text" required="" class="form-control name" name="name" id="name" aria-required="true"></div>
<div class="fb-email form-group field-email">
<label for="email" class="fb-email-label">Email <span class="required">*</span> </label>
<input type="email" required="" class="form-control email" name="email" id="email" aria-required="true"></div>
<div class="fb-text form-group field-phone">
<label for="phone" class="fb-text-label">Phone Number </label>
<input type="text" class="form-control phone" name="phone" id="phone"></div>
<div class="fb-undefined form-group field-message">
<label for="message" class="fb-textarea-label">Message <span class="required">*</span> </label>
<textarea type="textarea" required="" rows="5" class="form-control message" name="message" id="message" aria-required="true"></textarea>
</div>
<div class="fb-submit form-group field-button-1480832953294">
<button type="submit" class="btn btn-primary">CONTACT US</button>
</div>
</form>
You should send your form through an action
<form action="example.php" method="post">
It doesn't have to be PHP, but it is an example for how to make an action attribute.
For posting data, you should put method="post" in your form tag, as in
<form method="post">
...
</form>
The default method is get.
The action attribute is not needed if your post url is the same as the current url. in fact, by not putting anything in your form tag, and assuming your page is found at http://myhost.com/mypage, you're actually using the equivalent of this:
<form action="http://myhost.com/mypage" method="get">
...
</form>