<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Welcome to Wave - Log In, Sign Up or Learn More</title>
<style>
#import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
body{
margin: 0;
padding: 0;
background: #fff;
color: #fff;
font-family: Arial;
font-size: 12px;
}
.body{
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
width: auto;
height: auto;
background-image: url(http://ginva.com/wp-content/uploads/2012/07/city-skyline-wallpapers-008.jpg);
background-size: cover;
-webkit-filter: blur(5px);
z-index: 0;
}
.grad{
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
width: auto;
height: auto;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
z-index: 1;
opacity: 0.7;
}
.header{
position: absolute;
top: calc(50% - 35px);
left: calc(50% - 255px);
z-index: 2;
}
.header div{
float: left;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 35px;
font-weight: 200;
}
.header div span{
color: #5379fa !important;
}
.login{
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 50px);
height: 150px;
width: 350px;
padding: 10px;
z-index: 2;
}
.login input[type=text]{
width: 250px;
height: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
}
.login input[type=password]{
width: 250px;
height: 30px;
background: transparent;
border: 1px solid rgba(255,255,255,0.6);
border-radius: 2px;
color: #fff;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 4px;
margin-top: 10px;
}
.login input[type=button]{
width: 260px;
height: 35px;
background: #fff;
border: 1px solid #fff;
cursor: pointer;
border-radius: 2px;
color: #a18d6c;
font-family: 'Exo', sans-serif;
font-size: 16px;
font-weight: 400;
padding: 6px;
margin-top: 10px;
}
.login input[type=button]:hover{
opacity: 0.8;
}
.login input[type=button]:active{
opacity: 0.6;
}
.login input[type=text]:focus{
outline: none;
border: 1px solid rgba(255,255,255,0.9);
}
enter code here
.login input[type=password]:focus{
outline: none;
border: 1px solid rgba(255,255,255,0.9);
}
.login input[type=button]:focus{
outline: none;
}
::-webkit-input-placeholder{
color: rgba(255,255,255,0.6);
}
::-moz-input-placeholder{
color: rgba(255,255,255,0.6);
}
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class="body"></div>
<div class="grad"></div>
<div class="header">
<div>Welcome to<span><br>Wave</span></div>
</div>
<br>
<div class="login">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="button" value="Login">
</div>
<script src='http://codepen.io/assets/libs/fullpage/jquery.js'></script>
enter code here
</body>
</html>
How do I make the login button direct to another page? I am doing this for my class (High school) and need help. What do people need to login in. I have already completed a registration form. I would really appreciate the help.
Just add an "onclick" event to your button. Really you should add an ID to your button and break out the event into a separate JS script, but this would work for your purposes.
<input type="button" value="Login" onclick="location.href = 'otherpage.html';">
Also definitely move all that style into a style.css file and then link it with
<link rel="stylesheet" type="text/css" href="style.css">
That way you don't have it clogging up your html.
You should send user's login information to a server-side script to be processed and then assign a session to that user.
Credentials checking and redirecting from JavaScript is not scure and an expert user can easily bypass this authentication phase. My suggestion is create a HTML form element and then submit those information to server side and from server, redirect the user to another page.
HTML Form:
<form action="address to server-side script" class="login" >
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
<form action="other page link" method="post">
<div class="login">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</div>
</form>
try this
<div class="login"
<form action="otherpage.html" method="post">
<input type="text" placeholder="username" name="user"><br>
<input type="password" placeholder="password" name="password"><br>
<input type="submit" value="Login">
</form>
</div>
I hope this is useful for you.,
Related
I've been trying to have the word "Subcribe" be inserted into the button, however no matter what I try it keeps appearing stuck on the right of it completely outside. I even ended up removing everything else and have that in a html file alone and its still happening. Any help would be greatly appreciated.
Code:
<div class="container">
<form action="">
<h1>Join Our Newsletter</h1>
<p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
<div class="email-box">
<i class="fas fa-envelope"></i>
<input class="tbox" type="email" name="" value="" placeholder="Enter your email">
<input class="btn" type="button">Subscribe</button>
</div>
</form>
</div>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', serif;
}
.container{
padding: 10px;
}
.container p{
max-width: 600px;
margin: 40px auto;
color: white;
}
.email-box{
height: 40px;
display: flex;
justify-content: center;
}
.email-box i{
background: rgba(250, 247, 177, 0.6);;
width: 40px;
line-height: 40px;
}
.tbox,.btn{
border: none;
outline: none;
}
.tbox{
width: 0px;
transition: 0.5s;
}
.email-box:hover > .tbox,.tbox:focus{
width: 260px;
padding: 0 10px;
}
.btn{
background: rgba(250, 247, 177, 0.6);
color: white;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
width: 100px;
}
.button{
width: 100px auto;
}
It looks like the following tag is not closed properly.
<input class="tbox" type="email" name="" value="" placeholder="Enter your email" />
Also the button doesn't have a right start tag
<button class="btn" type="button">Subscribe</button>
Your HTML is invalid. <input> does not have a closing tag. You can fix that two ways
Give you input a value and close the tag:
<input class="btn" type="button" value="Subscribe" />
Make the button use the button tag element:
<button class="btn" type="button">Subscribe</button>
It seems that your button tag does not have an opening tag! ;)
*{
margin: 0;
padding: 0;
font-family: 'Libre Baskerville', serif;
}
.container{
padding: 10px;
}
.container p{
max-width: 600px;
margin: 40px auto;
color: white;
}
.email-box{
height: 40px;
display: flex;
justify-content: center;
}
.email-box i{
background: rgba(250, 247, 177, 0.6);;
width: 40px;
line-height: 40px;
}
.tbox,.btn{
border: none;
outline: none;
}
.tbox{
width: 0px;
transition: 0.5s;
}
.email-box:hover > .tbox,.tbox:focus{
width: 260px;
padding: 0 10px;
}
.btn{
background: rgba(250, 247, 177, 0.6);
color: black;
padding: 0 10px;
text-transform: uppercase;
cursor: pointer;
width: 100px;
}
.button{
width: 100px auto;
}
<div class="container">
<form action="">
<h1>Join Our Newsletter</h1>
<p>For daily updates about our Church and Mass readings. Please join our Newsletter</p>
<div class="email-box">
<i class="fas fa-envelope"></i>
<input class="tbox" type="email" name="" value="" placeholder="Enter your email">
<button class="btn" type="button">Button</button>
</div>
</form>
</div>
See fixed answer below!
(I have also made the button text black so it is visable!)
How do I get login and register buttons to align side by side using HTML and CSS?
I want the register button to point out to register.php
I have tried to create register button with element, but it doesn't seem to work. If I try to put display:inline; it doesn't put the two buttons side by side.
*{
font-family: 'Montserrat', sans-serif;
}
body,
html{
margin: 0px;
padding: 0px;
background-color: #0E0E0E;
}
.login-box{
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
}
.login-box h1{
color: #FFFFFF;
margin:0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input{
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit{
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
#pwdreset{
display: block;
color: #FFFFFF;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="signin.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Agreya - Login</title>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
</form>
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
</body>
</html>
Is this what you desire ?
* {
font-family: 'Montserrat', sans-serif;
}
body,
html {
margin: 0px;
padding: 0px;
background-color: #0E0E0E;
}
.login-box {
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
position: relative;
}
.login-box h1 {
color: #FFFFFF;
margin: 0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input {
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
position: absolute;
bottom: 0;
}
#pwdreset {
display: block;
color: #FFFFFF;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #E4FF77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email">
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
</form>
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
Use the formaction attribute, put the two buttons in the same form as follow.
This is HTML5, on IE works on version 10 and more.
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<input id="submit" type="submit" name="submit" value="Login">
<input formaction="/register.php" id="register-button" type="submit" name="register" value="Register" >
</form>
I would advice to add position: relative; to class:
.login-box.
And set a class to your register form like:
.form-2{
position:absolute;
bottom: 0;
right:0;
}
here you can wrap your second form and button in first form into new div with style display flex, and you will have side by side buttons.
* {
font-family: "Montserrat", sans-serif;
}
body,
html {
margin: 0px;
padding: 0px;
background-color: #0e0e0e;
}
.login-box {
background-color: #010100;
width: 400px;
height: 388px;
margin: 250px auto;
}
.login-box h1 {
color: #ffffff;
margin: 0px 35px;
margin-bottom: 35px;
padding-top: 25px;
}
.login-box form input {
display: block;
width: 324px;
height: 50px;
margin-left: 35px;
margin-right: 41px;
margin-bottom: 24px;
}
#submit {
display: inline;
color: #010100;
background-color: #e4ff77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
#pwdreset {
display: block;
color: #ffffff;
text-decoration: none;
margin: 20px 0px;
margin-left: 225px;
}
#register-button {
display: inline;
color: #010100;
background-color: #e4ff77;
border: 2px solid transparent;
border-radius: 12px;
width: 150px;
height: 50px;
margin-left: 24px;
margin-right: 41px;
margin-bottom: 33px;
}
.submits {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
<title>Agreya - Login</title>
</head>
<body>
<div class="login-box">
<h1>Login</h1>
<form class="login-form" action="login.php" method="post">
<input id="username" type="text" name="username" placeholder="Email" >
<input id="password" type="password" name="password" placeholder="Password">
<a id="pwdreset" href="#">Forgot password?</a>
<div class="submits">
<input id="submit" type="submit" name="submit" value="Login">
<form action="https://www.w3docs.com/">
<input id="register-button" type="submit" name="register" value="Register">
</form>
</div>
</form>
</div>
</body>
</html>
The following problem only happens in Firefox. The html after my textarea appears in the text box when the page runs in the browser. It works fine on Chrome and Safari. I've cleared my cache but it's still doing it. I can't work out why any code would appear in the box after the closing tag. Screenshot below to better explain the problem.
button {
width: 176px;
height: 47px;
background: #6442ff;
color: #ffffff;
font-family: "Roboto";
font-size: 12px;
line-height: 18px;
align-items: center;
border: none;
}
.home-name {
position: absolute;
width: 828px;
height: 38px;
left: 303px;
top: 4184px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 25px;
/* identical to box height, or 167% */
text-align: left;
color: #eaeaea;
}
input[type=text] {
padding-left: 20px;
padding-top: 2px;
}
.home-email {
position: absolute;
width: 406px;
height: 38px;
left: 303px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-phone {
position: absolute;
width: 406px;
height: 38px;
left: 725px;
top: 4236px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-size: 15px;
line-height: 18px;
/* identical to box height */
color: #d3d3d3;
}
.home-message {
position: absolute;
width: 828px;
height: 167px;
left: 303px;
top: 4288px;
background: #ffffff;
border: 1px solid #eaeaea;
box-sizing: border-box;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 15px;
line-height: 18px;
;
/* identical to box height */
color: #eaeaea;
}
.home-message-contact {
position: absolute;
width: 163px;
height: 47px;
left: 638px;
top: 4490px;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap" rel="stylesheet">
<title>Hello</title>
<body>
<form>
<div class="name-form">
<input type="text" placeholder="Name" class="home-name" required>
</div>
<div class="phone-form">
<input type="text" placeholder="Phone" class="home-phone" required>
</div>
<div class="email-form">
<input type="text" placeholder="Email" class="home-email" required>
</div>
<div class="message-form">
<textarea placeholder="Message" class="home-message" required></textarea>
</div>
</form>
<button class="home-message-contact" type="submit">Submit</button>
Looking on your code, you forgot to close </head>. Although it could be unclosed quote, or some script. Your code works fine. You can attach a full code of your file.
UPDATED
I'v recreated your issue. You forgot to close </textarea>
Like this
<textarea placeholder="Message" class="home-message" required></textarea>
This what happens when I removed </textarea>
UPDATE 2
Try to put <button class="home-message-contact" type="submit">Submit</button> inside tag <form>.
Or use construction like this
<div>
<form id="my-form">
<label for="name">Name:</label>
<input type="text" name="name"></input>
</form>
<!-- ... -->
<button type="submit" form="my-form">Submit</button>
</div>
Your question is not clear, however I found same results across browsers.
Closing of head is missing </head> is your html
just change it and refresh on Firefox pressing Shift + F5.
I have tried using float, overflow, clear and yet still my html form continues floating right. My intended outcome is for the html form to remain in portrait on my mobile device when I go to fill out the form.
This is the current code for my html form:
<form name = "CommentsForm" action ="Actionpage.php" onsubmit="return
validateForm()" method="post">
<u class = "FormHeading">Send Comment</u><br>
<br>
First Name:<br>
<input type="text" name="firstname">
<br>
<div style = "position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style = "position: relative; top: -13px; left: 1px;">
Email:<br>
<input type="text" name="email">
</div>
<br>
<div style = "position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment
here" style="height: 69px;">
</textarea>
<br>
<br>
<input type="submit" name ="submit" value="Send" >
</form>
This is the css for the html form on my mobile website:
form
{
border: 10px solid #D3D3D3;
border-radius: 4px;
background: #D3D3D3;
width: 176px;
height: 319px;
position: absolute;
top: 620px;
left: 91px;
font-family: "Arial", "Times New Roman", "Sans Serif";
font-style: normal;
text-decoration: none;
float: none;
}
.FormHeading
{
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type=text]
{
width: 168px;
float: none;
}
input[type=text]:focus
{
float: none;
}
textarea
{
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 01px;
width: 173px;
float: none;
}
input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
Please note I have a HTC desire 626 and I am designing my mobile website with this in mind.
I am sharing a pen with a posible solution:
Your positions where fixed, so I made them flexible using percentages.
Let me know if its ok.
Click for Solution at codepen
form {
padding: 10px;
border-radius: 4px;
background: #d3d3d3;
width: 176px;
transform: translateX(-50%);
height: 319px;
position: absolute;
bottom: 0;
left: 50%;
font-family: "Arial", "Times New Roman", "Sans Serif";
font-style: normal;
text-decoration: none;
}
.FormHeading {
text-decoration: underline;
font-weight: bold;
position: relative;
left: 29px;
}
input[type="text"] {
width: 168px;
float: none;
}
input[type="text"]:focus {
float: none;
}
textarea {
resize: none;
box-sizing: border-box;
position: relative;
top: -23px;
left: 1px;
width: 173px;
float: none;
}
input[type="submit"] {
background-color: #add8e6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
input[type=submit]
{
background-color: #ADD8E6;
position: relative;
top: -44px;
left: 119px;
text-align: center;
}
<form name="CommentsForm" action="Actionpage.php" onsubmit="return validateForm()" method="post">
<u class="FormHeading">Send Comment</u><br>
<br> First Name:<br>
<input type="text" name="firstname">
<br>
<div style="position: relative; top: 4px; left: 01px;">
Last Name:<br>
<input type="text" name="lastname">
</div>
<br>
<div style="position: relative; top: -13px; left: 1px;">
Email:<br>
<input type="text" name="email">
</div>
<br>
<div style="position: relative; top: -24px; left:03px;">
<label for="comment"> Comment:</label></div>
<textarea id="comment" name="comment" placeholder="Type commment here" style="height: 69px;"></textarea>
<br>
<br>
<input type="submit" name="submit" value="Send">
</form>
use your form properties like this:
form { border: 10px solid #D3D3D3; border-radius: 4px; background: #D3D3D3; width: 176px; height: 319px; position: relative; margin: 0 auto; font-family: "Arial", "Times New Roman", "Sans Serif"; font-style: normal; text-decoration: none; }
I have removed your float and made position relative and added margin: 0 auto;
I guess you are trying to keep the form in the middle of the screen? If yes, then this will work.
the line around the blue box
There is a line around the blue box. How can I remove it and just get the clean rounded box?
I have tried
{
border: none;
outline: none;
}
but it doesn't work. I rounded the corners and then the line appeared which seems to be the outline when the corners are not rounded.
Here is my css and html code:
body,html{
height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
padding: 0;
}
.bgimg{
background-image: url(room1.jpg);
min-height: 100%;
opacity: 0.2;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Sign-In{
background-color: steelblue;
color: black;
opacity: 1;
position:absolute;
top:25%;
left:37%;
text-align: center;
border-radius: 15px;
font-family: cursive;
width: 300px;
}
.marg{
margin-top: 15px;
}
#button{
margin-bottom: 15px;
padding: 10px;
margin-top: 30px;
border-radius: 10px;
}
.box{
border-radius: 10px;
width: 200px;
text-align: center;
border: none;
height: 15px;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Sign-In</title>
<link rel="stylesheet" type="text/css" href="2.css">
</head>
<body>
<div class="bgimg">
</div>
<div class="Sign-In">
<fieldset>
<h2>LOG-IN</h2>
<form method="POST" action=""> User <br>
<input type="text" name="user" size="40" class="box">
<div class="marg"> Password </div>
<input type="password" name="pass" size="40" class="box"><br>
<input id="button" type="submit" name="submit" value="Log In">
</form>
</fieldset>
</div>
</body>
</html>
It's the fieldset, it has a border by default.
fieldset {
border: 0px;
}
You can read more about the styling of form / fieldset / etc elements here
fieldset {
border: none;
}
body,html{
height: 100%;
color: #777;
line-height: 1.8;
margin: 0;
padding: 0;
}
.bgimg{
background-image: url(room1.jpg);
min-height: 100%;
opacity: 0.2;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.Sign-In{
background-color: steelblue;
color: black;
opacity: 1;
position:absolute;
top:25%;
left:37%;
text-align: center;
border-radius: 15px;
font-family: cursive;
width: 300px;
}
.marg{
margin-top: 15px;
}
#button{
margin-bottom: 15px;
padding: 10px;
margin-top: 30px;
border-radius: 10px;
}
.box{
border-radius: 10px;
width: 200px;
text-align: center;
border: none;
height: 15px;
}
fieldset {
border: none;
}
<div class="bgimg">
</div>
<div class="Sign-In">
<fieldset>
<h2>LOG-IN</h2>
<form method="POST" action=""> User <br>
<input type="text" name="user" size="40" class="box">
<div class="marg"> Password </div>
<input type="password" name="pass" size="40" class="box"><br>
<input id="button" type="submit" name="submit" value="Log In">
</form>
</fieldset>
</div>