I am learning html and ftl these days.
Currently, I want to create input field with icon for datepicker.
Something like this:
Hope you will share some ideas with me.
Thanks...
This one will help:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<form id="demoForm" action="success.html" method="POST">
<div class="form-group row col-6">
<label class="col-auto col-form-label">Select Date: </label>
<div class="col-md-4">
<input type="date" class="form-control" name="date" />
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
Related
I want my entered text to appear in the Bubble. How do I have to change my code to make it work?
My HTML Code is this One:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick="document.getElementById('myForm').innerHTML=document.getElementById('Chat_Bubble').value.innerHTML=document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
You don't need to both set myForm.innerHTML and Chat_Bubble.innerHTML. You can use:
document.getElementById('myForm').children[0].innerHTML = (...), or
document.getElementsByClassName('Chat_Bubble').innerHTML = (...). You need to get the element using the class name, because the div has a class, not an id.
Also, it's good practice to use textContent instead of innerHTML. This way you're sure that the element submitted is seen as text by the browser. Using innerHTML anyway can break your page. I changed this in the code below.
For example, you should try submitting <b> (nothing is drawn on the screen).
The following code works:
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<div class="Webview">
<div class="message_container" id="myForm">
<div class="Chat_Bubble"></div>
</div>
<form class="send_container">
<input id="textField" type="text">
<p>
<input type="button" id="theButton" value="Nachricht absenden!" onclick=" document.getElementsByClassName('Chat_Bubble')[0].textContent = document.getElementById('textField').value" />
</p>
<h3>
<div id="div"></div>
</h3>
</form>
</div>
Please look at the following code:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
My purpose was to create a form with 4 elements in ONE line.
I wrote this code based on this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_form_inline&stacked=h.
However, I got each one of these elements in a different line. Do you know why this code example didn't work out?
Maybe you need add these scripts and CSS:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Try this:
<html ng-app="">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="col-xs-12">
<form class="form-inline" role="form">
<div class="form-group">
<label for="first">FIRST</label>
<input class="form-control" id="first" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="second">SECOND</label>
<input class="form-control" id="second" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="third">THIRD</label>
<input class="form-control" id="third" ng-model="???" ng-readonly="true" />
</div>
<div class="form-group">
<label for="fourth">FOURTH</label>
<input class="form-control" id="fourth" ng-model="???" ng-readonly="true" />
</div>
</form>
</div>
</div>
</body>
</html>
This gives you all four in one line...
you have missed div class="col-xs-12" that means all content should
be in one row,
one row have maximum 12 col-xs that we declared.
and i have just tried for you and it is giving me the output like:
If you are testing your form on a viewport of more than 768px width, it will appear in one line. Otherwise it will not.
Test this out with the demo of inline-form on bootstraps website on this link
Excerpt from the above link!
Add .form-inline to your form (which doesn't have to be a ) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Here is a plunker link that shows that your code when viewed in bigger screens shows up in one line. Click on the full screen link in the plunker and see the result.
Check if your parent container has a width set that is less than 768px.
i think they are too large for the window , try resizing the input boxes to fit the window in one line
or
try this put all the 4 elements in one 'div' tag , i think after displaying one div tag it goes to the next line by default, so use only one div tag
I have this HTML:
<html>
<head>
<link href="bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<form method="post" enctype="multipart/form-data">
<table class="table">
<tr>
<td>Current Version</td>
<td><strong><?= $version ?></strong></td>
</tr>
<tr>
<td>Upload new version</td>
<td><input class="btn-info btn" type="file" name="package"><input type="submit" class="btn-info btn" value="Upload"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
But the submit button is rendered under the fileupload element, but I want it on the right side of it. When I disable bootstrap, it works. How can I get any info next to the file browser?
Bootstrap makes the file upload button a block which makes it take the whole space and the buttons not to align next to each other.
You could globally set the input type file to display as inline-block for them to align next to each other.
input[type=file] {
display: inline-block;
}
Or you could of course give that specific file upload button a class and declare css only for it.
Fiddle: https://jsfiddle.net/pozh7cj3/2/
Boostrap can help to get rid of table designed pages.
So, you can write your form like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<form class="form-horizontal" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-xs-4 control-label">Current Version</label>
<div class="col-xs-8">
<p class="form-control-static"><strong><?= $version ?></strong></p>
</div>
</div>
<div class="form-group">
<label for="package" class="col-xs-4 control-label">Upload new version</label>
<div class="col-xs-6">
<input class="form-control" type="file" name="package">
</div>
<div class="col-xs-2">
<input type="submit" class="btn-info btn" value="Upload">
</div>
</div>
</form>
</div>
(col-xs* classes are used to have the needed result with the small viewport of code-snippet)
below is my code
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
i have created two columns in one row
first column has label and under that input box
next column has only label and it should be aligned inline with input box, but since only label was there it used to display on top. So i wrote one dummy label. Still it is not aligned with input box.
how to do this? Is there any way to do it in bootstrap?
Add between label. There should be some content inside label to make it work. So just add html code of empty space.
<label> </label>
However a better approach will be without bootstrap columns and using custom css as follows:
.column-holder {
table-layout: fixed;
display: table;
width: 100%;
}
.column-holder .column {
vertical-align: bottom;
display: table-cell;
padding: 0 15px;
}
label {
display: block;
}
input {
display: block;
width: 100%;
}
<div class="column-holder">
<div class="column">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="column">
<label>test</label>
</div>
</div>
Without Bootstrap :
that is happens because you put every label inside same div tag again and again.
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
</div>
<div class="col-md-6">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
when you remove those two same div tags or put all labels and input tag inside a single label then all elements will gets inline automatically.
HOW TO DO :
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>name</label>
<input type="text" class="form-input-icon">
<label></label>
<label style="margin-top: 30px;">test</label>
</div>
</div>
</div>
Using Bootstrap :
Yes you can do same thing using bootstrap even that is more easy and looks more beautiful. here is a simple example for you.
copy this code and run with chrome or firefox or safari this code will work perfectly
you can visit this site:for more detail
or check this outinline form using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Example of inline form</h2>
<form class="form-inline" role="form">
<div class="form-group">
<label >Name : </label>
<input type="email" class="form-control" id="name" placeholder="Enter your name ">
</div>
<div class="form-group">
<label for="email">Email : </label>
<input type="password" class="form-control" id="email" placeholder="enter your email">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
Right now I'm working on a school project where I create a bookstore. I have created the front page and now I'm trying to use php to create the login and register system. I've created the Register page (php) and I created a CSS File to go along with it, however I can't get the two to connect properly. When I run it in localhost the css won't render. I don't see a error in my code and I don't understand why it's not working. I tried to change the css name around a bit to see if the problem was the naming however nothing else seems to work.
/* Import Google Font */
#import url('https://fonts.googleapis.com/css?family=Lora&display=swap');
.form-div {
margin: 50px auto 50px;
padding: 25px 15px 10px 15px;
border: 1px solid #80ced7;
border-radius: 5px;
font-size: 1.1em;
font-family: 'Lora', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<!--Bootstrap 4 CSS-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- Other CSS File --->
<link rel="stylesheet" href="registerandlogin.css" type="text/css">
<title>Register</title>
</head>
<body>
<p>Register Today and Join the Royal Reader Community</p>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<form action="signup.php" method="post">
<h3 class="text-center">Register</h3>
<div class="form-group">
<label for="username">Username</label>
<input type="text" name="username" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" name="email" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="password" class="form-control form-control-lg">
</div>
<div class="form-group">
<label for="passwordConf">Confirm Password</label>
<input type="password" name="passwordConf" class="form-control form-control-lg">
</div>
<div class="form-group">
<button type="submit" name="signup-btn" class="btn btn-primary btn-block btn-log">Sign Up</button>
</div>
<p class="text-center">Already a member?</p>Sign In
</form>
</div>
</div>
</div>
</body>
</html>
Any help would be greatly appreciated.
Try to add a class to your form or whatever like this:
<form class="form-div" action="signup.php" method="post">
Here you can read about css selectors: https://www.w3schools.com/html/html_css.asp
You do not have an element named .form-div, which is why your CSS does not affect anything. Try adding an element with that class name in your <form> tag.