How can i put and an html form (text box and buttons) within an image (jpg). Please provide the css, html code.
Note: Image should be in the background and should be in full dimensions.
You can also use this trick:
<form style="position: relative;">
<img src="mypicture.jpg" border="0" />
<div style="position: absolute; left: 0px; top: 0px;">
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
Input here... <input type="text" /><br />
<button type="submit">Send</button>
</div>
</div>
Live test case is available here: http://jsfiddle.net/9UcZg/
Edit: in order to have the form contents centered, either hard code the width like this:
<div style="position: absolute; left: 0px; top: 0px; text-align: center; width: 450px;">
(updated test case: http://jsfiddle.net/9UcZg/2/)
Or use JavaScript to calculate the width "on the fly":
window.onload = function WindowLoad() {
var oImage = document.getElementById("MyFormBackground");
var oDiv = document.getElementById("MyFormContents");
var totalWidth = oImage.offsetWidth;
var contentsWidth = oDiv.offsetWidth;
oDiv.style.left = parseInt((totalWidth - contentsWidth) / 2) + "px";
}
For this to work you'll have to alter the HTML a bit, adding id to the image and the container div, here is the updated test case: http://jsfiddle.net/9UcZg/3/
what do you mean with 'within an image'?
do you want to use the image as form-background?
then something like this:
<html>
<head>
<style>
.formWithBackground {
background-image:url("url to image");
background-repeate:no-repeat;
background-position:...
}
</style>
...
<body>...
<form class="formWithBackground">
<input type="text".../><button>send</button>
</form>
....
should help
regards
gerhard
Put the code in a div, and give the div a background image.
<style type="text/css">
#picture {
background-image:url(myimage.jpg)
}
</style>
<div id="picture">
<form>
<input type="text">
<input type="submit">
</form>
</div>
The obvious answer is to have the jpeg image as the background of the element that contains the form fields.
CSS:
.myformbox {
background-image:url(myimage.jpg);
height:100px; /*or whatever the height of the image is*/
width:100px; /*ditto*/
}
HTML:
<div class='myformbox'>
<form ....>
....input fields here....
</form>
</div>
...or something like that.
I note your edit which says "image should be in full dimensions". That is still ambiguous language: do you mean "the box needs to be the full size of the image", or "the image needs to scale to the size of the box"?
For the first of those, see above, where I've added height and width parameters to the CSS.
For the second one however, you have a problem, which is that background image scaling isn't currently supported by CSS (yet!). Solutions to this are a bit more complex, but if this is the question you're asking, here is a page that might help.
Related
Like a lot of people, I'd like to customize the ugly input type=file, and I know that it can't be done without some hacks and/or javascript. But, the thing is that in my case the upload file buttons are just for uploading images (jpeg|jpg|png|gif), so I was wondering if I could use a "clickable" image which would act exactly as an input type file (show the dialog box, and same $_FILE on submitted page).
I found some workaround here, and this interesting one too (but does not work on Chrome =/).
What do you guys do when you want to add some style to your file buttons? If you have any point of view about it, just hit the answer button ;)
This works really well for me:
.image-upload>input {
display: none;
}
<div class="image-upload">
<label for="file-input">
<img src="https://icons.iconarchive.com/icons/dtafalonso/android-lollipop/128/Downloads-icon.png"/>
</label>
<input id="file-input" type="file" />
</div>
Basically the for attribute of the label makes it so that clicking the label is the same as clicking the specified input.
Also, the display property set to none makes it so that the file input isn't rendered at all, hiding it nice and clean.
Tested in Chrome but according to the web should work on all major browsers. :)
EDIT:
Added JSFiddle here: https://jsfiddle.net/c5s42vdz/
Actually it can be done in pure css and it's pretty easy...
HTML Code
<label class="filebutton">
Browse For File!
<span><input type="file" id="myfile" name="myfile"></span>
</label>
CSS Styles
label.filebutton {
width:120px;
height:40px;
overflow:hidden;
position:relative;
background-color:#ccc;
}
label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
}
The idea is to position the input absolutely inside your label. set the font size of the input to something large, which will increase the size of the "browse" button. It then takes some trial and error using the negative left / top properties to position the input browse button behind your label.
When positioning the button, set the alpha to 1. When you've finished set it back to 0 (so you can see what you're doing!)
Make sure you test across browsers because they'll all render the input button a slightly different size.
Great solution by #hardsetting,
But I made some improvements to make it work with Safari(5.1.7) in windows
.image-upload > input {
visibility:hidden;
width:0;
height:0
}
<div class="image-upload">
<label for="file-input">
<img src="https://via.placeholder.com/300x300.png?text=UPLOAD" style="pointer-events: none"/>
</label>
<input id="file-input" type="file" />
</div>
I have used visibility: hidden, width:0 instead of display: none for safari issue and added pointer-events: none in img tag to make it working if input file type tag is in FORM tag.
Seems working for me in all major browsers.
Hope it helps someone.
A much better way than writing JS is to use native,
and it turns to be lighter than what was suggested:
<label>
<img src="my-image.png">
<input type="file" name="myfile" style="display:none">
</label>
This way the label is automatically connected to the input that is hidden.
Clicking on the label is like clicking on the field.
You can replace image automatically with newly selected image.
<div class="image-upload">
<label for="file-input">
<img id="previewImg" src="https://icon-library.net/images/upload-photo-icon/upload-photo-icon-21.jpg" style="width: 100px; height: 100px;" />
</label>
<input id="file-input" type="file" onchange="previewFile(this);" style="display: none;" />
</div>
<script>
function previewFile(input){
var file = $("input[type=file]").get(0).files[0];
if(file){
var reader = new FileReader();
reader.onload = function(){
$("#previewImg").attr("src", reader.result);
}
reader.readAsDataURL(file);
}
}
</script>
I would use SWFUpload or Uploadify. They need Flash but do everything you want without troubles.
Any <input type="file"> based workaround that tries to trigger the "open file" dialog by means other than clicking on the actual control could be removed from browsers for security reasons at any time. (I think in the current versions of FF and IE, it is not possible any more to trigger that event programmatically.)
This is my method if i got your point
HTML
<label for="FileInput">
<img src="tools/img/upload2.png" style="cursor:pointer" onmouseover="this.src='tools/img/upload.png'" onmouseout="this.src='tools/img/upload2.png'" alt="Injaz Msila" style="float:right;margin:7px" />
</label>
<form action="upload.php">
<input type="file" id="FileInput" style="cursor: pointer; display: none"/>
<input type="submit" id="Up" style="display: none;" />
</form>
jQuery
<script type="text/javascript">
$( "#FileInput" ).change(function() {
$( "#Up" ).click();
});
</script>
I have had lots of issues with hidden and not visible inputs over the past decade sometimes things are way simpler than we think.
I have had a little wish with IE 5,6,7,8 and 9 for not supporting the opacity and thus the file input would cover the upload image however the following css code has resolved the issue.
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
The following snipped is tested on chrome, IE 5,6,7,8,9,10 the only issue in IE 5 is that it does not support auto margin.
Run the snippet simply copy and paste the CSS and HTML modify the size as you like.
.file-upload{
height:100px;
width:100px;
margin:40px auto;
border:1px solid #f0c0d0;
border-radius:100px;
overflow:hidden;
position:relative;
}
.file-upload input{
position:absolute;
height:400px;
width:400px;
left:-200px;
top:-200px;
background:transparent;
opacity:0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.file-upload img{
height:70px;
width:70px;
margin:15px;
}
<div class="file-upload">
<!--place upload image/icon first !-->
<img src="https://i.stack.imgur.com/dy62M.png" />
<!--place input file last !-->
<input type="file" name="somename" />
</div>
its really simple you can try this:
$("#image id").click(function(){
$("#input id").click();
});
You can put an image instead, and do it like this:
HTML:
<img src="/images/uploadButton.png" id="upfile1" style="cursor:pointer" />
<input type="file" id="file1" name="file1" style="display:none" />
JQuery:
$("#upfile1").click(function () {
$("#file1").trigger('click');
});
CAVEAT:
In IE9 and IE10 if you trigger the onclick in a file input via javascript the form gets flagged as 'dangerous' and cannot be submmited with javascript, no sure if it can be submitted traditionaly.
The input itself is hidden with CSS visibility:hidden.
Then you can have whatever element you whish - anchor or image.., when the anchor/image is clicked, trigger a click on the hidden input field - the dialog box for selecting a file will appear.
EDIT: Actually it works in Chrome and Safari, I just noticed that is not the case in FF4Beta
Working Code:
just hide input part and do like this.
<div class="ImageUpload">
<label for="FileInput">
<img src="../../img/Upload_Panel.png" style="width: 18px; margin-top: -316px; margin-left: 900px;"/>
</label>
<input id="FileInput" type="file" onchange="readURL(this,'Picture')" style="cursor: pointer; display: none"/>
</div>
form input[type="file"] {
display: none;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Simple File Upload</title>
<meta name="" content="">
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<label for="fileToUpload">
<img src="http://s3.postimg.org/mjzvuzi5b/uploader_image.png" />
</label>
<input type="File" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
RUN SNIPPET or Just copy the above code and execute. You will get what you wanted. Very simple and effective without javascript. Enjoy!!!
<script type="text/javascript">
function upl() {
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.setAttribute('name', 'uploimg');
fileSelector.setAttribute('accept', 'image/*');
fileSelector.click();
fileSelector.style.display = "none";
fileSelector.onchange = function() {
document.getElementById("indicator").innerHTML = "Uploaded";
};
document.getElementById("par_form").appendChild(fileSelector);
}
</script>
<form id="par_form">
<img src="image_url" onclick="upl()"><br>
<span id="indicator"></span><br>
<input type="submit">
</form>
I need to create an html page. In this html page, I need to have an image with an a <input type="text "/>. This input is in the middle of the image; this input type text also have the "search" icon inside the input on the right.
I tried to build the code in this way:
<html>
<img src="./home/image.jpeg">
<input type="text" name="food" placeholder="insert the food">
</input> <!-- this input has the icon search on the right-->
</img>
<html>
Obviously it doesn't work. Is there a good way to make it work?
Put your input inside a div, and make the image the background-image of that div.
You need to be more specific with your question. can you upload a link. but you also Add a Background image to the input type text. Something like this:
input { background-image: url("search_icon.png"); position:absolute; }
This should do it for you
html:
<div class="bg">
<input type="text" name="food" placeholder="insert the food">
</div>
CSS:
.bg{
background-image: url("http://lorempixel.com/200/200/");
background-repeat:no-repeat;
height:200px;
width:200px;
line-height:200px;
text-align:center;
}
I do not want to know How to use image as an input text.
I want to know How do I put the text input on the Image
login.html
<div id = "background">
<img class="stretch" alt="" src="C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png">
<div class = "text">
<input type="text" >
<input type="text" >
</div>
</div>
login.css
#background{
margin-left:30%;
width:400px;
height:400px;
}
.stretch{
width:100%;
height:100%;
}
.text{
}
What am I trying to do now is imitating the Google "Sign in" page
You have 2 options
Set background image for the #backkground. Use margin, padding, or other background css for positioning. This option won't need any img tag.
Use position: relative on the #background, and position: absolute on the .text. Use left, top, right, bottom css on #text for any kind of positioning you want.
I would recommend going with the 1st option. But if you feel the need to keep the img tag for some reasons, then the second option is good enough for you.
Be sure to close your text input tags. Also try this.
CSS:
#background {
margin-left: 30%;
width: 400px;
height: 400px;
background-image: url(C:\Users\joseph\Documents\GitHub\Spring2014\CMP342\MainProject\WebContent\WEB-INF\img\login.png);
background-size: contain;
}
HTML:
<div id = "background">
<div class = "text">
<input type="text" />
<input type="text" />
</div>
</div>
Use CSS to position your text inputs where you'd like inside the div.
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
Is it possible to style a input element of type file without worrying about browser compatibility? In my case I need to implement a background image and round border(1px), the button should also be customised if possible.
Follow these steps then you can create custom styles for your file upload form:
1.) This is the simple HTML form(please read the HTML comments I have written here bellow)
<form action="#type your action here" method="POST" enctype="multipart/form-data">
<div id="yourBtn" style="height: 50px; width: 100px;border: 1px dashed #BBB; cursor:pointer;" onclick="getFile()">Click to upload!</div>
<!-- this is your file input tag, so i hide it!-->
<div style='height: 0px;width: 0px; overflow:hidden;'><input id="upfile" type="file" value="upload"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<input type="submit" value='submit' >
</form>
2.) Then use this simple script to pass the click event to file input tag.
function getFile(){
document.getElementById("upfile").click();
}
Now you can use any type of a styling without worrying how to change default styles.
I know this very well, because I have been trying to change the default styles for month and a half. believe me it's very hard because different browsers have different upload input tag. So use this one to build your custom file upload forms.Here is the full AUTOMATED UPLOAD code.
<html>
<style>
#yourBtn{
position: relative;
top: 150px;
font-family: calibri;
width: 150px;
padding: 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: 1px dashed #BBB;
text-align: center;
background-color: #DDD;
cursor:pointer;
}
</style>
<script type="text/javascript">
function getFile(){
document.getElementById("upfile").click();
}
function sub(obj){
var file = obj.value;
var fileName = file.split("\\");
document.getElementById("yourBtn").innerHTML = fileName[fileName.length-1];
document.myForm.submit();
event.preventDefault();
}
</script>
<body>
<center>
<form action="#type your action here" method="POST" enctype="multipart/form-data" name="myForm">
<div id="yourBtn" onclick="getFile()">click to upload a file</div>
<!-- this is your file input tag, so i hide it!-->
<!-- i used the onchange event to fire the form submission-->
<div style='height: 0px; width: 0px;overflow:hidden;'><input id="upfile" type="file" value="upload" onchange="sub(this)"/></div>
<!-- here you can have file submit button or you can write a simple script to upload the file automatically-->
<!-- <input type="submit" value='submit' > -->
</form>
</center>
</body>
</html>
Same solution via Jquery. Works if you have more than one file input in the page.
$j(".filebutton").click(function() {
var input = $j(this).next().find('input');
input.click();
});
$j(".fileinput").change(function(){
var file = $j(this).val();
var fileName = file.split("\\");
var pai =$j(this).parent().parent().prev();
pai.html(fileName[fileName.length-1]);
event.preventDefault();
});
After looking around on Google for a long time, trying out several solutions, both CSS, JavaScript and JQuery, i found that most of them were using an Image as the button. Some of them were hard to use, but i did manage to piece together something that ended out working out for me.
The important parts for me was:
The Browse button had to be a Button (not an image).
The button had to have a hover effect (to make it look nice).
The Width of both the Text and the button had to be easy to adjust.
The solution had to work in IE8, FF, Chrome and Safari.
This is the solution i came up with. And hope it can be of use to others as well.
Change the width of .file_input_textbox to change the width of the textbox.
Change the width of both .file_input_div, .file_input_button and .file_input_button_hover to change the width of the button. You might need to tweak a bit on the positions also. I never figured out why...
To test this solution, make a new html file and paste the content into it.
<html>
<head>
<style type="text/css">
.file_input_textbox {height:25px;width:200px;float:left; }
.file_input_div {position: relative;width:80px;height:26px;overflow: hidden; }
.file_input_button {width: 80px;position:absolute;top:0px;
border:1px solid #F0F0EE;padding:2px 8px 2px 8px; font-weight:bold; height:25px; margin:0px; margin-right:5px; }
.file_input_button_hover{width:80px;position:absolute;top:0px;
border:1px solid #0A246A; background-color:#B2BBD0;padding:2px 8px 2px 8px; height:25px; margin:0px; font-weight:bold; margin-right:5px; }
.file_input_hidden {font-size:45px;position:absolute;right:0px;top:0px;cursor:pointer;
opacity:0;filter:alpha(opacity=0);-ms-filter:"alpha(opacity=0)";-khtml-opacity:0;-moz-opacity:0; }
</style>
</head>
<body>
<input type="text" id="fileName" class="file_input_textbox" readonly="readonly">
<div class="file_input_div">
<input id="fileInputButton" type="button" value="Browse" class="file_input_button" />
<input type="file" class="file_input_hidden"
onchange="javascript: document.getElementById('fileName').value = this.value"
onmouseover="document.getElementById('fileInputButton').className='file_input_button_hover';"
onmouseout="document.getElementById('fileInputButton').className='file_input_button';" />
</div>
</body>
</html>
Here's a simple css only solution, that creates a consistent target area, and lets you style your faux elements however you like.
The basic idea is this:
Have two "fake" elements (a text input/link) as siblings to your real file input. Absolutely position them so they're exactly on top of your target area.
Wrap your file input with a div. Set overflow to hidden (so the file input doesn't spill out), and make it exactly the size that you want your target area to be.
Set opacity to 0 on the file input so it's hidden but still clickable. Give it a large font size so the you can click on all portions of the target area.
Here's the jsfiddle: http://jsfiddle.net/gwwar/nFLKU/
<form>
<input id="faux" type="text" placeholder="Upload a file from your computer" />
Browse
<div id="wrapper">
<input id="input" size="100" type="file" />
</div>
</form>
Use the clip property along with opacity, z-index, absolute positioning, and some browser filters to place the file input over the desired button:
http://en.wikibooks.org/wiki/Cascading_Style_Sheets/Clipping
use uniform js plugin to style input of any type, select, textarea.
The URL is
http://uniformjs.com/
I have a 50x50 image and an <input type="text" /> field that I want to be on the right side of the image. I've tried this:
<img src="missing-image.png" />
<div name="image_input">
<input type="text" />
</div>
And with this CSS:
#image_input {
position: absolute;
top: 10px;
}
But the text input won't go to the right side of the image. Also as you can see I want it to be centralized with the height of the image and as I can see it won't work too. How I can correct this?
PS: All that is inside a <form>
Position absolute gives you more control:
HTML
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
CSS
div {
position:relative;
}
input{
position:absolute;
right:10px;
bottom:20px;
}
Try this:
<div id="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
and the CSS:
#image_input img {
float: left;
clear: none;
}
Note that I changed the div's "name" attribute to an "id" attribute.
there are a couple of ways to center align text next to an image. you can put it in a list and make the image the list style type. The other thing you can do it properly pad the element to center align it.
Try changing to this:
<div name="image_input">
<img src="missing-image.png" />
<input type="text" />
</div>
And the CSS:
.img {
display: inline-block;
}
To center the height, you might want to use one of the vertical-align options on the input tag.
such as:
input {
vertical-align: middle;
}
I don't use vertical-align very much, so you might have to tweak it a little to get it to work, but see here: http://www.w3schools.com/css/pr_pos_vertical-align.asp