<?php
// Start the session
session_start();
?>
<html>
<head>
<title>Student Registeration</title>
<link rel="stylesheet" src="text/css" >
<style>
.login-box
{
width:280px;
position:relative;
top:30%;
left:50%;
transform: translate(-50%,-50%);
color:black;
}
h1
{
margin: 0;
float:left;
font-size:38px;
border-bottom: 6px solid gold;
margin-bottom: 40px;
padding:0 0 20px;
text-align:center;
}
.login-box p
{
margin: 0;
padding: 0;
font-size: 18px;
}
.login-box input
{
width: 100%;
overflow: hidden;
margin-bottom: 20px;
margin: 8px 0;
padding:9px 0;
}
.login-box input\[type="text"\], input\[type="password"\], input\[type="email"\]
{
border: none;
outline: none;
border-bottom: 1px solid gold;
background: none;
color:gold;
font-size: 16px;
width:100%;
float:left;
}
.button
{
font-family: century gothic;
border: none;
color: white;
padding: 15px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 19px;
background-image: linear-gradient(to right, gold , black);
}
</style>
</head>
<body>
<?php
include'header.php';
?>
<div class="login-box">
<form method="post" action="authen.php" <?php echo $_SERVER\['PHP_SELF'\]; ?>>
<h1>Create Account</h1>
<p><b>Full Name : </b></p>
<input type="text" class="textarea" id="fname" name=" fname" placeholder="Full Name" style="width:100%;" name="fname" pattern="\[A-Za-z \]+" required >
<p><b>Email :</b></p>
<input type="email" class="textarea" id="email" placeholder="Email" style="width:100%;" name="email" pattern="\[a-z0-9._%+-\]+#\[a-z0-9.-\]+\.\[a-z\]{2,}$" required>
<p><b>Username :</b></p>
<input type="text" id="user" class="textarea" placeholder="Username" style="width:100%;" name="user" pattern="\[A-Za-z0-9\]{5,}" required>
<p><b>Phone :</b></p>
<input type="text" id="phno" class="textarea" placeholder="Phone Number" style="width:100%;" name="phno" pattern="\[0-9\]{10}" required>
<p><b>Password :</b></p>
<input type="password" id="pass" placeholder="Password" class="textarea" style="width:100%;" name="pass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Confirm Password :</b></p>
<input type="password" id="cpass" class="textarea" placeholder="Confirm Password" style="width:100%;" name="cpass" pattern="\[A-Za-z0-9\]{6,}" required>
<p><b>Choose the following:</b></p>
<input type="radio" class="textarea" id="pfaculty" name="Faculty" value="Permanent faculty" required >Permanent Faculty
<input type="radio" class="textarea" id="vfaculty" name="Faculty" value="Visiting faculty" required >Visiting Faculty
<input type="submit" name="submit" class="Button"id="btn" value="Submit">
</form>
</div>
</body>
</html>
header.css
/*Index CSS*/
body{
color:#008080;
font-family:Century Gothic;
position: relative;
}
/*Naavigation Bar*/
div{
height:70px;
}
a{
color: #f2f2f2;
text-align: center;
text-decoration: none;
}
#Name{
float: left;
color: #f2f2f2;
text-align: center;
padding: 2px 5px;
font-size: 30px;
margin-top:12px;
}
.header {
overflow: hidden;
background-color: black;
position: fixed;
width: 100%;
top: 0;
}
.links{
float: right;
display: block;
color: #f2f2f2;
text-align: center;
margin-top:10px;
text-decoration: none;
padding: 14px 16px;
font-size: 20px;
}
.links:hover {
background-color: white;
color: #008080;
border-radius: 10px;
transition: 0.2s;
}
.header .icon {
display: none;
}
#media screen and (max-width: 600px) {
.links.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.header.responsive {
position: relative;
}
.header.responsive a {
float: none;
display: block;
text-align: left;
}
}
]1]1
Here in this code I have problem that my form overlaps my header
When I scroll down in the page it scrolls the form and overlap the header.
As I have given a picture you can see my form overlaps my header which should not happen. It should not crossover the header thats the problem.
And my radion button text is also not coming in proper format I have tried a lot things but it is not happening. So please anyone can resolve this error.
Give z-index (any value you want but greater than your form) to your header and if there is no position property in your header, add position: relative.
Related
I have a form coded like this I want to make it responsive in both mobile and tablet version or responsive regardless:
</div>
<div class="contact_form">
<form
class="form"
action="https://sheetdb.io/api/v1/it1l3r9npizts"
method="post"
id="sheetdb-form"
>
<label for="name">Name:</label>
<input
type="text"
id="name"
name="data[name]"
placeholder="Your name"
/>
<label for="email">Email:</label>
<input
type="email"
id="email"
name="data[email]"
placeholder="Your email"
/>
<label for="message">Message:</label>
<textarea
id="message"
placeholder="Your message"
rows="6"
name="data[message]"
></textarea>
<div class="center">
<input type="submit" value="Send Message" />
</div>
</form>
</div>
with these styles in css:
.contact_section {
width: 100%;
height: 100%;
}
.contact_form {
display: flex;
align-items: center;
flex-direction: column;
}
.contact_form label {
margin: 15px 0;
}
.contact_form label {
font-size: 20px;
font-weight: 400;
}
.contact_form input,
textarea {
width: 100%;
padding: 10px;
outline: none;
resize: none;
border: none;
border-bottom: 1px solid var(--contrast-color);
}
input[type="text"]:focus,
textarea:focus {
border-bottom: 2px solid var(--main-color);
}
textarea::-webkit-scrollbar {
width: 4px;
}
textarea::-webkit-scrollbar-thumb {
background-color: var(--contrast-color);
}
.center {
text-align: center;
width: 602px;
font-size: 20px;
}
input[type="submit"] {
margin-top: 30px;
width: 100%;
max-width: 200px;
background-color: var(--netural-color);
font-size: 17px;
color: var(--contrast-color);
font-weight: 400;
cursor: pointer;
}
I have been trying to make it responsive cause my form doesn't shrink down and there isn't any padding on the left and right when the screen keeps getting
smaller:
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.contact_form input textarea {
width: 70%;
margin-top: 0;
.home-section {
height: 100vh;
}
section {
height: 100%;
width: 100%;
}
}
Based on your code I suspect the .center and it's fixed width is setting the width of your form. Just remove that width or make it responsive.
.center {
text-align: center;
width: 602px;
font-size: 20px;
}
<form>
<div class="center">
<input type="submit" value="Send Message" />
</div>
</form>
I have built a relatively simple contact form, cant seem to center the actual content (it currently sits on the left,i'm hoping to move it dead center), my logic is the margin auto class should have worked but no luck, thanks in advance to anyone who can see where my logic is wrong.
forms are a bit new to me,maybe i'm supposed to be targeting a different element?
<section id="contact">
<div class="contact-title">
<h2>Lets talk about building your new site</h2>
<h3>Contact me today and ill be in touch soon</h3>
</div>
<div class="contact-form">
<form id="contact-form" method="post" action="">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<br>
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<br>
<input name="phone" type="text" class="form-control" placeholder="Your Phone" required>
<br>
<textarea name="message" class="form-control" cols="60" rows="10" placeholder="Message goes here"></textarea>
<br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
</section>
CSS
#contact {
margin:0;
padding: 0;
text-align: center;
background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80');
background-size: cover;
background-position: center;
}
.contact-title {
padding-top: 3rem;
margin-top:50px;
text-transform: uppercase;
color: #fff;
transition: all 4s ease-in-out;
}
.contact-title h2 {
font-size: 4rem;
}
form {
margin-top: 5rem;
transition: all 4s ease-in-out;
text-align: center;
}
.form-control {
width:600px;
background:transparent;
border:none;
outline: none;
border-bottom: 1px solid grey;
color:#fff;
}
.form-control:hover {
width:600px;
background:transparent;
border:none;
outline: none;
border-bottom: 1px solid grey;
color:#fff;
}
input {
height:45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
text-align: center;
}
form .submit:hover {
background: #ff5722;
cursor: pointer;
}
.contact-form {
width: 100%;
margin: 0 auto;
}
The problem was you had fixed width for form controls for 600px and contact form width was 100%. It fills the screen and you can't actually see whether it is centred. In the below snippet I reduced the form control size into 200px and div width to 50% and you can see the form is centered.
#contact {
margin:0;
padding: 0;
text-align: center;
background: linear-gradient(rgba(0,0,50,0.5),rgba(0,0,50,0.5)),url('https://images.unsplash.com/photo-1491986926302-149ec463b90a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f34dc245ab45d60718efaa50bcdecee1&auto=format&fit=crop&w=1351&q=80');
background-size: cover;
background-position: center;
}
.contact-title {
padding-top: 3rem;
margin-top:50px;
text-transform: uppercase;
color: #fff;
transition: all 4s ease-in-out;
}
.contact-title h2 {
font-size: 4rem;
}
form {
margin-top: 5rem;
transition: all 4s ease-in-out;
text-align: center;
}
.form-control {
width:200px;
background:transparent;
border:none;
outline: none;
border-bottom: 1px solid grey;
color:#fff;
}
.form-control:hover {
width:200px;
background:transparent;
border:none;
outline: none;
border-bottom: 1px solid grey;
color:#fff;
}
input {
height:45px;
}
form .submit {
background: #ff5722;
border-color: transparent;
color: #fff;
font-size: 20px;
font-weight: bold;
letter-spacing: 2px;
height: 50px;
margin-top: 20px;
text-align: center;
}
form .submit:hover {
background: #ff5722;
cursor: pointer;
}
.contact-form {
width: 50%;
margin: 0 auto;
}
<section id="contact">
<div class="contact-form">
<form id="contact-form" method="post" action="">
<input name="name" type="text" class="form-control" placeholder="Your Name" required>
<br>
<input name="email" type="email" class="form-control" placeholder="Your Email" required>
<br>
<input name="phone" type="text" class="form-control" placeholder="Your Phone" required>
<br>
<textarea name="message" class="form-control" cols="60" rows="10" placeholder="Message goes here"></textarea>
<br>
<input type="submit" class="form-control submit" value="SEND MESSAGE">
</form>
</div>
</section>
I am not able to understand how I can get the label from top of the input field to the left. The label text is on top of the input field. How can I get it to the left of the input field for the contact information part? Any help would be appreciated. Thanks a lot.
This is my code:
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can reset width and display on inputs and/or use float.
It can be a reset at any time or within the mediaquerie.
You can also filter within which fieldset you need this reset to be effective.(example below)
.formcenter fieldset:first-of-type label,
.formcenter fieldset:first-of-type input{
float: left;
line-height: 1.2em;
padding: 6px;
margin: 8px 0;
width: 50%;
}
.formcenter fieldset:first-of-type label {
clear: left;
width: 35%;
}
input[type="checkbox"],
input[type="radio"]{
margin-right:1em;
}
fieldset ~ fieldset br + label {
margin:1em;
color:gray
}
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
.formcenter fieldset:first-of-type label,
.formcenter fieldset:first-of-type input{
float: left;
line-height: 1.2em;
padding: 6px;
margin: 8px 0;
width: 50%;
}
.formcenter fieldset:first-of-type label {
clear: left;
width: 35%;
}
input[type="checkbox"],
input[type="radio"]{
margin-right:1em;
}
fieldset ~ fieldset br + label {
margin:1em;
color:gray
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can use display:flex with a container for each lines
.line
{
display:flex;
align-items:center;
}
.line label
{
min-width:200px;
}
input
{
flex:1;
margin:10px;
}
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<div class="line">
<label for="inputfield">Full Name :</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
</div>
<div class="line">
<label for="inputfield1">Email Address :</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
</div>
<div class="line">
<label for="inputfield2">Phone Number :</label>
<input type="text" name="phonenumber" id="inputfield2">
</div>
<div class="line">
<label for="inputfield3">Street Address :</label>
<input type="text" name="streetaddress" id="inputfield3">
</div>
<div class="line">
<label for="inputfield4">City :</label>
<input type="text" name="city" id="inputfield4">
</div>
<div class="line">
<label for="stateselect">State :</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
</div>
<div class="line">
<label for="zipcode">Zip Code :</label>
<input type="text" name="zipcode" id="zipcode">
</div>
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<input type="checkbox" name="htmlnews"><label>HTML News</label><br><br>
<input type="checkbox" name="css"><label>CSS News</label><br><br>
<input type="checkbox" name="javascript"><label>Javascript News</label><br><br>
<label>Newsletter format</label><br><br>
<input type="radio" name="newsletter" value="html"><label>HTML</label><br><br>
<input type="radio" name="newsletter" value="plaintext"><label>Plain Text</label><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
Swap your labels and inputs to get desired result:
#p1 {
text-align: center;
background-color: black;
color: white;
padding: 20px;
}
#h31 {
text-align: center;
}
#p2 {
text-align: center;
}
input[type="text"] {
border: 2px solid grey;
border-radius: 4px;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
input[type="text"]:focus {
border: 2px solid blue;
}
input[type="email"]:focus {
border: 2px solid blue;
}
::placeholder {
text-align: right;
}
input[type="submit"] {
background-color: #3cbc8d;
color: white;
border-radius: 4px;
padding: 16px 32px;
width: 100%;
}
input[type="email"] {
border: 2px solid grey;
padding: 6px;
width: 90%;
background-color: #d3d3d3;
display: block;
margin: 8px 0;
}
#p3 {
text-align: center;
}
#submitdiv {
text-align: center;
}
#textareadiv {
text-align: center;
}
textarea {
width: 100%;
}
hr {
width: 100%;
}
select {
background-color: #d3d3d3;
padding: 6px;
width: 90%;
display: block;
margin: 8px 0;
}
input[id="zipcode"] {
width: 40%;
}
body {
font-family: 'Merriweather', serif;
}
fieldset {
border: none;
}
#media screen and (min-width: 768px) {
.formcenter {
text-align: center;
display: block;
}
form {
text-align: left;
margin-left: auto;
margin-right: auto;
display: inline-block;
}
select {
width: 90%;
padding: 6px;
border-radius: 4px;
}
#p1 {
width: 100%;
}
hr {
width: 100%;
}
}
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<p id="p1">THE CODE REVIEW</p><br><br>
<div class="formcenter">
<form method="post" action="project3.html">
<h3 id="h31">Sign up for our newsletter</h3>
<p id="p2">Get the latest news on how your code is doing right in your inbox</p>
<hr>
<hr>
<fieldset>
<legend>
<h3 id="h32">Contact Information</h3>
</legend>
<label for="inputfield">Full Name</label>
<input type="text" name="fullname" placeholder="Required" id="inputfield">
<label for="inputfield1">Email Address</label>
<input type="email" name="emailaddress" placeholder="Required" id="inputfield1">
<label for="inputfield2">Phone Number</label>
<input type="text" name="phonenumber" id="inputfield2">
<label for="inputfield3">Street Address</label>
<input type="text" name="streetaddress" id="inputfield3">
<label for="inputfield4">City</label>
<input type="text" name="city" id="inputfield4">
<label for="stateselect">State</label>
<select name="state" id="stateselect">
<option>Choose State</option>
<option value="mah">Maharashtra</option>
<option value="guj">Gujarat</option>
<option value="pun">Punjab</option>
</select>
<label for="zipcode">Zip Code</label>
<input type="text" name="zipcode" id="zipcode">
</fieldset>
<hr>
<fieldset>
<legend>
<h3>Newsletter</h3>
</legend><br>
<label>Select the newsletters you would like to receive</label><br><br>
<label>HTML News</label><input type="checkbox" name="htmlnews"><br><br>
<label>CSS News</label><input type="checkbox" name="css"><br><br>
<label>Javascript News</label><input type="checkbox" name="javascript"><br><br>
<label>Newsletter format</label><br><br>
<label>HTML</label><input type="radio" name="newsletter" value="html"><br><br>
<label>Plain Text</label><input type="radio" name="newsletter" value="plaintext"><br><br>
<label>Other topics you'd like to hear about</label><br><br>
<div id="textareadiv">
<textarea rows="5" cols="30"></textarea><br><br>
</div>
<div id="submitdiv">
<input type="submit" value="Sign Up"><br><br>
</div>
</fieldset>
<p id="p3"><i>Copyright The Code Review</i></p>
</form>
</div>
You can do this fairly easily:
Full Name: <input type="text" name="fullname" placeholder="Required" id="inputfield">
This will just make the text appear to the left side of the input itself.
I used this method for a newsletter input I was doing:
Name: <input id="nameInput" type="text" name="name" required><br>
I'm styling a form for a site and I need it to look like this -
My coded version, so far, looks like this -
The name & email sections for some reason won't size properly and there seems to be padding or margin properties somewhere which I can't seem to override. Here's my code as it stands -
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
.name {
float: left;
}
input[type=text],
input[type=email] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
input[type=subject] {
background: #F0F0F0;
font-size: 10px;
width: 100%;
height: 20px;
}
textarea {
resize: vertical;
font-size: 10px;
width: 100%;
background: #F0F0F0;
height: 100px;
}
input[type=submit] {
background: #00bfff;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
}
<div class="six columns">
<form>
<fieldset>
<div class="name">
<input type="text" required placeholder="NAME">
</div>
<div class="name">
<input type="email" required placeholder="EMAIL">
</div>
<div>
<input type="subject" placeholder="SUBJECT">
</div>
<div>
<textarea placeholder="MESSAGE..."></textarea>
</div>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
UPDATE - Latest version.
I made a bunch of tweaks and kind of last track as I went, so I hope you're able to read through this and figure it out. If not, please feel free to ask questions!
form {
height: 200px;
width: 400px;
margin-right: 50px;
}
fieldset {
border: none;
padding: 0;
margin: 0;
display: flex;
}
div.row {
display: flex;
width: 100%;
}
div.row input {
margin-left: 5px;
}
div.row input:first-child {
margin-left: 0;
}
input[type=text],
input[type=email] {
background: #E8E8E8;
font-size: 10px;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
margin-bottom: 5px;
padding: 6px 12px;
}
textarea {
resize: none;
font-size: 10px;
background: #E8E8E8;
width: 100%;
box-sizing: border-box;
border: 0;
padding: 6px 12px;
margin-bottom: 5px;
}
input[type=submit] {
background: #1ba4dd;
border: none;
color: #ffffff;
cursor: pointer;
font-size: 10px;
font-weight: 700;
width: 100%;
padding: 8px 0;
}
input[type=submit]:hover {
background: #00bfff;
}
<div class="six columns">
<form>
<fieldset>
<div class="row">
<input name="name" type="text" required placeholder="NAME">
<input name="email" type="email" required placeholder="EMAIL">
</div>
<input name="subject" type="text" placeholder="SUBJECT">
<textarea rows="8" placeholder="MESSAGE..."></textarea>
</fieldset>
<input type="submit" value="SUBMIT">
</form>
</div>
I tried to set the width and padding of the divs by pixels in all directions to make them fit together but its not working in any way I try. and when I zoom in and out the width of everything changes. I feel I am doing it the wrong way, is there another easier way people adjust the sizes and positions of the elements in page?
JsFiddle: http://jsfiddle.net/ruavcstx/
<!DOCTYPE html>
<html>
<head>
<style>
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
}
.username {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding: 15px 35px ;
display: table;
text-align: center;
margin: 0px;
width: 150px;
margin: 0;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
</style>
</head>
<body class="background">
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
</html>
Alright, try these changes in the fiddle: http://jsfiddle.net/ruavcstx/1/
I changed -
username/password class
display: block
padding-top: 35px; (no other setting)
width: 100%;
And I made a minor change in the html (placed a <br/> after the password textbox so the error comes up on the next line).
.background {
background-color: #2ECCFA;
}
#signupform {
clear: both;
background-color: #e9c85d;
display: table;
padding: 33px 29px 33px 29px;
}
#loginform {
background-color: #4daf7c;
display: table;
clear: both;
padding: 0px;
width: 150px;
}
.username {
padding-top: 15px
display: block;
text-align: center;
margin: 0px;
width: 100%;
clear: both;
}
.hidden {
display: none !important;
}
.password {
padding-top: 15px;
display: block;
text-align: center;
margin: 0px;
width: 100%;
}
#loginbtn {
padding: 15px 39px ;
background-color:#404241;
display: table;
text-align: center;
margin: 0px;
width: 150px;
cursor: pointer;
display: block !important;
}
#logintab {
border: 5px solid #4daf7c;
background-color: #4daf7c;
padding: 15px 20px;
float: left;
cursor: pointer;
margin: 0px;
}
#signuptab {
border: 5px solid #e9c85d;
background-color: #e9c85d;
padding: 15px 14px;
float: left;
cursor: pointer;
margin: 0px;
display: inline;
}
#skiptab {
border: 5px solid #404241;
background-color: #404241;
padding: 15px 12px 15px 12px;
float: left;
cursor: pointer;
margin: 0px;
color: red;
}
#signupbtn {
padding: 5px 39px ;
background-color:#404241;
display: table;
text-align: center;
width: 150px;
cursor: pointer;
display: block !important;
color: red;
}
#signupform p, #loginform p {
display: inline;
color: red;
}
HTML:
<div id="loginsignupform">
<div class="tabs">
<div id="logintab"> login </div>
<div id="signuptab"> sign up </div>
<div id="skiptab"> skip </div>
</div>
<div>
<div id="loginform">
<div class="username">
<input type="text" placeholder="username" name="username"/>
</div>
<div class="password">
<input type="password" placeholder="password" name="password"/><Br/>
<p> invalid username or password! </p>
</div>
<p id="loginbtn"> login </p>
</div>
<div id="signupform" >
<input type="text" placeholder="full name" name="name" /><br>
<p> full name is required </p><br>
<input type="username" placeholder="username" name="username" /><br>
<input type="text" placeholder="e-mail"/><br>
<input type="password" placeholder="password" name="password" /><br>
<input type="password" placeholder="re-enter password" name="password1" /><br>
</div>
<div id="signupbtn">
<p > sign up </p>
</div>
</div>
</div>
</body>
Can you try it?
Instead of float:left, Use display:inline; and fot testing do align center. And, resize it. Its working fine for me.
HTML
<div id="loginsignupform" align="center">
to
<div id="loginsignupform">
CSS
#signuptab {
float: left;
}
to
#signuptab {
display: inline;
}
You have not provided corresponding padding for tabs
Check this updated fiddle : http://jsfiddle.net/ruavcstx/2/
Check out the CSS changes. Hope it helps