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>
Related
I have made a form using HTML, this is the code:
<html>
<head>
<style>
.your-class input{
float:left;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label><b>aspect ratio:</b></label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label><b>value3:</b></label>
<input type="number" name="no3" min="0.25" step="any" placeholder="value3" required><br>
<input type="hidden" name="calculator_ok" value="ok">
<input type="submit" name="submit" value="add" style="background-color: BurlyWood"><br>
</form>
</body>
</html>
I want the symbol (/) to be between the two small boxes not after them, see the picture:
How should I edit the code to get that result?
The problem happens because of the "float: right" CSS rule; it is floating all the <inputs> to the left, and leaving everything else untouched.
A few options to make it work:
The float could be removed;
The slash could be placed inside a container and the CSS rule adjusted to apply to that container, too.
Well, you would have to turn all children into left floats...
<style>
form > div, form > label, form > input, form > b {
float:left;
}
</style>
However, floats are rather “out of fashion“ (in favor of i.e. flexbox).
Although in this case, a far simpler inline-block will do, to line up the inputs and the inside b-Tag.
(and you can avoid the <b>'s inside the labels by styling the labels)
<html>
<head>
<style>
label {
display: block;
font-weight: bold;
}
form > input, form > b {
display: inline-block;
}
</style>
</head>
<body>
<form action="" method="post">
<div class="your-class">
<label>aspect ratio:</label>
<input type="number" name="no1" min="0.25" style="width: 4em" step="any" placeholder="value1" required>
<b>/</b>
<input type="number" name="no2" min="0.25" style="width: 4em" step="any" placeholder="value2" required><br><br>
</div>
<label>value3:</label>
...
</form>
</body>
</html>
Use html entity of / which is / instead
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.
i have basic html form with css elements and i can't figure out why CSS code is not applied and does nothing. There is my code:
<!doctype html>
<html>
<head>
<title> A basic form </title>
<style type ="text/css">
.form-field{
clear: both;
padding: 10px;
width: 350px;
}
.form-field label{
float: left;
width: 450px;
text-align: right;
font-size: xx-small;
}
.form-field input{
float: right;
width: 150px;
text-align: ;
}
#submit{
font-size: larger;
text-align: center;
}
</style>
</head>
<body>
<h1> A basic form </h1>
<hr>
<form action="#">
<fieldset >
<legend>Form Information </legend>
<div>
<label for="username"> Name :</label>
<input type="text" id="username" name="username">
</div>
<div>
<label form="email"> E-mail address:</label>
<input type="text" id="username" name="email">
</div>
<div>
<input id="submit" type="submit" name="submit"
value="Send Form">
</div>
<div>
<input type="reset" name="reset" value="Clear Form">
</div>
</fieldset>
</form>
</body>
</html>
In fact, it does make changes for my submit button, but form itself is still have base (left) alignment. What did i miss?
Any help would be appreciated, thanks!
I have edited your html.
Please take a look this fiddle
I have just added
<fieldset class="form-field">
Your style is for class "form-field" but it is not mentioned anywhere in the html code.
Edit your form tag to -
<form action="#" class="form-field">
Then you will be able to see the change.
This will do it for you. Fiddle here
fieldset {text-align:right;}
Make the form like this:
<form class="form" action="#">
Add this css:-
.form{
text-align: right;
}
The CSS code is not applied because the HTML element with the class "form-field" that you try to style doesn't exists. You need to apply the class to a parent element in order to be able to style the label and input.
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;
}
Hi I would like the form width to be 100%. I would like the text box to extend almost the entire width of the page, and have the small "GO" button directly to the right of the text box, all on the same line (or block).
Right now my text box is only about the width of the text within it ("Enter an address here") Thank you!
CSS
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}
HTML
<div id="search1">
<form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get" onsubmit="codeAddress(); return false">
<input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
<input type="button" value="GO" onclick="codeAddress()"/>
</form>
</div>
By default the form with is 100% if you do not change it. If you want the input field to be longer you can use the size attribute.
<input id="address" size="90" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
FIDDLE
Or you can achieve it through CSS by adding this:
#address{
width:80%;
}
css:
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:100%;
}
#search1 button {width:10%;}
#search1 input#address {width:85%;margin-left:5%;}
HTML
<div id="search1">
<form style="margin: 0px; padding: 0px;" name="search_form" action="view" method="get" onsubmit="codeAddress(); return false">
<input id="address" style="color:#333" value="Enter an address here" onfocus="if(this.value==this.defaultValue) this.value='';"/>
<button type="button" onclick="codeAddress()"> GO </button>
</form>
</div>
You could also do this with a bit of Jquery
CSS:
#search1{
height: 25px;
padding:5px;
padding-left:11px;
display:inline-block;
background-color:#62564A;
width:99%;
}
input {
display: inline-block;
}
Jquery:
$(document).ready(function () {
var $ww = $(window).width();
var $input = $('input#address');
$input.width($ww - 90);
$(window).resize(function() {
$input.width($(window).width() - 90);
});
});
I have kept the HTML the same.
include the Jquery library in your <head> tag with <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You may need to tweek the - 90 to a lower or higher value depending on where you place the form.
Here is a link to the working example.