Why do select option form elements change style when the form is submitted?
HTML:
<div ng-controller="TestController">
<form name="test" ng-submit="formSubmit()">
<select name="selectFormItem" ng-options="selectFormItemValue.value as selectFormItemValue.text for selectFormItemValue in selectFormItemValues" ng-required="true" ng-model="testModel" class="selectStyle">
<option value=""></option>
</select>
<button id="testSubmit" type="submit">Submit</button>
</form>
<br/><br/>
<span>{{selectFormItemValues}}</span>
<br/><br/>
</div>
JS:
function TestController($scope) {
$scope.selectFormItemValues = [{'value':0, 'text':'value0'}, {'value':1, 'text':'value1'}];
$scope.formSubmit = function formSubmit() {
alert("dummySubmit!");
}
}
CSS:
body {
font-family: Helvetica;
font-size: 14px;
}
.selectStyle {
padding: 5px;
width: 150px;
}
JSFiddle: http://jsfiddle.net/nEzpS/22/
I noticed it happens when "required" is set on select form member.
EDIT:
Tested in Chrome versions: 23.0.1271.97, 24.0.1312.52
This appears to be a bug with certain versions of Chrome, since the issue does not present in other browsers.
Related
I have a website that has a big search form and a big website background. I had an idea for my website. That is to make the website background dim when i click on the search form. But then, I saw same thing at bing.com. I tried to do it using css but failed no matter what i try. Any idea to make it happen?
Update
I have this now in my css file.
#dim {width:100%; opacity:0; background:#000; position:absolute; height:100%;}
I want a JS code to make it the opacity turns to 0.5 when i click on my form.
Below is the code of my form.
<form name="searchform" onsubmit="return !!(validateSearch() && dosearch());">
<input type="text" name="searchterms" class="terms" id="terms" placeholder="What are you searching for?">
<select name="sengines" class="state" id="state">
<option value="" selected>Select a State</option>
<option value="http://kl.onehomereno.com?s=">Klang Valley</option>
</select>
<div class="pad10"></div>
<input name="Search" type="submit" value="Search" class="button3">
</form>
I have the terms as id. Therefore, i need a js code to work with #terms and #dim. Any suggestion?
You could use JavaScript to listen for clicks on the form element and change opacity of the class with the background
For example
EDIT:
CSS
.dim {
background: url("home_page.PNG") no-repeat;
background-size: cover;
width: 100%;
height: 500px;
opacity: 0;
}
HTML
<div class="dim"></div>
<input type="text" id="term">
JavaScript
$(document).ready(function() {
$('#term').click(function(e) {
e.stopPropagation();
$('.dim').css('opacity', '0.5');
});
$(document).on("click", function() {
$(this).find('.dim').css('opacity', '0');
});
});
Hope you get how this works.
Take a look at the code below...
As you can see the 'HAZEL(NUT)' and 'HASSEL(NØD)' has a different parent to the checkbox. Which is why I think the checkbox works for the font-weight part, but doesn't work for selecting #hazelnut or #hasselnod. If anyone could help me with the correct selector for #hazelnut and #hasselnod I would be very grateful.
Hope this is clear, I'm quite a newbie to HTML and CSS, so have trouble explaining what I mean sometimes!
HTML here:
<div class="container" id="lang">
<input type="radio" id="english" name="language" value="english" checked="checked" />
<input type="radio" id="dansk" name="language" value="dansk" />
<ul>
<label for="english"><li id="en">ENGLISH</li></label>
<label for="dansk"><li id="dk">DANSK</li></label>
</ul>
</div>
<div class="container" id="myname">
<h1 id="hazelnut">HAZEL<br>(NUT)</h1>
<h1 id="hasselnod">HASSEL<br>(NØD)</h1>
</div>
CSS here:
#dansk:checked ~ * #dk {
font-weight: 700;
}
#dansk:checked ~ * #en {
cursor: pointer;
}
#dansk:checked * #hazelnut {
display: none;
}
#english:checked ~ * #en {
font-weight: 700;
}
#english:checked ~ * #dk {
cursor: pointer;
}
#english:checked * #hasselnod {
display: none;
}
Many thanks!
In CSS, for the ~ selector to work, the elements must have the same parent. As I see it, I'm afraid you'll have to involve some javascript in here.
What I'd do, is have the radio buttons change a data attribute of #lang, so it would be transparent to the css:
<div id="lang" data-value="en">
and then use the following css rules:
/*when #myname is preceded by #lang with data-value attribute 'en',
select direct child #hasselnod */
#lang[data-value='en'] ~ #myname > #hasselnod {
/* and set its display to none*/
display: none;
}
Now, we'll need the javascript to change the data-value attribute of #lang. Look at the onclick function in the following snippet:
<input type="radio" id="dansk" name="language" value="dansk"
onclick="this.parentNode.setAttribute('data-value', 'da')" />
Check out this fiddle: http://jsfiddle.net/wkL7q/2/
To target elements in a different parent, I think you need to use jQuery:
$("#lang input").change(function () {
var lang = $(this).val();
if(lang == 'dansk') {
$('#hazelnut').hide();
$('#hasselnod').show();
} else {
$('#hazelnut').show();
$('#hasselnod').hide();
}
});
Check out this fiddle: http://jsfiddle.net/X3ZtK/
Is it possible to create a radio button group without the round buttons in front of each element?
The reason I would like to implement this is, that in my case the user has to choose between 3 different languages and I would really like to add this selection to a <form> tag, change the color of the selected language and make it required, but in the same time I wanted it to look something like this:
___________________________
| Username | <--Text input
___________________________
___________________________
| Password | <--Text input
___________________________
____________________________
| EN | DE | FR | <--This is what I thought of... Horizontal selection
____________________________ of the language looking like a simple table with
3 rows and the plain text (EN, DE, FR) in it.
____________________________
| Login | <--Submit button
____________________________
I really hope that you're able to get my point :)
If you put the radio buttons inside the labels and then make them invisible the user can click the label to select the radio button that is inside it. Consider the following approach.
HTML:
<div>
<label><input type="radio"/>English</label>
<label><input type="radio"/>French</label>
</div>
CSS:
label > input[type=radio] {
visibility: hidden;
}
JSFiddle here: http://jsfiddle.net/gEXUT/
Note that this is just an example, you'd still need to add the radio group name and perhaps the option for German etc.
Yes and no.
If you build your form with input and labels, it will do, else,
you have to. :)
the idea is :
input[type=radio] {
position:fixed;
left:-9999px;
}
As being fixed and of the screen, your input radio won't be in the flow anymore.
If labels are well formed and link to theme with attribute for, you just need to clikc the label to checked your invisible radio input.
To style your form, don't mind those imputs, style your labels as wished.
<input type="radio" name="r-lang" id="r1"><label for="r1"> EN </label>
Cheers
I've actually written on this before, and made a jsfiddle example:
http://jsfiddle.net/Kyle_Sevenoaks/HzQBE/
I'll explain it though. (I've put the labels an radio buttons into a list for this example)
<li class="cardtype-item">
<input type="radio" name="preferred_color" id="red" value="Red" />
<label for="red"> Red</label>
</li>
The general idea is that you have labels linked to the radio buttons, but the radios are hidden (either by display, position, etc). Then you use CSS to style the labels exactly as you like, and because they're linked to the radio buttons (via "name" on the input and "for" on the label) you can have much more control over how they look.
li
{
background: #333;
color: #eee;
padding: 10px;
list-style-type: none;
float: left;
width: 100px;
}
li.selected
{
background: #eee;
color: #333;
box-shadow:inset 0px 0px 15px #999;
}
input[type=radio]
{
display: none;
}
The next part of the trick is to use Javascript (I've use jQuery) to add and remove the selected or active class on the label itself.
$('li.cardtype-item label, li.cardtype-item input').click( function() {
$(this).parents('li').addClass('selected');
$(this).parents().siblings('li').removeClass('selected');
});
var ident = $('input[type=radio]').attr("id");
if($('input[type=radio]').is('checked')) {
$('form').append(ident);
};
I hope this gives you pretty much what you're after.
try this
radio button html
<div class="buttonSlider">
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
<input type="radio" value=".." name="radio1" />
</div>
javascript
$(document).ready(function () {
$('.buttonSlider input').replaceWith('<div class="radiobox"> <input type="radio" name="radio1" value=".."/></div>');
$('.buttonSlider input').prop('checked', false);
$('.radiobox').click(function () {
var this_div = $(this);
if (this_div.find('input').is(':checked')) {
this_div.find('input').prop('checked', false);
this_div.css({ 'background-color': '#800001' });
}
else {
this_div.find('input').prop('checked', true);
this_div.css({ 'background-color': '#808080' });
}
})
})
css
.buttonSlider
{
background-color: #800001;
}
.buttonSlider .radiobox
{
height: 20px;
width: 100px;
border: 1px solid black;
background-color: #800001;
float: left;
}
.buttonSlider input
{
display: none;
}
Thanks to the help of everyone of you (and this awesome answer). I could finally implement it in my website.
This is my code:
HTML:
<div id="language">
<table id="languagetable" border="0px" cellspacing="0px">
<tr>
<td width="33.33333%">
<input type="radio" id="fr" name="languageselection" value="en">
<label for="en">FR</label>
</td>
<td width="33.33333%">
<input type="radio" id="en" name="languageselection" value="de" checked>
<label for="de">EN</label>
</td>
<td width="33.33333%">
<input type="radio" id="it" name="languageselection" value="it">
<label for="de">DE</label>
</td>
</tr>
</table>
</div>
CSS:
#languagetable input[type="radio"] {
display:none;
}
#languagetable label {
display:inline-block;
margin: 0 auto;
font-family: Arial;
font-size: 20px;
}
#languagetable input[type="radio"]:checked + label {
color: #99CC00;
}
I'm using a form with a drop-down menu that contains some options disabled, so the users cannot select them. I'm trying to customize via css these elements but I have some problems with Chrome and IE7/8/9/10.
HTML:
<div class="formBody">
<select name="form[categoria][]" id="categoria" class="rsform-select-box">
<option selected="selected" value="">Scegli una categoria</option>
<option disabled="disabled" value="">Impresa </option>
</select>
<span class="formValidation">
<span id="component50" class="formNoError">Scegli una categoria</span>
</span>
</div>
CSS:
select option[disabled] { color: #000; font-weight: bold }
This code works only with Firefox and doesn't work with Chrome and IE (all version).
Any idea to solve this problem?
Below the html code for select-box
<div class="formBody"><select name="form[categoria][]" id="categoria" class="rsform-select-box" ><option selected="selected" value="">Scegli una categoria</option><option disabled="disabled" value="">Impresa </option><option value="Servizi">Servizi</option><option value="Informatica">Informatica</option><option value="Commercio">Commercio</option><option value="Telecomunicazioni">Telecomunicazioni</option><option value="Editoria/Stampa">Editoria/Stampa</option><option value="Meccanica/Elettrica">Meccanica/Elettrica</option><option value="Alimentare">Alimentare</option><option value="Chimica/Farmaceutica">Chimica/Farmaceutica</option><option disabled="disabled" value="">Edilizia </option><option value="Tessile/Moda">Tessile/Moda</option><option value="Mobili/Arredamenti">Mobili/Arredamenti</option><option value="Alberghi/Ristoranti">Alberghi/Ristoranti</option><option value="Trasporto/Logistica">Trasporto/Logistica</option><option value="Finanza">Finanza</option><option value="Altro">Altro</option><option disabled="disabled" value="">Professionista </option><option value="Commercialista">Commercialista</option><option value="Ragioniere">Ragioniere</option><option value="Notaio">Notaio</option><option value="Tributarista">Tributarista</option><option value="Avvocato">Avvocato</option><option value="Consulente del lavoro">Consulente del lavoro</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Locale </option><option value="Regione">Regione</option><option value="Provincia">Provincia</option><option value="Comune">Comune</option><option value="Comunità Montana">Comunità Montana</option><option value="ASL">ASL</option><option value="CCIA">CCIA</option><option value="Altro">Altro</option><option disabled="disabled" value="">P.A. Centrale </option><option value="Associazione di categoria">Associazione di categoria</option><option value="Privato">Privato</option><option value="Altro">Altro</option></select><span class="formValidation"><span id="component50" class="formNoError">Scegli una categoria</span></span></div>
What you're looking for is this:
select option:disabled {
color: #000;
font-weight: bold;
}
Here, have a fiddle.
Attention: according to reports on the comments section, this solution does not work on OS X.
I used :invalid to solve my issue, description below:
So these answers do style the disabled option but only within the dropdown. Not if you wanted to display the disabled option at the top of the list as a "Please select".
Hope this helps others having a similar issue to what I had.
Basically, the select needs to be a required field for this to work:
<select required>
Assuming the option is at the top of the list:
<option disabled selected value="">Please select</option>
And your SCSS looking something like this:
select {
// The select element is set to required
// as long as the selected options value
// is empty the element is not valid.
&:invalid {
color: gray;
}
// Styling for browsers which do support
// styling select option elements directly
[disabled] {
color: gray;
}
option {
color: black;
}
}
So it's the :invalid which allows us to colour the disabled selected option.
Thanks to Markus Oberlehner for his post:
Blog post: https://markus.oberlehner.net/blog/faking-a-placeholder-in-a-html-select-form-field/
Codepen: https://codepen.io/maoberlehner/pen/WOWrqO
There is a way to do this with CSS only. But you need to tweak your HTML to follow some rules:
set your select to be required
disabled options need to have empty value fields: value=""
you need to style the :valid and :invalid states
Here is the markup:
<select required>
<option value="" selected disabled>Disabled default</option>
<option value="" disabled>Just disabled</option>
<option value="" >Empty but valid</option>
<option value="a-value-here">Fully valid</option>
</select>
select {
width: 500px;
padding: 10px;
}
select:invalid {
background: red;
}
select:valid {
background: green;
}
Here is the fiddle: https://jsfiddle.net/james2doyle/hw1m2cd9/
Now, when an option that is disabled and also value="", the :invalid styling will be applied. You can see that empty values are still ok.
If only select supported pattern, then we could validate with regex instead. At the time of this comment, it does not and is only supported on input "text" types.
This solution should work on IE >= 10
I do not think you can target an option tag using pure CSS; you can only modify a select tag.
Effort to modify a select tag.
Same effort to modify an option tag.
However, there are workarounds. See this question.
<select>
<option value="volvo" >Volvo</option>
<option value="saab">Saab</option>
<option value="vw" disabled>VW</option>
<option value="audi" class="colr">Audi</option>
<option value="aaa">Something</option>
<option value="ccc">Other</option>
<option value="vw" disabled>VW</option>
<option value="vvv">Apple</option>
<option value="nnn" class="colr">Mango</option>
<option value="cmmmcc">Plum</option>
</select>
option:disabled {
background: #ccc;
width: 500px;
padding: 5px;
}
option.colr {
background: red;
width: 500px;
padding: 5px;
}
Check the link
http://jsfiddle.net/W5B5p/110/
I used a simple hack to make disabled options grey, hopefully someone finds it useful.
<label>
<div id="disabledMask"></div>
<select id="mySelect">
<option disabled selected>Please Select</option>
<option value="foo">Bar</option>
</select>
</label>
<style>
label {
position: relative;
}
#disabledMask {
position: absolute;
background-color: #fff;
opacity: 0.5;
pointer-events: none;
width: 100%;
height: 100%;
display: none;
}
</style>
<script>
var toggleMask = function(){
var option = this.options[this.selectedIndex];
var disabledMask = document.getElementById('disabledMask');
disabledMask.style.display = option.disabled? 'block' : 'none';
};
var mySelect = document.getElementById('mySelect');
mySelect.addEventListener('change', toggleMask);
toggleMask.bind(mySelect)();
</script>
Here is a jsfiddle: https://jsfiddle.net/jhavbzcx/
Disclaimer: depending on the styling of your select you may need to style the #disabledMask so as not to overlap the dropdown arrow.
<select class="dropdown" name="contactMethod">
<option selected disabled>Contact method:</option>
<option class="dropdownplus"> E-mail: </option>
<option class="dropdownplus"> Website </option>
<option class="dropdownplus"> None</option>
</select>
<style>
.dropdown {
background-color: rgba(195, 0, 97, 0.1);
width: 100%;
border: 1px solid #CC0061;
border-style: inset;
color: grey;
text-decoration: none;
display: inline-block;
font-size: 16px;
padding: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
option.dropdownplus {
color: black;
}
</style>
See img https://ibb.co/d9453b
var select = document.getElementsByTagName("select");
for(var i = 0;i < select.length; i++)
{
var el = select[i];
var optVal = el.options[el.selectedIndex].value
el.addEventListener('change', function () {
// Using an if statement to check the class
if (optVal == "") {
el.classList.remove('not_chosen');
} else {
el.classList.add('not_chosen');
}
});
}
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>