I followed a tutorial for a form(to make it look more professional) and I've followed each and every step carefully(I f#cked up something tho, I can't find it) and now all of my "fields" are stacked on each other. I have a php page that I make a form on and then if all the info is filled in and the user presses the "submit" button then it should send it to my and their email. It worked but when I started to follow this tutorial/guide the button disappeared, when I tried to find it on the page I couldn't see it/click it or anything. With some tricks I could see the outline of the button but not the actual button(there is a function in opera and I think many other browsers that while browsing through the elements on the page if you click on one of them in the source it highlights it on the page). The following is the source code, the only thing I want is the button to appear under the text fields and the text fields not to be stacked on top of each other, I'll only be including the html and not the php code for the smtp.
<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>
body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}
.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
}
.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}
.form label::after{
content: "";
position:absolute;
left:0px;
buttom:0px;
height:100%;
width:100%;
border-bottom: 3px solid #5fa8d3;
transform translateX(-100%);
}
.button{
width:400px;
height:30px;
background-color:blue;
}
.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}
.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}
.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
transform: translateY(-150%);
font-size: 14px;
color: #5fa8d3;
}
.form input:focus{
}
</style>
<body>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form class="form" action="" method="post">
<input type="text" name="email" required />
<label for="email" class="label-name">
<span class="content-name">Email</span>
</label>
<br>
<input type="text" name="first_name" required />
<label for="first_name" class="label-name">
<span class="content-name">First Name</span>
</label>
<br>
<input type="text" name="last_name">
<label for="last_name" class="label-name">
<span class="content-name">Last Name</span>
</label>
<br>
<br>
<input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
</form>
</div>
</body>
</html>
They are all stacking because you use position:absolute on <label> without proper parent reference on where they should be positioned. Try wrapping them with <div> like the example below, and add position:relative to that div
<!DOCTYPE html>
<html>
<head>
<title>Enroll</title>
<link rel="icon" href="mail.png">
</head>
<style>
body{
background-color: white;
font-family: sans-serif;
justify-content:space-around;
align-items:center;
flex-direction:column;
height:100%;;
}
.form{
overflow:hidden;
width:75%;
position:absolute;
left:10%;
transition: all 0.3 ease;
height:50px;
display: flex;
}
.form .field {
position: relative;
}
.form label{
position:absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 100%;
pointer-events: none;
border-bottom: 1px solid black;
transition: 0.3 ease;
}
.form label::after{
content: "";
position:absolute;
left:0px;
buttom:0px;
height:100%;
width:100%;
border-bottom: 3px solid #5fa8d3;
transform translateX(-100%);
}
.button{
width:400px;
height:30px;
background-color:blue;
}
.form input{
width:100%;
height:100%;
color: #595f6e;
padding-top: 20px;
border: none;
transition: 0.3s ease;
}
.content-name {
position:absolute;
bottom:5px;
left:0px;
transition: all 0.3 ease;
}
.form input:focus + .label-name .content-name,
.form input:valid + .label-name .content-name {
transform: translateY(-150%);
font-size: 14px;
color: #5fa8d3;
}
.form input:focus{
}
</style>
<body>
<div align="center">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<form class="form" action="" method="post">
<div class="field">
<input type="text" name="email" required />
<label for="email" class="label-name">
<span class="content-name">Email</span>
</label>
</div>
<br>
<div class="field">
<input type="text" name="first_name" required />
<label for="first_name" class="label-name">
<span class="content-name">First Name</span>
</label>
</div>
<br>
<div class="field">
<input type="text" name="last_name" />
<label for="last_name" class="label-name">
<span class="content-name">Last Name</span>
</label>
</div>
<br>
<br>
<input style="color:blue;" onClick="return empty()" type="submit" name="submit" value="Submit"></br>
</form>
</div>
</body>
</html>
Related
react.js
<div className='check'>
<input
type='checkbox'
className='checkbox'
id='termschkbx'
// style={{backgroundColor: "#DE1F48", color: "#30333F"}}
checked={this.state.isChecked}
// onClick={this.isClicked}
onChange= {this.isChecked}
>
</input>
<span>I agree to Terms & Conditions.<a href="" className='readme'>Read here</a> </span>
</div>
style.css
.checkbox{
top: -2px;
left:-45px;
width: 21px;
height: 21px;
opacity: 1;
display: inline-block;
margin-left:12px;
position: absolute;
}
.checkbox::after{
background: #DE1F48;
color: #30333F;
}
.checkbox:checked{
background: #DE1F48;
color: #30333F;
}
.checkbox input[type=checkbox]:checked {
background: #DE1F48;
color: #30333F;
}
nothing reflects on my checkbox after it is clicked. what can be done?
I even tried inline styling. That didn't work as well.
i did research about this, there were a lot of similar questions about this but nothing worked for me. I'm a new coder so excuseme if this is silly
Use input[type="checkbox"]:checked. This selects checkboxes that are checked.
Here's how to use it:
If the snippet is unavailable, use this JSFiddle link.
input[type=checkbox] {
height:0px;
width:0px;
}
input[type=checkbox]::after {
height:12px;
width:12px;
content:"\00a0\00a0\00a0\00a0";
border:1px solid black;
}
/* The magic below */
input[type=checkbox]:checked::after {
height:12px;
width:12px;
background-color:cyan;
content:"✓";
border:1px solid black;
}
<input type="checkbox" id="first" />
<label for="first" id="first">Here! A Checkbox!</label>
It also works for radio buttons:
input[type="radio"] {
width:0px;
height:0px;
}
input[type="radio"]::after {
content:"\00a0\00a0\00a0\00a0";
border-radius:5px;
height:10px;
width:10px;
position:absolute;
border:1px solid black;
display:inline;
}
input[type="radio"]:checked::after {
content:"✓";
background-color:#00ffff;
}
<div>
<input type="radio" name="radio" id="one" />
<label for="one">Option 1</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="two" />
<label for="two">Option 2</label>
</div>
<hr>
<div>
<input type="radio" name="radio" id="three" />
<label for="three">Option 3</label>
</div>
I am trying to make a form using HTML and CSS only. The problem is i am using valid pseudo-class to just give animation, but when it is invalid it mixes up with the label. the code will be at https://codepen.io/hardik-g1/pen/mdVzMyL and if you don't get please try this type number in name field you will see the problem.
code:
<div id="fle">
<div class="container">
<h2 id="aa">HACKATHON REGISTRATION</h2>
<form action="">
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">First Name</label>
</div>
<div class="group">
<input type="text" value="" pattern="[a-zA-z]+" required title="No numbers or special characters allowed">
<label class="set">Last Name</label></p>
</div>
<div class="group">
<input type="email" value="" required>
<label class="set">Email</label>
</div>
<div class="group">
<input type="number" value="" required pattern="[0-9].{10}" title="Enter correct mobile number">
<label class="set">Mobile number</label>
</div>
<div class="group">
<p>Branch</p>
<select name="branch" id="" required><option value=" ">Please select your branch</option><option value="cs">Computer Science</option>
<option value="it">Information Technology</option>
</select>
</div>
<div class="group"><p>Do you have participated before?</p>
Yes<input id="a" type="radio" name="hosting" value="yes">
No<input type="radio" id="a" name="hosting" value="no">
</div>
<div class="group" id="c">
<p>Project Description</p>
<textarea name="comment" placeholder="Write Here" rows="4" cols="40" required></textarea>
</div>
<input id="b" type="checkbox" id="Agree" name="agree" value="yes" required> Click here to agree to all the information above is true.
<p><button class="button" type="submit"><span>Register</span></button></p>
</form>
</div>
<div>
<video id="video" width="860" onclick="play();">
<source type="video/webm" src="https://res.cloudinary.com/iatneh/video/upload/v1594920650/Virtual_Hackathon_copy_-_Biteable_kmyhcp.mp4"/>
</video>
<h1>Click on it to play</h1>
<p>All validations show when submitted</p>
</div>
</div>
CSS
#fle{
display:flex;
}
body{
color:#999;
}
#aa{
color:black;
}
#b{
width: 12.5px;
margin:0;
}
#c{
margin:10px 0;
}
#a{
width:30px;
color:#999;
}
select{
width: 300px;
height: 30px;
}
.container {
font-family:'Roboto';
width:600px;
background:#FFF;
padding:10px 50px 50px;
}
.group {
position:relative;
margin-bottom:30px;
}
input {
font-size:18px;
padding:10px 10px 10px 5px;
width:300px;
border:none;
border-bottom:1px solid #757575;
}
input:focus{ outline:none; }
label {
color:#999;
font-size:18px;
font-weight:normal;
position:absolute;
pointer-events:none;
left:5px;
top:10px;
transition:0.2s ease all;
}
input:focus ~ label, input:valid ~ label {
top:-20px;
font-size:14px;
color:#5264AE;
}
input:invalid ~ label{
opacity:0.4;
}
.button {
border-radius: 4px;
background-color: #f4511e;
border:None;
color: #FFFFFF;
text-align: center;
font-size: 14px;
padding: 10px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
You can listen to input changes and if it has a value inside add a class to keep the label floating.
Here is a sample you can modify and use it in your code (it will keep the .floating class on label as long has the input has content in it):
function checkForInput(element) {
const $label = $(element).siblings('label');
if ($(element).val().length > 0) {
$label.addClass('floating');
} else {
$label.removeClass('floating');
}
}
$('input.input').on('change keyup', function() {
checkForInput(this);
});
label.floating {
color:#5264AE;
/* use styles for floating your labels here */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<input type="text" name="some-name" class="input" />
<label class="input-label" for="textdemo">label</label>
</div>
I am trying to make a search bar, with an anchor containing an icon. I'm trying to directly connect the two (button fixed to the right of searchbar) but there is white space not wanting to leave.
.search input [type="search"] {
margin-right: 0;
white-space: nowrap;
}
.search a {
padding: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 0;
}
.search i {
padding: 5px;
}
<div class="search">
<form action="" method="post">
<b>Search by</b>
<input type="checkbox" value="">Male</input>
<input type="checkbox" value="">Female</input>
<input type="search" placeholder="Searchtext">
<i>placeholder</i>
</form>
</div>
The duplicate does apply to your question as inputs are inline-block.
One thing to consider is that your "search" and "button" could be considered a single element. You could group them as such and then apply a float to the elements.
.searchBox {
/*Floats will be relative to this*/
position: relative;
display: inline-block;
}
.searchBox input {
/*Float the input*/
float: left;
}
.search input[type="search"] {
margin-right: 0;
white-space: nowrap;
}
.search a {
padding: 5px;
border-top-right-radius: 7px;
border-bottom-right-radius: 7px;
margin-left: 0;
/*Purely to demonstrate*/
border: solid 1px black;
}
.search i {
padding: 5px;
}
<div class="search">
<form action="" method="post">
<b>Search by</b>
<input type="checkbox" value="" />Male
<input type="checkbox" value="" />Female
<div class="searchBox">
<input type="search" placeholder="Searchtext">
<i>placeholder</i>
</div>
</form>
</div>
You also have a couple of other issues with your code:
input is self closing and shouldn't have a closing tag, note Permitted Content in the docs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
You have an unwanted space between input and [type="search"]. This would attempt to match an element with an attribute of search that is a descendant of an input element.
I have addressed these in my code.
I think below code might serve your purpose.
.blockTitle{
padding-right:1em;
font-weight:bold;
}
.search{
display:block;
width:auto;
}
.search form{
display:block;
width:100%;
margin:0;
padding:0;
}
.checkbox + label{
display:inline-block;
padding:0 0.25em;
line-height:1.4em;
}
.searchBoxContainer{
display:block;
width:80%;
position:relative;
padding:0.2em;
}
.searchBoxContainer input[type="search"]{
width:100%;
display:block;
position:relative;
z-index:0;
padding:0 2.5em 0 0;
line-height:inherit;
margin:0;
}
.searchCustomBtn{
position:absolute;
top:0.75em;
right:-2em;
z-index:1;
line-height: 1.5em;
}
<div class="search">
<form action="" method="post">
<span class="blockTitle">Search by</span>
<input type="checkbox" value="" class="checkbox" id="maleChkBx" /><label for="maleChkBx">Male</label>
<input type="checkbox" value="" class="checkbox" id="femaleChkBx" /><label for="femaleChkBx">Female</label>
<div class="searchBoxContainer">
<input type="search" id="searchBox" placeholder="Searchtext">
Search-Icon
</div>
</form>
</div>
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 trying to create a form with material design. While not focus it looks good but when the field is focused, it's position towards left.
You can check the image for more details, and you can also see the distance between two field.
Here is HTML:
form.login-form {
display:block;
position:relative;
margin: 40px auto;
}
label{
display: inline-block;
position: relative;
top:0px;
left:-184px;
color:#999;
font-family:'Helvetica', sans-serif;
font-size:16px;
z-index:1;
transition: all 0.2s ease-in;
}
input{
display:inline-block;
position: relative;
background:none;
border:none;
border-bottom: 1px solid #aaa;
font-family: 'Helvetica', sans-serif;
font-weight: lighter;
font-size: 16px;
z-index:2;
}
input:focus , input:valid{
outline:none;
border-bottom: 1px solid #830303;
position: relative;
}
input:focus + label,input:valid + label{
top:-17px;
font-size:11px;
color:#830303;
background-position: 0 0;
}
<form action="#" method="" class="login-form">
<div class="loginformgrid">
<div>
<input type="text" name="username" required autocomplete="off">
<label for="username">Username</label>
<input type="password" name="password" required autocomplete="off" >
<label for="password">Password</label>
<button class="login-button" type="submit" value="submit">Login</button>
</div>
<div class="belowloginformgrid">
<div>
<input type="checkbox" name="remeberme"> Remember me
Forgot password?
</div>
</div>
</div>
</form>
edit your css code:
label {
position: absolute;
left: 0;
}
and add id : id="password" to label.
and add this css code:
#password{
left: 182px !important;
}
JSFiddle
The issue your having is due to the label resizing on focus. As you have the transition:all on label which applies it to all the properties and as your font size is getting smaller so the label takes in less space and hence the default inline spacing of your controls shrinks. Set the width of your label to a default size to fix it so that it does not change with the transition and remains the same for it to not shrink the space in between.
label{
display: inline-block;
position: relative;
top:0px;
left:-184px;
color:#999;
font-family:'Helvetica', sans-serif;
font-size:16px;
z-index:1;
transition: all 0.2s ease-in;
width:100px; /* Add this to keep it same when transitioning*/
}
I've rearranged the label and input, and added an additional span tag.
form.login-form {
display: block;
position: relative;
margin: 40px auto;
}
label {
display: inline-block;
position: relative;
}
label span {
color: #999;
display: block;
position: absolute;
font-family: 'Helvetica', sans-serif;
font-size: 16px;
z-index: 1;
margin-top: -1.5em;
transition: all 0.2s ease-in;}
input {
display: inline-block;
position: relative;
background: none;
border: none;
border-bottom: 1px solid #aaa;
font-family: 'Helvetica', sans-serif;
font-weight: lighter;
font-size: 16px;
z-index: 2;
}
input:focus,
input:valid {
outline: none;
border-bottom: 1px solid #830303;
}
input:focus+span,
input:valid+span {
margin-top: -3.5em;
font-size: 11px;
color: #830303;
background-position: 0 0;
}
<form action="#" method="" class="login-form">
<div class="loginformgrid">
<div>
<label for="username">
<input type="text" name="username" required autocomplete="off">
<span>Username</span>
</label>
<label for="password">
<input type="password" name="password" required autocomplete="off">
<span>Password</span>
</label>
<button class="login-button" type="submit" value="submit">Login</button>
</div>
<div class="belowloginformgrid">
<div>
<input type="checkbox" name="remeberme"> Remember me
Forgot password?
</div>
</div>
</div>
</form>