First time using bootstrap and first time asking a question on stackoverflow! I am creating this mockup with forms for email, subject and message. I am also using bootstrap validator to get error messages to pop-up (like ""). but they appear all the way to the left of the window. Anyone know of a way to get the below the input box? Or even above the input box? Like if where says "Email" I would like the error message that says "Please enter a valid email" to pop up right next to it. I've included the html and css. Hopefully I did it right. Thanks!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="form-issue.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST">
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email">
</div>
<div class="form-group">
<label class="label" for="subject"> Subject </label>
<input id="subject" class="form-control" type="text" name="subject">
</div>
<div class="form-group">
<label class="label" for="message">Message</label>
<textarea id="message" class="form-control" name="message" rows="10"></textarea>
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
<script>
bootstrapValidate('#email', 'email:Please enter a valid email');
bootstrapValidate('#subject', 'required:Subject is required');
bootstrapValidate('#message', 'required:Message is required');
</script>
</body>
</html>
.contact {
color: white;
background-color: #c0c0c0;
padding-top: 2%;
padding-bottom: 4%;
width: 100%;
}
.contact h2 {
text-align: center;
}
.form-group {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin: 25px;
}
#email,
#subject,
#message {
width: 30%;
}
.label {
width: 30%;
text-align: left;
}
.button {
background-color: #000000;
color: white;
text-align: center;
width: fit-content;
min-height: inherit;
border-color: #000000;
border-width: 10px;
margin-top: 20px;
margin-bottom: 5px;
}
Please see below example for validation! And add one line style: .invalid-feedback{ width:30%; }
Please see below example for validation! And add one line style: .invalid-feedback{ width:30%; }
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://cdn.rawgit.com/PascaleBeier/bootstrap-validate/v2.2.0/dist/bootstrap-validate.js"></script>
<script type="text/javascript">
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<div class="contact">
<h2>CONTACT</h2>
<form action="" method="POST" class="needs-validation" novalidate>
<div class="form-group">
<label class="label" for="email">Email</label>
<input id="email" class="form-control" type="text" name="email" required="">
<div class="invalid-feedback"> Please enter valid email.</div>
</div>
<div class="form-group">
<input class="button" type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>
Use Bootstrap class "text-center" in class attribute of an element.
Related
this is my first topic here, I've already tried some solutions for my scenario but withou success, so I think I could use some help:
I'm working in a existing html page and I'm intern, so I need to change without modifying anything else (or at least the minimum).
So here's my problem:
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span>myText</span><br>
<input type="submit" value="Submit">
</div>
</center>
</form>
In the code above the elements are showed centered.
I want to add some text, like "myText" of span tag, when I click the button in the right side of an input element , but when I try to do this, the input element loses the "align" of others inputs (it comes left). So how can I add this "span text" but keep the input elements aligned?
I need to avoid changing the others elements css.
Im attaching an example code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button").click(function(){
$("#myText").show();
return false;
})
});
</script>
</head>
<body>
<style>
input{
width: 92%;
text-align: center;
align: left;
align-items: start;
}
.example-class{
width: 400px;
height:300px;
padding:5%;
}
.myText{
display:none;
}
</style>
<h2>Example</h2>
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
<button id="button">Show element</button>
<input type="submit" value="Submit">
</div>
</center>
</form>
</body>
</html>
So you basically want to add myText next to the value of the input?
Like in your example, it would become "Example !!!" in the input box.
In that case just use javascript. Get the current input value and append myText to it.
$(document).ready(function() {
$("#button").click(function(){
let myText = '!!!'
let currentValue = $("#example2").val();
$("#example2").val(currentValue + ' ' + myText)
return false;
})
});
// EDIT (I understand more clearly what you want after your comment)
You could play around with position: relative and position: absolute in your css.
.example-class{
position:relative; // add this
width: 400px;
height:300px;
padding:5%;
}
.myText{
display:none;
position:absolute; // add this
right: 80px; // play with this one.
}
Normally that should do the trick.
Set position absolute to your span
$(document).ready(function() {
$("#button").click(function() {
$("#myText").show();
return false;
})
});
input {
width: 92%;
text-align: center;
align: left;
align-items: start;
}
.example-class {
width: 400px;
height: 300px;
padding: 5%;
}
.myText {
display: none;
position: absolute; /*<-- the change */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<h2>Example</h2>
<form action="">
<center>
<div class="example-class">
<input type="text" id="example3" name="fname" value="John"><br>
<input type="text" id="example2" name="lname" value="Doe"><br>
<input type="text" id="example2" name="lname" value="Example"><span class="myText" id="myText">!!!</span><br>
<button id="button">Show element</button>
<input type="submit" value="Submit">
</div>
</center>
</form>
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>
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>
I have an HTML form that submits to a Coldfusion action page. For some reason, the form struct does not come through? The 2 files index.cfm and add.cfm are both in the same directory. When I submit the form the test text in the processing page shows, but not the form. I also do not see the form variables in the CF debugger.
What am I missing?
index.cfm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video Slideshow Admin</title>
<!--- <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE"> --->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
h1 {
font-size: 34px;
}
h2 {
font-size: 26px;
}
.yt-container {
padding: 2% 5%;
max-width: 1400px;
margin: 0 auto;
}
.input-short {
max-width: 200px;
}
.input-shorter {
max-width: 100px;
}
.input-med {
max-width: 500px;
}
.input-long {
max-width: 800px;
}
</style>
</head>
<body>
<div class="yt-container">
<h1>Video Slideshow Admin</h1>
<!-- form -->
<h2 class="form-title">Add Video</h2>
<p class="required">* Required</p>
<form name="vidform" action="add.cfm" method="post">
<div class="form-group">
<label for="heading">Heading</label>
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
</div>
<div class="form-group">
<label for="url">Embed URL*</label>
<input type="text" class="form-control input-long" id="url" placeholder="Embed URL" value="" required>
</div>
<div class="form-group">
<label for="status">Status</label>
<select class="form-control input-short" id="status">
<option ng-selected="formData.type == null">Select</option>
<option value="show">Show</option>
<option value="hide">Hide</option>
</select>
</div>
<div class="form-group">
<label for="order_seq">Order Sequence</label>
<input type="text" class="form-control input-shorter" id="order_seq" placeholder="Order" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
add.cfm
We are here
<cfdump var="#form#">
<cfabort>
Every form input needs a name attribute as well.
This is what Coldfusion is looking for when you post the form.
So:
<input type="text" class="form-control input-med" id="heading" placeholder="Heading" value="">
Becomes:
<input type="text" class="form-control input-med" id="heading" name="heading" placeholder="Heading" value="">
This goes the same for <select> and checkbox / radio
So I have a problem with that the "submit" box doesent show right under the "Password-input". So I wondered if you could help me. Thanks for any answers. Im not a professional programmer so keep that in mind.
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<input type="submit" id="Submit" value="Submit">
</fieldset>
</form>
</body>
</html>
Okey its very simple
<label> </label>
<input type="submit" id="Submit" value="Submit">
make an empty label for submit button
Just add 'br' tag which is nothing but new line. Here is the code
<!DOCTYPE html>
<html>
<head>
<title>HelloWorld</title>
<script type="text/javascript"
src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
1.8.1.min.js">
</script>
<style type="text/css">
.form-field{
clear:both;
padding: 10px;
width: 400px;
}
.form-field label {
float: left;
width: 150px;
text-align: right;
}
.form-field input{
float: right;
width: 150px;
text-align: left;
}
#submit{
text-align: center;
}
</style>
</head>
<body>
<form class="form-field">
<fieldset>
<legend>Log In: </legend>
<div>
<label for="username">Username:</label>
<input type="text" name="username" id="Uname">
</div>
<br>
<br>
<div>
<label for="password">Password:</label>
<input type="password" name="password" id="password">
</div>
<br>
<br>
<input type="submit" id="Submit" value="Submit">
<br>
<br>
</fieldset>
</form>
</body>
</html>
hope this helps for u!!