I'm looking get this code:
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
To look like this
minus the colors, checkbox, value, etc. Essentially I want it to look just like a legend tag does in a field set but without either tags and the label inside the border of the text input. Thanks in advance!
Here is what you need. You can change the CSS values according to your need. Also important is to set the background-color of label to the same color as your form/html.
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
position:absolute;
top:-1px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
Hope this helps :).
You can use legend tag.
<!DOCTYPE html>
<html>
<body>
<form>
<fieldset>
<legend>Contact</legend>
Name <input type="text"><br>
Email <input type="text"><br>
</fieldset>
</form>
</body>
</html>
When I look at the answers here, all of them are answered to save the moment, that is, when the background picture changes, the examples made explode, there is no such problem in my example, you can use it as you wish
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<style>
.textOnInput {
position: relative;
}
.textOnInput label {
position: absolute;
top: -15px;
left: 23px;
padding: 2px;
z-index: 1;
}
.textOnInput label:after {
content: " ";
background-color: #fff;
width: 100%;
height: 13px;
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
}
label {
font-size: 16px;
font-weight: 500;
display: inline-block;
margin-bottom: .5rem;
}
.form-control {
box-shadow: none !important;
}
</style>
</head>
<body>
<div class="col-md-4 mt-5">
<div class="textOnInput">
<label for="inputText">Email</label>
<input class="form-control" type="text">
</div>
</div>
</body>
</html>
you should add position relative if you want more than one box and add some padding:
.form-group{
padding:10px;
border:2px solid;
margin:10px;
}
.form-group>label{
padding-left: 5px;
padding-right: 5px;
position:relative;
top:-20px;
left:20px;
background-color:white;
}
.form-group>input{
border:none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form id="first_name">
<div class="form-group">
<label>First name</label>
<input type="text" class="form-control input-lg" />
</div>
<div class="form-group">
<label>Second name</label>
<input type="text" class="form-control input-lg" />
</div>
</form>
you can create an input and wrap it inside a fieldset:
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
and some basic css to remove the input border:
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
input {
border:none;
width:100%;
}
input:focus, textarea:focus, select:focus{
outline: none;
}
<fieldset>
<legend>text creator</legend>
<input type="text"
id="text creator"
class="form-control"
name="object-creator"/>
</fieldset>
<fieldset class="border col-12 pt-0 pb-1 mx-auto ">
<legend class="w-auto mb-0">First Name</legend>
<input type="text" id="fname" name="fname" class="border-0 p-0 mx-auto pl-1" placeholder="abc#gmail.com">
</fieldset>
if you are using bootstrap4 play with class and easily solved it its worked for me you can adjust your class like p-1,ml-2.... etc
This can be achieved using pure html. It happens automatically when you nest legend tags in fieldsets
<fieldset>
<legend>Here is the legend<legend>
</fieldset>
Related
I saw this pretty from from website.
I decided to make it using bootstrap 4, and I failed because of the space between two html input elements. It is neither padding nor margin, I have no idea what is it. I tried to remove the space several times but failed.
The space between two inputs giving me suffer.
This is HTML
<form action="" method="post">
<div class="form__wrapper">
<input type="email" name="email" class="newsletter" placeholder="Email address"/>
<input type="submit" class="newsletter__button"/>
</div>
</form>
This is CSS
.form__wrapper {
display: inline-block;
position: relative;
}
form {
display: block;
}
form input[type='email'], form input[type='text'] {
cursor: text;
-webkit-font-smoothing: antialiased;
width: 100%;
padding: 9px;
border: 1px solid #E1E0E1;
outline: none;
-webkit-border-radius: 0;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
}
.form__wrapper input[type='email'] {
width: 60%;
}
This gap origins from the space between two inline elements in the source code. that is parsed as a blank space.
However, you don't have to deal with this issue - for this case exactly, Bootstrap provides Input Groups. Just use the input-group class as a wrapper for the two form elements and the input-group-added as a wrapper for the button.
You can style the form elements by using a higher specificity in your selectors. The Icon can also be achieved by FontAwesome (see Nisarg Shahs good answer for that). Here is an example:
body {
padding: 2em;
}
.input-group>.form-control,
.input-group .btn {
border-radius: 0;
border-color: #e3e3e3;
text-transform: uppercase;
font-size: .8em;
line-height: 1.95em;
letter-spacing: 2px;
}
.input-group>.form-control {
border-right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
<input type="email" class="form-control" placeholder="Email Address" aria-label="Email Address" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">></button>
</div>
</div>
It is called an add-on in Bootstrap 4. Here's an example:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">Submit</button>
</div>
</div>
You can combine that with FontAwesome, to get the desired result:
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="input-group mb-3">
<input type="email" name="email" placeholder="Email address" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
<div class="input-group-append">
<button class="btn btn-outline-secondary">
<span class="fa fa-angle-right"></span>
</button>
</div>
</div>
Write both of your input tags in the same line. Here I've included the fiddle. You can see the difference. :)
<input type="email" name="email" class="newsletter" placeholder="Email address"/><input type="submit" class="newsletter__button"/>
Bootstrap has this built in:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input class="form-control newsletter" placeholder="Email" type="text">
<div class="input-group-append">
<input class="form-control"t type="submit" class="newsletter__button"/>
</div>
</div>
so I am working to create this really simple website, but the problem of that I put for example to elements in one and I cant make them fit their places for example:
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 50%;
white-space: nowrap;
padding: 0;
}
.Member {
width: 40%;
}
.Not_member {
width: 50%;
text-align: center;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
what i want to do is:
make each one fit half the container vertically and horizontally
make them stay horizontal and shrink with the container, so what i mean that when the window becomes smaller they become vertical, how can I stop that?
thanks in advance
.Form {
border: 2px solid black;
background-color: white;
margin: 1px;
float: left;
width: 100%;
white-space: nowrap;
padding: 0;
}
form{
width:55%;
}
.Member{
width:40%;
}
.Not_member {
width: 45%;
text-align: center;
padding:0;
margin:0;
}
fieldset {
margin: 0;
float: left;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="Form">
<form action="/action_page.php" method="post">
<fieldset class="Member">
<legend>Sign In</legend>
Sign in today for more experience <br><br>
<b>Email:</b> <br>
<input type="text" name="email" placeholder="Enter Email">
<br><br>
<b>Password:</b> <br>
<input type="password" name="password" placeholder="Password">
<br><br>
<input type="checkbox" name="remember" value="yes">remember me
<input type="submit" value="Log in">
</fieldset>
</form>
<fieldset class="Not_member">
<legend>Not a member ?</legend>
You can create an account:<br>
<i class="fa fa-sign-in" style="font-size:500%;color: grey;"></i>
</fieldset>
</div>
I am trying to make an image on the side remain the same height as the calculator.
Where should either the css or html go within the structure? I would like to keep the aspect ratio as close to possible
Code: http://jsbin.com/gijitaluta/edit?html,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<aside class="imageContainer">
<img src="">
</aside>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</div>
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
This way uses a table. Doesn't require many changes. You'll need a version of the image with the gray edges removed and you'll have to play with padding and/or margins.
http://jsbin.com/xepiren/edit?html,css,output
td {
background-color:#fff;
}
form {
padding: 5%;
/*width: 50%;*/
font-family: 'Open Sans'
}
#theForm {
background-color: white;
}
legend {
color: red;
font-size: 1.3em;
}
#maincontainer {
margin: 5%;
}
fieldset {
}
img {
/*width:30%;*/
float: right;
height: 430px
}
body {
background-color: grey;
}
fieldset {
padding: 10%;
}
#calculatorcontainer {
margin: 10%;
border-style: solid;
border-style: groove;
}
h4 {
margin: 0px;
}
footer {
padding: 10px;
border-style: solid;
border-style: groove;
}
footer h3 {
color:red;
font-size:80%
}
input {
width: 90%
}
#submit {
margin:10px
}
#media (max-width: 479px) {
img {
width:30%;
float: right;
height: 230px
}
fieldset {
padding: 0%;
}
form {
font-size: 7px;
}
footer {
padding: 7px;
}
footer h3 {
color:red;
font-size:10%
}
}
#media (min-width: 1000px) {
img {
width:30%;
float: right;
height: 480px
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Calculator</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"></head>
<body>
<div id="calculatorcontainer">
<div id="maincontainer">
<table>
<tr>
<td>
<form action="" method="post" id="theForm">
<fieldset >
<legend>Calculator</legend>
<h4>Use this form to calculate the order total</h4>
<div class="form-group">
<label for="quantity">Quantity</label>
<input class="form-control" id="quantity" type="number" value="1"/>
</div>
<div class="form-group">
<label for="ppu">Price Per Unit</label>
<input type="text" class="form-control" id="ppu" placeholder="1.00" required>
</div>
<div class="form-group">
<label for="tax">Tax Rate (%)</label>
<input type="text" class="form-control" id="tax" placeholder="0.0" required>
</div>
<div class="form-group">
<label for="discount">Discount (%)</label>
<input type="text" class="form-control" id="discount" placeholder="0.00" required>
</div>
<div class="form-group">
<label for="ttl">Total</label>
<input type="text" class="form-control" id="output" placeholder="0.00">
</div>
<div>
<button type="submit" class="btn btn-calculate" id="submit">Calculate</button>
</div>
</fieldset>
</form>
</td>
<td>
<aside class="imageContainer">
<img src="https://image.ibb.co/iUhiUv/Screen_Shot_2017_08_03_at_12_12_16_PM.png">
</aside>
</td>
</tr>
</table>
</div><!-- End "maincontainer" -->
<footer class="footer">
<h3>Copyright CSUN</h3>
</footer>
</div>
</body>
</html>
Basically I want to create a form which will have all the text in one "column" and all the input fields in another, so it looks decent. It almost works, the problem is that when I make a new line, the line continues from the width of the previous one. I will post the source code below:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.asd {
width: 100px;
height: 50px;
float:left;
}
.op {
float:left
}
</style>
</head>
<body>
<form action="demo_form.asp" autocomplete="on">
<div class="asd">First name:</div><input type="text" name="fname" class="op"><br />
<div class="asd">Last name:</div> <input type="text" name="lname" class="op"><br />
E-mail: <input type="email" name="email" autocomplete="off"><br />
<input type="submit">
</form>
</body>
</html>
You need to add an element with the style clear: both after each line. That will reset the floating position so the next elements will be positioned all the way to the left.
Instead of float: left; in your CSS, try using display: inline-block; on both of your classes.
Also, wrap the email label in the div tag, like you did for first/last name.
I think you don't need any height there. Just put whole line in div and float the elements inside..
My DEMO: http://jsfiddle.net/goodfriend/pt4Ua/20/
HTML:
<form action="demo_form.asp" autocomplete="on">
<div class="line"><span class="asd">First name:</span><input type="text" name="fname" /></div>
<div class="line"><span class="asd">Last name:</span> <input type="text" name="lname" /></div>
<div class="line"><span class="asd">E-mail:</span> <input type="email" name="email" autocomplete="off" /></div>
<div class="line"><input type="submit" /></div>
</form>
CSS:
.asd {
width: 100px;
float:left;
}
.line {
margin:7px;
display:block;
}
Hope this helps a bit.
1) Clean up the html by using form html elements
2) Simplify the css
3) Enjoy
JSFiddle: http://jsfiddle.net/Bushwazi/XHtUL/
HTML:
<form action="demo_form.asp" autocomplete="on">
<fieldset>
<label for="fname">First name:</label>
<input type="text" name="fname" class="op">
</fieldset>
<fieldset>
<label for="lname">Last name:</label>
<input type="text" name="lname">
</fieldset>
<fieldset>
<label for="email">E-mail:</label>
<input type="email" name="email" autocomplete="off">
</fieldset>
<input type="submit">
</form>
CSS:
form {
width:100%;
}
fieldset {
width:100%;
display:block;
padding:0.5em 0;
border:none;
}
label {
display:inline-block;
width:40%;
padding:0 5%;
}
input[type=text],
input[type=email] {
height:100%;
width:45%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input[type=submit] {
float:right;
margin:0 5% 0 0;
}
i'm not very familiar with CSS, i'm trying to apply a border on my login form, here is the code i use:
login.html:
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<div id="login_container">
<form action="#" method="POST">
<div class="row">
<label for="username" class="label">Username</label>
<input type="text" class="field" name="username" />
</div>
<div class="row">
<label for="password" class="label">Password</label>
<input type="password" class="field" name="password" />
</div>
</form>
</div>
css/style.css:
#login_container {
margin-top:50px;
margin-left: auto;
margin-right: auto;
width: 300px;
border:1px solid black;
display:block;
}
.field {
float:right;
margin-left: 10px;
}
label {
float:left;
}
.row{
display:block;
clear:both;
}
and the output:
Why does the border cross the password text field?
EDIT:
with
form{
border:1px solid black;
}
the output is:
Add overflow:auto; to your #login_container div.
jsFiddle example
Because the inner elements are floated, you need to specify the overflow property to bring the border back around them.