I have this code below which is a simple html form. What i'm trying to do is make all of the inputs have max widths inside the form-panel and look something like the image below.
I tried setting max-width for all the inputs inside the panel but it doesn't seem to be working. Any help would be greatly appreciated.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
<body>
<div class="form-panel">
<div class="form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>
You can use flex-box instead of table.
As you use display: table - the column will have the same width (there is no colspan option)
Use display: flex for each columns and set flex-grow: 1 so that all elements will grow up and fill the parent.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
flex-grow: 1;
}
.form-row {
flex-direction: row;
display: flex;
}
.form-panel {
background-color: #b7bcbe;
}
<body>
<div class="form-panel">
<div class="form-row form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-row form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-row form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>
You have written common css for all input elements..write separate css for that particular input field and put important.
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
<body>
<div class="form-panel">
<div class="form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" style="width: 100%;max-width: 86%;" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
</body>
just add this line:
.form-email input {width: calc(100% - 20px);}
^--------[margin-left + margin-right]
input[type="text"],
input[type="email"],
input[type="password"] {
padding: 4px 20px;
height: 35px;
border: 1px solid black;
margin: 10px;
border-radius: 3px;
max-width: 100%;
}
.form-panel {
display: table;
background-color: #b7bcbe;
}
.form-email input {width: calc(100% - 20px);}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-panel">
<div class="form-name">
<input type="text" name="fname" placeholder="First Name">
<input type="text" name="lname" placeholder="Last Name">
<br>
</div>
<div class="form-email">
<input type="email" name="email" placeholder="Email Address">
<br>
</div>
<div class="form-password">
<input type="password" name="password" placeholder="Password">
<input type="password" name="cpassword" placeholder="Comfirm Password">
</div>
</div>
<input type="submit" class="btn btn-default submit-button" value="Sign up!">
Related
I am gathering customer data from a web app - however once data is input the data displays in the URL search bar and I am just wondering about how to prevent that from happening?
here is my current code:
<form>
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php", method="POST">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address" placeholder="1234 Example Street, Richmond">
<label for="city"><i class="fa fa-institution"></i> Suburb</label>
<input type="text" id="city" name="city" placeholder="Melbourne">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="Victoria">
</div>
<div class="col-50">
<label for="postcode">Post Code</label>
<input type="text" id="postcode" name="postcode" placeholder="3934">
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;">Visa</i>
<i class="fa fa-cc-amex" style="color:blue;">Amex</i>
<i class="fa fa-cc-mastercard" style="color:red;">Mastercard</i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="John More Doe">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth" placeholder="September">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
</label>
<input type="submit" value="Continue to checkout" class="btn">
</form>
</div>
</div>
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 0 -16px;
}
.col-25 {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
.col-50 {
-ms-flex: 50%; /* IE10 */
flex: 50%;
}
.col-75 {
-ms-flex: 75%; /* IE10 */
flex: 75%;
}
.col-25,
.col-50,
.col-75 {
padding: 0 16px;
}
.container {
background-color: #f2f2f2;
padding: 5px 20px 15px 20px;
border: 1px solid lightgrey;
border-radius: 3px;
}
input[type=text] {
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-bottom: 10px;
display: block;
}
.icon-container {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.btn {
background-color: #04AA6D;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.btn:hover {
background-color: #45a049;
}
span.price {
float: right;
color: grey;
}
/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other (and change the direction - make the "cart" column go on top) */
#media (max-width: 800px) {
.row {
flex-direction: column-reverse;
}
.col-25 {
margin-bottom: 20px;
}
}
Any help would be really appreciated :)
You have an unnecessary <form> tag on the first line of your HTML and you are missing a closing </div> tag at the end. Changing this seems to resolve the issue:
<div class="row">
<div class="col-75">
<div class="container">
<form action="/action_page.php" , method="POST">
<div class="row">
<div class="col-50">
<h3>Billing Address</h3>
<label for="fname"><i class="fa fa-user"></i> Full Name</label>
<input type="text" id="fname" name="firstname" placeholder="John M. Doe">
<label for="email"><i class="fa fa-envelope"></i> Email</label>
<input type="text" id="email" name="email" placeholder="john#example.com">
<label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
<input type="text" id="adr" name="address" placeholder="1234 Example Street, Richmond">
<label for="city"><i class="fa fa-institution"></i> Suburb</label>
<input type="text" id="city" name="city" placeholder="Melbourne">
<div class="row">
<div class="col-50">
<label for="state">State</label>
<input type="text" id="state" name="state" placeholder="Victoria">
</div>
<div class="col-50">
<label for="postcode">Post Code</label>
<input type="text" id="postcode" name="postcode" placeholder="3934">
</div>
</div>
</div>
<div class="col-50">
<h3>Payment</h3>
<label for="fname">Accepted Cards</label>
<div class="icon-container">
<i class="fa fa-cc-visa" style="color:navy;">Visa</i>
<i class="fa fa-cc-amex" style="color:blue;">Amex</i>
<i class="fa fa-cc-mastercard" style="color:red;">Mastercard</i>
</div>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" placeholder="John More Doe">
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
<label for="expmonth">Exp Month</label>
<input type="text" id="expmonth" name="expmonth" placeholder="September">
<div class="row">
<div class="col-50">
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" placeholder="2018">
</div>
<div class="col-50">
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" placeholder="352">
</div>
</div>
</div>
</div>
<label>
<input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
</label>
<input type="submit" value="Continue to checkout" class="btn">
</form>
</div>
</div>
</div>
(Note: my editor may have formatted your code differently to the original question)
I have a problem, I used bootstrap to make a website and used its input and button classes, of course as I can see that's not the problem in bootstrap. I don't know how to center placeholder/input text and button text vertically. I read about line-height but it didn't help me.
BUTTONS:
<a
href="#"
class="button-early-access btn bg-dark"
>Early access</a
>
INPUTS:
<form>
<div class="form-group">
<input
type="text"
class="form-control p-20 col-md-12"
id="firstLastName"
aria-describedby="firstLastNameFan"
placeholder="First and last name"
/>
</div>
<div class="form-group">
<input
type="email"
class="form-control col-md-12"
id="exampleInputEmail1"
aria-describedby="emailHelpFan"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control"
id="teamFan"
placeholder="What is your favorite sports team?"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control"
id="topAthlete"
placeholder="Name one athlete you would like to meet?"
/>
</div>
<button type="submit" class="btn button-early-access">
Submit
</button>
</form>
.button-early-access {
background: linear-gradient(266.81deg, #009ebe -3.26%, #049c69 92.97%);
border-radius: 27px;
font-weight: bold;
color: white;
padding: 11px 35px;
}
.form-group input {
text-indent: 20px;
width: 100%;
/* min-width: 726px; */
font-size: 2em;
}
Try a different font besides Khula. That font has a lot of space for descenders, which is likely what you are seeing.
If you still want to use that font you have to correct the vertical inequality with padding.
.button-early-access {
background: linear-gradient(266.81deg, #009ebe -3.26%, #049c69 92.97%);
border-radius: 27px;
font-weight: bold;
color: white;
padding: 11px 35px 7px;
font-family: 'Khula', sans-serif;
}
.form-group input {
font-family: 'Khula', sans-serif;
text-indent: 20px;
width: 100%;
font-size: 2em;
padding-top: 8px;
}
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Khula:wght#300;700&display=swap" rel="stylesheet">
<form>
<div class="form-group">
<input
type="text"
class="form-control p-20 col-md-12"
id="firstLastName"
aria-describedby="firstLastNameFan"
placeholder="First and last name"
/>
</div>
<div class="form-group">
<input
type="email"
class="form-control col-md-12"
id="exampleInputEmail1"
aria-describedby="emailHelpFan"
placeholder="Enter email"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control"
id="teamFan"
placeholder="What is your favorite sports team?"
/>
</div>
<div class="form-group">
<input
type="text"
class="form-control"
id="topAthlete"
placeholder="Name one athlete you would like to meet?"
/>
</div>
<button type="submit" class="btn button-early-access">
Submit
</button>
<a
href="#"
class="button-early-access btn bg-dark"
>Early access</a
>
</form>
<form action="add.jsp" method="post">
<div class="form-group">
<label>Order ID</label>
<input type="text" name="Order_ID" class="form-control">
<label>Order Date</label>
<input type="text" name="Order_Date" class="form-control">
<label>Customer Name</label>
<input type="text" name="Customer_Name" class="form-control">
<label>Customer Number</label>
<input type="text" name="Customer_ID" class="form-control">
<label>Order Amount</label>
<input type="text" name="Order_Amount" class="form-control">
<label>Notes</label>
<input type="text" name="Notes" class="form-control">
</div>
</form>
I have this type of box design for input
But I want this type of input area(Underlined)
You can try:
input {
border: none;
border-bottom: 1px solid #ccc;
}
You can easily do this with border-bottom property. But before that, you'll need to reset the default border first using border: none;
Follow this -
input
input {
border: none;
border-bottom: 1px solid #ccc;
}
Order: <input type="text" name="Order_ID" class="form-control">
Added css code in <input> changed border with border-bottom
So will like this, example:
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
Then output will like this
input.form-control {
border: 0;
outline: 0;
background: transparent;
border-bottom: 1px solid black;
}
.form-group {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 10px;
white-space: nowrap;
}
<form action="add.jsp" method="post">
<div class="form-group">
<label>Order ID</label>
<input type="text" name="Order_ID" class="form-control">
<label>Order Date</label>
<input type="text" name="Order_Date" class="form-control">
<label>Customer Name</label>
<input type="text" name="Customer_Name" class="form-control">
<label>Customer Number</label>
<input type="text" name="Customer_ID" class="form-control">
<label>Order Amount</label>
<input type="text" name="Order_Amount" class="form-control">
<label>Notes</label>
<input type="text" name="Notes" class="form-control">
</div>
</form>
for your oritantion to have the input at the right of the label you can use css-grid. will look the cleanest. For only havin a bottom broder, remoev all border of the input with border: none; and add a border at the bottom with border-bottom. Note that border-bottom has to come after border as otherwise all border will be removed.
.form-group {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 10px;
white-space: nowrap;
}
.form-group input {
border: none;
border-bottom: 1px solid grey;
}
<form action="add.jsp" method="post">
<div class="form-group">
<label>Order ID</label>
<input type="text" name="Order_ID" class="form-control">
<label>Order Date</label>
<input type="text" name="Order_Date" class="form-control">
<label>Customer Name</label>
<input type="text" name="Customer_Name" class="form-control">
<label>Customer Number</label>
<input type="text" name="Customer_ID" class="form-control">
<label>Order Amount</label>
<input type="text" name="Order_Amount" class="form-control">
<label>Notes</label>
<input type="text" name="Notes" class="form-control">
</div>
</form>
Here is one way, just need to add CSS and adjust borders.
Run the snippet to see.
.form-group {
display: grid;
grid-template-columns: min-content auto;
grid-gap: 15px;
}
label {
font-size: 18px;
color: #333;
height: 20px;
width: 150px;
text-align: left;
}
input {
margin: 8px 0;
height: 20px;
box-sizing: border-box;
border: none;
border-bottom: 2px solid blue;
}
<form action="add.jsp" method="post">
<div class="form-group">
<label>Order ID</label>
<input type="text" name="Order_ID" class="form-control">
</div>
<div class="form-group">
<label>Order Date</label>
<input type="text" name="Order_Date" class="form-control">
</div>
<div class="form-group">
<label>Customer Name</label>
<input type="text" name="Customer_Name" class="form-control">
</div>
<div class="form-group">
<label>Customer Number</label>
<input type="text" name="Customer_ID" class="form-control">
</div>
<div class="form-group">
<label>Order Amount</label>
<input type="text" name="Order_Amount" class="form-control">
</div>
<div class="form-group">
<label>Notes</label>
<input type="text" name="Notes" class="form-control">
</div>
</form>
I have nested div tags. I want to change their z-index value and make blur which is on back position. But it's not working. I think, in my codes only back div is blurred but my inputs are blurred as well which are located in front div. Thank you for your helps.
.div_front{
background-color: antiquewhite;
}
.div_back
{ border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
filter: blur(2px);
z-index: -1;
}
<div class="div_back">
<div class="div_front">
<form>
<label for="username"></label>
<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
<label for="password"></label>
<input type="text" id="password" name="password" style="text-align:center" placeholder="password">
<input type="submit" value="Sign In">
<div style="display:flex; padding:0px;">
<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
<input type="submit_signup" value="Sign Up">
</div>
</form>
</div>
</div>
you can achieve this by putting div_back in absolute position in new .container
check the edit in the HTML
.div_front{
background-color: antiquewhite;
}
.div_back
{ border-radius: 5px;
background-color: #f2f2f2;
filter: blur(2px);
z-index: -1;
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
width:100%;
height:100%;
}
.container{
position:relative;
padding: 20px;
}
<div class='container'>
<div class="div_back">
</div>
<div class="div_front">
<form>
<label for="username"></label>
<input type="text" id="username" name="username" style="text-align:center" placeholder="username">
<label for="password"></label>
<input type="text" id="password" name="password" style="text-align:center" placeholder="password">
<input type="submit" value="Sign In">
<div style="display:flex; padding:0px;">
<input type="submit_reset" value="Forgot password?" style="margin-right:5px;">
<input type="submit_signup" value="Sign Up">
</div>
</form>
</div>
</div>
From Pure CSS I want to combine aligned forms:
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form pure-form-aligned">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
</div>
</fieldset>
</form>
with grouped inputs:
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form">
<fieldset class="pure-group">
<input type="text" placeholder="Username">
<input type="text" placeholder="Password">
<input type="email" placeholder="Email">
</fieldset>
</form>
so that the inputs are stacked while still allowing horizontally aligned labels to be placed to the left. How can I achieve this effect?
I came to a solution by applying the grouped input styling to a modified aligned form layout:
.pure-form-aligned .pure-group .pure-control-group {
margin: 0;
}
.pure-form.pure-form-aligned .pure-group .pure-control-group input {
display: inline-block;
position: relative;
margin: 0 0 -1px;
border-radius: 0;
top: -1px;
}
.pure-form-aligned .pure-group .pure-control-group:first-child input {
top: 1px;
border-radius: 4px 4px 0 0;
margin: 0;
}
.pure-form-aligned .pure-group .pure-control-group:last-child input {
top: -2px;
border-radius: 0 0 4px 4px;
margin: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form pure-form-aligned">
<fieldset class="pure-group">
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email</label>
<input id="email" type="email" placeholder="Email">
</div>
</fieldset>
</form>
You can wrap the <label>s in a div and place that div on the left side of the <fieldset>. Like this :-
div.labels{
display : inline-block;
height : 100px;
}
div.labels div{
display : flex;
align-items : center;
justify-content : right;
height : 33.33%;
}
fieldset.pure-group{
height : 100px;
display : inline-block;
}
fieldset.pure-group input{
height : 33.33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/pure/0.6.0/forms-min.css" rel="stylesheet" />
<form class="pure-form">
<div class="labels">
<div>
<label>Name</label>
</div>
<div>
<label>Password</label>
</div>
<div>
<label>Email</label>
</div>
</div>
<fieldset class="pure-group">
<input type="text" id="name" placeholder="Username">
<input type="text" placeholder="Password">
<input type="email" placeholder="Email">
</fieldset>
</form>