upload file option/icon inside the HTML text box - html

I am trying to give an upload file option which will add multiple files to DB. I am able to create an upload file option separately, but I want to give that option inside the text box.
Also, it should show the uploaded file names just below the text box (for eg we can see in skype text box or WhatsApp text box).
I tried this below code.
<textarea rows="3" class="feedback-input" id="comment" cols="50">
</textarea>
I took an example of text area but I want to do it on a text box.
I tried and did a lot of R&D on it but till now couldn't able to do it.
Can anyone help me with this?
Thanks in Advance!

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container mt-3">
<div class="input-wrapper">
<input id="textbox" type="text" class="text-box" />
<input id="myInput" type="file" style="visibility:hidden" />
<label class="icon" for="textbox">
<img src="http://files.softicons.com/download/toolbar-icons/mono-general-icons-4-by-custom-icon-design/ico/upload.ico" onClick="$('#myInput').click();" />
</label>
</div>
<p class="text-here"></p>
</div>
</body>
<style>
.input-wrapper {
position: relative;
}
.icon {
position: absolute;
top: 25%;
left: 220px;
z-index: 1;
height: 5px;
margin-top: -5px;
width: 100px;
}
.icon img {
display: block;
width: 25px;
}
.text-box {
padding-left: 20px;
height: 30px;
width: 250px;
/*pointer-events: none;*/
}
</style>
</html>
I use CSS to put Icon inside the text box then used onclick event to call hidden upload input type

Related

Problem linking HTML to CSS even if link href is done, files are in the same folder

trying to start my coding journey and bumped into a problem. Got 2 pieces of text, one html and one css and I can't manage to link them together. Here they are:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css-stuff.css">
</head>
<body bgcolor = brown>
<div class = "container">
<img src="https://ih0.redbubble.net/image.427712605.8856/flat,750x,075,f-pad,750x1000,f8f8f8.jpg">
<form id="outsideBox" method = "post">
<ul style="list-style-type:none;">
<li>
<label for "email">Email: </label>
<input type = "text" id="email" name="email_adress">
</li>
<li>
<label for "password">Password</label>
<input type = "text" id="password" name="pw_input">
</li>
<li class = "button">
<button id="clickMe" type = "button"> Login</button>
</li>
</ul>
</form> </div>
</html>
and css:
body{
background-image: url(https://images.unsplash.com/photo-1518839283416-0cc546d12a97?ixlib=rb-1.2.1&w=1000&q=80);
background-repeat: round;
}
.container{
background-image: url(https://img.pngio.com/purple-background-png-png-group-romolagaraiorg-1920_1080.png);
/* form position */
position: relative;
top: 100px;
left: 600px;
/*---------------*/
width: 267px;
border-style: outset;
padding: 10px;
border-radius: 1em;
display: inline-block;
text-align: right
}
img{
width:100px;
height: 100px;
border-radius: 50%;
margin-right: 75px
}
ul{
color:white;
}
Here are the two of them, they worked on codepen but wont compile in atom.
In your htlm file, inside head try to remove the '/' on the href css path, both files are in the same file directory.
Like this:
<link rel="stylesheet" type="text/css" href="css-stuff.css"/>
You should put the dots and slash in the same sequence.
Like this :
<link rel="stylesheet" href="./css-stuff.css">

custom input file in bootstrap 4 not show button

When I use Custom input file in bootstrap 4, don't change my input and don't show browse button.
file-browser
<label class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<span class="custom-file-control"></span>
</label>
.custom-file
position: relative;
display: inline-block;
max-width: 100%;
height: 2.5rem;
cursor: pointer;
.custom-file-input
min-width: 14rem;
max-width: 100%;
margin: 0;
filter: alpha(opacity=0);
opacity: 0;
.custom-file-control
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 5;
height: 2.5rem;
padding: .5rem 1rem;
line-height: 1.5;
color: #555;
user-select: none;
background-color: #fff;
border: 1px solid #ddd;
border-radius: .25rem;
As far as i've checked - you need to insert the :before and :after pseudoelements - then it works.
.custom-file-control:before{
content: "Browse";
}
.custom-file-control:after{
content: "Add files..";
}
http://codepen.io/powaznypowazny/pen/jBqzgR
The documentation states that you should set the language of the document. For example, setting just:
<html lang="en">
was enough to get it working, unless like in #masud_moni answer, you have specified another language then use that instead of "en".
Try using the following code. Hope it is gonna fix your problem. It is given just under the code example in the Bootstrap page.
$custom-file-text: (
placeholder: (
en: "Choose file...",
es: "Seleccionar archivo..."
),
button-label: (
en: "Browse",
es: "Navegar"
)
);
Concerning the button, you can specify the language in your .css file and it will appear :
.custom-file-control:lang(fr)::before{
content:"PARCOURIR";
}
.custom-file-control:lang(en)::before{
content:"BROWSE";
}
To show custom-file-control's placeholder and its button caption in non english pages you must add to your CSS .custom-file-control:before and .custom-file-control:empty::after as in this snippet.
At this moment, there open issue to get the filename inside the custom control after selection... you can apply the onchange event workaround showed here.
/* Valid for any language */
.custom-file-control:before {
content: "Search";
}
.custom-file-control:empty::after {
content: "Choose a file...";
}
/* Specific for spanish language */
.custom-file-control:lang(es)::before {
content : "Buscar";
}
.custom-file-control:lang(es):empty::after {
content : "Seleccionar un fichero...";
}
<!DOCTYPE html>
<html lang="es-es">
<head>
<title>Test custom-file-control</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="mt-5 ml-5">
<label class="custom-file">
<input type="file" id="file" class="custom-file-input" onchange="$(this).next().after().text($(this).val().split('\\').slice(-1)[0])" required>
<span class="custom-file-control"></span>
</label>
</div>
</body>
</html>
I hit the same problem, came here for solution, did not find it, so I continued to dig for it: the right way to do it is to have a div of class custom-file and the input and label inside it, not the input inside the label.
<div class="custom-file">
<input type="file" id="Image" class="custom-file-input">
<label class="custom-file" for="Image">Select file to upload</label>
</div>

Unable to show entire web-page with only just background image

What has been done:
Have created the required Html tags as shown in the code below:
<html>
<head>
....
....
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../jquery-1.3.2.min.js"></script>
<style style="text/css">
html, body {
padding: 0;
margin: 0;
position:relative;
width: auto;
height: auto;
}
.container {
width: 150px;
align-content: center;
margin-top: 980px;
clear: both;
}
.container input {
width: 82%;
clear: both;
}
</style>
</head>
<body>
...
...
<div id="page4" align= "center" style=" background-image: url(Image/Page2.png); position: relative; z-index: 2; display:none" width="100%" height="100%" left="0px" top="0px">
<form style=" alignment-adjust: autofocus; padding: 30px" class="container" action="Page5" method="POST">
Name: <input type="text" name="name" size="15px" required><br><br>
Email: <input type="text" name="email" size="15px" required><br><br>
</form>
<input type="image" src="image/Submit.png" alt="Submit" width="100px" height="50px" onClick = "Page5()">
</div>
<script>
function Page5() {
$("#page4").hide();
$("#page5").show();
}
</script>
<div id="page5" align= "center" style=" background-image: url(Image/Page5.png);position: relative; z-index: 3; display:none" width="100%" height="100%" >
</div>
</body>
</html>
Functionality:
User is supposed to be able to view page 5 and the background image "Page 5" is being displayed, after the user has submitted the form in page 4. Hence, when user navigate from page 4 to page 5, user is suppose to the see the content of page 5 which is just the background image.
Issue
When user navigates from page 4 to 5, page 5's content is not displayed, the entire background image is not displaying. Hence, I would like to ask for help,
1.) why is this happening
2.) what is the best rectification process
NOTE
I have to input the following attribute:
display:none
Reason: I have created the following stack in the form of block, hence the individual <div> block will only appear when the <script> is implemented. Hence, please do not suggest that I need to remove the display:none as doing so will
cause the to merge and furthermore, it does nothing as well.
Thanks
first of all there is no "width" and "height" attribute to div's so move the width and height declarations to CSS. Also add height 100% to html and body otherwise the div has no basis to calculate the height upon
html, body {
padding: 0;
margin: 0;
position:relative;
width: 100%;
height: 100%;
}
#page5{
background-color: red;
width: 100%;
height:100%
}
http://jsfiddle.net/arrhyppz/
P.S. use the inspect function of your browser to see the applied css, you will find where your mistakes are

background-image: url() for input not working in IE 8

I have a html page with a form in it. I am trying to add an image to a button. So far, the image for the button is working/displaying in firefox and chrome. But in IE8 its just displaying the normal input button. Even the transparency and other properties are not working. Can anyone please suggest any solution, or correct me if I am wrong cause I am just a noob in all this web thing. Thank you!
base.html:
{% load static %}
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="{% static "assets/css/style.css" %}">
</head>
<body>
<header>
<div id="main">
<div id="content">
<img src="{% static "assets/images/google.png" %}" width="202.5" class="logo"/>
</div>
<div id="form">
<form action="/auth/" method="post">{% csrf_token %}
<label for="email" class="label">Email</label>
<input type="text" name="email" value="" id="email">
<label for="password" class="label">Password</label>
<input type="password" name="password" value="" id="password">
<input type="submit" value=" "/>
</form>
</div>
</div>
</header>
<footer>
<div id="footer">
<div id="image">
<div>
</div
</div>
</div>
</footer>
style.css:
* {
margin:0;
padding:0;
}
body{
background:#3effbd;
}
#main {
background-color:#3B5998;
width:1000%;
height:90px;
}
.logo {
border:none;
top:24px;
left:247px;
position:relative;
padding:0px;
margin:0px;
}
.login li{
position:relative;
top: -10px;
left: 900px;
display:inline;
}
input[type=submit]{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
.label {
font-size: 15px;
color: white;
position: relative;
margin: 10px;
}
I replicated the entire code on my local drive but was working fine in IE8!
However instead of using input type submit try this:
<button type="submit"></button>
You have no value in the button - it won't show anything. add in the value or use the good 'ol indent:-999999 with a value.
also add this CSS
display:inline-block;
I had a very similar situation and I have now found a resolution, that works perfectly. It's been tested on a Virtual Machine running Win XP & IE8, to be 100% it works.
Here's is what I found:
In developer tools on IE8 input[type=submit] was being associated with the submit button however, none of the associated css rules were actually kicking in. To prove this I changed them in dev tools and even removed them. The button remained the same.
So, it seems that the rule is attached but the properties don't get implemented. The simple fix for this is to give your button a class and then add this class to your button rules in css like so:
<input type="submit" value=" " class="btn"/>
then add the class to your css:
input[type=submit], .btn{
border:none;
background-color: transparent;
overflow: hidden;
cursor: pointer;
width: 57px;
height: 26px;
background-image: url(../images/button.png);
}
You should now see the rule properties taking effect.
If not you should try changing:
background-image: url(../images/button.png);
to
background: url(../images/button.png);
as there are reports of images needing to be referenced as background the first time they are used in a css file.

How to code this form?

Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag,
How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg
thankful for any input,
modano
It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:
<form [..]>
<ul>
<li class="hasError">
<em class="feedback">error message here</em>
<div class="attribute">
<label for="firstName">First name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="firstName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
<li>
<em class="feedback" />
<div class="attribute">
<label for="firstName">Last name:</label>
<em>(required)</em>
</div>
<div class="input">
<input type="text" name="lastName" id="firstName" />
<em class="description">optional description here</em>
</div>
<span class="clearBoth" />
</li>
</ul>
</form>
This achieves the following:
By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.
A sample CSS file could look something like (note that this is untested):
form li {
width: 300px;
}
form li.hasErrors {
width: 298px;
border: 1px red;
background-color: #C55;
}
form .attribute {
float: left;
clear: left;
width: 60px;
}
form .input {
float: right;
clear: none;
width: 240px;
}
form .feedback {
display: block;
padding-left: 50px;
color: red;
}
form .description {
display: block;
clear: both;
color: #888;
}
.clearBoth { display: block; clear: both; }
A very very good tutorial on creating accessible HTML/CSS forms can be found on A list Apart: Prettier Accessible Forms
Generally a fantastic site for information on how to create good, clean and accessible websites.
Simply give your labels a specific width; this will ensure your fields line up. You can also float your labels and inputs to easily break them into rows. Here's a minimal example:
<style type="text/css">
form { overflow: auto; position: relative; }
input { float: left; }
label { clear: left; float: left; width: 10em; }
</style>
<form>
<label>Field 1</label><input/>
<label>Field 2</label><input/>
<label>Field 3</label><input/>
</form>
I am no CSS expert, but this should get you started. Of course the styles should be in an external style sheet.
<html>
<head>
<style>
html {
font-size: 76%;
}
body {
font-size: 1.0em;
font-family: verdana;
}
div.input {
border: 1px solid white;
clear: left;
width: 25em;
height: 5em;
padding: 2px;
margin-bottom: 1.0em;
}
div.error {
border: 1px solid red;
}
div.label {
float: left;
width: 7em;
}
div.field {
float: left;
}
div.errormessage {
color: red;
}
div.description {
color: #bbb;
}
input.text {
width: 13em;
}
</style>
</head>
<body>
<form>
<div class="input error">
<div class="label">
<div> </div>
<label>First name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage">error message here</div>
<input type="text" name="FirstName" class="text">
<div class="description">optional description here</div>
</div>
</div>
<div class="input">
<div class="label">
<div> </div>
<label>Last name:<br>(required)</label>
</div>
<div class="field">
<div class="errormessage"> </div>
<input type="text" name="LastName" class="text">
<div class="description">optional description here</div>
</div>
</div>
</form>
</body>
</html>