!!!Solved!!!
So I'm pretty new to HTML, CSS and Javascript is near unknown to me.
I used the help of people from a previous question, to do it.
The code of login was working before, but it doesn't work anymore and I can't really figure out what's the problem as everything for me seems alright.
The way it should work, that in (labavakara.neocities.org) you enter 'admin' and 'labadiena' in the form and it sends you to another website of my own.
Anyone know what I did wrong?
function check(form) should see what was entered in the form boxes and then see if it matches the correct user and pass.
When I go to the site and inspect element, then check console - 0 errors.
Code
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 400px;
position: fixed;
top: 50%;
left: 55%;
margin-top: -100px;
margin-left: -200px;
}
body {
background-image: url("backg.png");
background-color: #cccccc;
}
function {
color: red;
}
</style>
<body>
<script>
function check(form)
{
if(form.loginInput.value == "admin" && form.passwordInput.value == "labadiena")
{
window.location.href = "https://labavakara.neocities.org/trysketuri.html";
}
else
{
alert("Error Password or Username")
}
}
</script>
<div>
<title>Login</title>
<form>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="text" id="loginInput" name="login" value="" placeholder="Username"></p>
<p><input style="background-color:red;color:black;border:1px solid #ff0000" type="password" id="passwordInput" name="password" value="" placeholder="********"></p>
<a class="submit"><input style="color:blue" type="submit" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
</a>
</form>
</div>
</body>
</html>
Use type="button" in the input button used for submit form like this
<a class="submit"><input style="color:blue" type="button" id="loginbutton" onclick="check(this.form)" name="commit" value="Login"><br>
<label id="userMessage" style="visibility:hidden;"></label>
Ref : How to prevent page from reloading after form submit - JQuery
your page is reloaded since you are using type=submit i guess.
I want to make a button that allows me to attach files, but what I have found is that I do it with input:
<input type="file></input>"
But I want to do it with a button using jQuery bootstrap that allows me to put any message on the button, something like:
<button btn btn-primary> Attached to me </button>
And in turn make the effect of it being pressed and changing depending on which button is selected, something like this:
Effect button pushed
This could be an approaching:
if (window.FileReader) {
$('#inputImage').change(function () {
var fileReader = new FileReader(),
files = this.files,
file;
if (!files.length) {
return;
} else {
$('#upload-file').addClass('active');
}
});
} else {
$('#upload-file').removeClass('active');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<label class="btn btn-primary" id="upload-file" title="Upload image file" for="inputImage">
<input id="inputImage" class="hide" accept="image/*" name="file" type="file">
Upload new image
</label>
Use <input type="file"></input>. I think the syntax errors are really annoying you. Also, use something like onclick="//function". I dont know css but you should make a function in javascript which will, for example, change a <button> value using document.getElementById(buttonId).innerHTML. Work your way with the design.
HTML:
<input type="file" id="test" style="display:none"/>
<button id="testbtn" class="button">Attached to me</button>
JQuery:
$('#testbtn').click(function(){ $('#test').trigger('click'); });
Any CSS you want:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Hope this helps.
https://jsfiddle.net/hog0rozg/
hello am trying to put a text or image inside a button can anybody help me doing this here is what i have done
<div id ="bss"><input class="but" type="button" /><center>Mohammad ghazi istanbouly</center></div>
<style type="text/css">
.but{
width:100px;
height:35px;
box-shadow: 5px 5px 10px #777;
position: absolute;
top:20px;
left:22px;
background-color: #000;
background: rgba(0,0,0,0.86) ;
border-radius: 15px;
color: yellow ;
}
</style>
<script type="text/javascript">
var bss_node = document.getElementById("bss");
bss_node.style.color = "#000" ;
bss_node.style.fontSize ="50px" ;
bss_node.style.border = "1px solid #000" ;
bss_node.style.boxShadow ="10px 5px 10px #777" ;
bss_node.style.borderRadius ="15px"
var but_node = document.getElementById("but") ;
but_node.innerText="Log in"
</script>
so please anyone correct me and show me how to enter a text inside the button also the image thanks for your helping (Y)
First, the <center> tag is deprecated, so don't use it; second, and more to the point, you could just (literally) put in image inside of a <button>:
<button><img src="path/to/image.png" /></button>
To include text, then (as implied, above), the <button> element can contain (non-interactive) HTML elements, such as:
<button><p>Whatever text you'd like to enclose</p></button>
If, of course, you need this image to be a background-image to the <button>, then CSS would also allow you to implement that:
button {
background-image: url(path/to/image.png);
}
References:
<button>.
<center>.
to put a text into your button use this:
<input class="but" type="button" value="SOME TEXT IN THE BUTTON" />
To insert an image into the button:
<input class="but" type="button" style="background-image: url(myimage.png)"/>
Edit: To change the size of the button so that the image fits in it use this:
<input class="but" type="button" style="background-image: url(myimage.png); width: 100px; height: 100px"/>
Simply change the two 100px with the size of your image!
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
I have 5 buttons that are coded on 1 single line. This allows me to squeeze them next to each other without any spaces in between, which is what I want.
However, if I move the code for each button down one line, there are spaces in between the buttons, which is what I don't want.
Here is the sample code for 2 buttons:
<button id="home" type="button">Home</button><button id="save" type="button">Save
</button><button id="create" type="button">Create</button>
Thanks
You could put the newline character inside your tags:
<button>btn1</button
><button>btn2</button
><button>btn3</button>
You can comment out the space between your tags so it's as if the space wasn't even there.
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>
As for the CSS, CSS lets you define attributes for multiple classes/ids/etc at the same time.
#save, #home {
margin-top: 20px;
height: 40px;
width: 240px;
}
#home { margin-left: 40px; }
Create your buttons with a class:
<button class="button" id="save">Save</button>
<button class="button" id="new">New</button>
<button class="button" id="load">Load</button>
Create a class in the CSS file:
.button {
display: block;
float: left;
width: 100px; /*For example*/
}
That will make your buttons stick together without spaces, and HTML will be more readable.
EDIT: As you use an ID, add that ID in your CSS class with a margin-left.
/* in this example, the button to the mostleft is #save, so...*/
#save {
margin-left: 10px;
}
Here is the demo
You can use the "class" attribute of the input element to define styling options which are influencing all the buttons that got the class. Let me show you:
<button id="home" type="button" class="btn-style">Home</button>
<button id="save" type="button" class="btn-style">Save</button>
<button id="create" type="button" class="btn-style">Create</button>
And in your css you have the stylings:
.btn-style{
//your css here
}
To have no space between the buttons you simply use CSS styling. But for that make, search at google. You may need styling attributes like "display, margin, float...".
Greetz
Well, it's pretty irritating that HTML does this but the way I solve it is as follows:
<button>btn1</button
><button>btn2</button
><button>btn3</button
><button>btn4</button
><button>btn5</button>
Or as other users are also suggesting, you can insert comments in-between:
<button>btn1</button><!--
--><button>btn2</button><!--
--><button>btn3</button><!--
--><button>btn4</button><!--
--><button>btn5</button>
For your problem of spaces between inline-elements such as <button>, try to write the code like that :
<button id="home" type="button">Home</button><!--
--><button id="save" type="button">Save</button><!--
--><button id="create" type="button">Create</button>
Apply common css by button selector and any specific styles by their ids
button{
margin-top: 20px;
height: 40px;
width: 240px;
}
#home{
margin-left: 40px;
}
#save{
}
This question already has answers here:
Styling an input type="file" button
(46 answers)
Closed 7 years ago.
I would like to style <input type="file" /> using CSS3.
Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window.
Is that possible to do that using HTML, CSS3, and Javascript / jQuery only ?
I have this rough example that you might want to get some idea...
html
<div id="file">Chose file</div>
<input type="file" name="file" />
CSS
#file {
display:none;
}
jQuery
var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
$this = $(this);
$('#file').text($this.val());
})
$('#file').click(function(){
fileInput.click();
}).show();
demo
After checking Reigels idea, and this one, I wrote this simple solution to the common problem of styling a type="file" input field (tested it on Firefox, Safari and Chrome).
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').innerHTML = this.value;">
</div>
Then you can of course style the "file" div as you want.
And if you want to use a type="text" input instead of a div, simply change innerHTML for value:
<div style="position:relative;">
<input type="text" id="file" style="position:absolute;" placeholder="Click here to select a file">
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="document.getElementById('file').value = this.value;">
</div>
Here is my original answer using jQuery:
<div style="position:relative;">
<div id="file" style="position:absolute;">Click here to select a file</div>
<input type="file" name="file" style="opacity:0; z-index:1;" onchange="$('#file').text($(this).val());">
</div>
I made a custom style for this as well. Check it out
JS Fiddle Demo - Custom Input type="file"
HTML
<input type="file" id="test">
<div class="button-group">
Browse
Save
Clear
</div>
<input type="text" id="testfile"></input>
CSS
body {
padding:100px;
}
input[type="file"] {
position:absolute;
display:none;
}
#testfile {
height: 26px;
text-decoration: none;
background-color: #eee;
border:1px solid #ccc;
border-radius:3px;
float:left;
margin-right:5px;
overflow:hidden;
text-overflow:ellipsis;
color:#aaa;
text-indent:5px;
}
#actionbtnBrowse, #actionbtnSave {
margin:0 !important;
width:60px;
}
JQuery
$("#browse").click(function () {
$("#test").click();
})
$("#save").click(function () {
alert('Run a save function');
})
$("#clear").click(function () {
$('#testfile').val('');
})
$('#test').change(function () {
$('#testfile').val($(this).val());
})
Also add to external resources tab:
https://github.com/necolas/css3-github-buttons/blob/master/gh-buttons.css
Here is how to do it using HTML, CSS and Javascript (without any frameworks):
The idea is to have the <input type='file'> button hidden and use a dummy <div> that you style as a file upload button. On click of this <div>, we call the hidden <input type='file'>.
Demo:
// comments inline
document.getElementById("customButton").addEventListener("click", function(){
document.getElementById("fileUpload").click(); // trigger the click of actual file upload button
});
document.getElementById("fileUpload").addEventListener("change", function(){
var fullPath = document.getElementById('fileUpload').value;
var fileName = fullPath.split(/(\\|\/)/g).pop(); // fetch the file name
document.getElementById("fileName").innerHTML = fileName; // display the file name
}, false);
body{
font-family: Arial;
}
#fileUpload{
display: none; /* do not display the actual file upload button */
}
#customButton{ /* style the dummy upload button */
background: yellow;
border: 1px solid red;
border-radius: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;
color: red;
}
<input type="file" id="fileUpload"> <!-- actual file upload button -->
<div id="customButton">Browse</div> <!-- dummy file upload button which can be used for styling ;) -->
<span id="fileName"></span> <!-- the file name of the selected file will be shown here -->
The fake div is not needed! No Js no extra html. Using only css is possible.
The best way is using the pseudo element :after or :before as an element overt the de input. Then style that pseudo element as you wish. I recomend you to do as a general style for all input files as follows:
input[type="file"]:before {
content: 'Browse';
background: #FFF;
width: 100%;
height: 35px;
display: block;
text-align: left;
position: relative;
margin: 0;
margin: 0 5px;
left: -6px;
border: 1px solid #E0E0E0;
top: -1px;
line-height: 35px;
color: #B6B6B6;
padding-left: 5px;
display: block;
}
--> DEMO
In addition of Reigel,
here is more simpler implementation. You can use this solution on multiple file input fields, too. Hope this helps some people ;-)
HTML (single input)
<input type="file" name="file" />
HTML (multiple input)
<!-- div is important to separate correctly or work with jQuery's .closest() -->
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
<div>
<input type="file" name="file[]" />
</div>
JavaScript
// make all input fields with type 'file' invisible
$(':file').css({
'visibility': 'hidden',
'display': 'none'
});
// add a textbox after *each* file input
$(':file').after('<input type="text" readonly="readonly" value="" class="fileChooserText" /> <input type="button" value="Choose file ..." class="fileChooserButton" />');
// add *click* event to *each* pseudo file button
// to link the click to the *closest* original file input
$('.fileChooserButton').click(function() {
$(this).parent().find(':file').click();
}).show();
// add *change* event to *each* file input
// to copy the name of the file in the read-only text input field
$(':file').change(function() {
$(this).parent().find('.fileChooserText').val($(this).val());
});
Here's an example that I'm using that utilizes jQuery, I've tested against Firefox 11, and Chrome 18, as well as IE9. So its pretty compatible with browsers in my book, though i only work with those three.
HTML
Here's a basic "Customizable" HTML structure.
<span>
File to Upload<br />
<label class="smallInput" style="float:left;">
<input type="file" name="file" class="smallInput" />
</label>
<input type="button" class="upload" value="Upload" style="float:left;margin-top:6px;margin-left:10px;" />
</span>
CSS
Here's a sample of my CSS
label.smallInput {
background:url(images/bg_s_input.gif) no-repeat;
width:168px;
}
JavaScript
This is the heavy lifter.
/* File upload magic form?? */
$("input.smallInput[type=file]").each(function(i){
var id = "__d_file_upload_"+i;
var d_wrap = $('<div/>').attr('id',id).css({'position':'relative','cursor':'text'});
$(this).wrap(d_wrap).bind('change blur focus keyup click',function(){
$("#"+id+" input[type=text]").val($(this).val());
}).css({'opacity':0,'zIndex':9999,'position':'absolute'}).removeClass('smallInput');
obj = $(this);
$("#"+id).append($("<input/>").addClass('smallInput').attr('type','text').css({'zIndex':9998,'position':'absolute'}).bind('click',function(e){obj.trigger('click');$(this).blur();}));
obj.closest('span').children('input.upload[type=button]').bind('click',function(e){
obj.trigger('click');
$(this).blur();
});
});
/* ************************ */
Explanation
The HTML is pretty straight forward, just a simple element, i include the button so it can be named independently from the rest, sure this could be included in the JavaScript, but simply put, I'm a bit on the lazy side. The code searches for all inputs with a class of smallInput that have the type of file this allows you to define default HTML and fallback form structure in case a browser decides to be a pain.
This method only uses JavaScript to ensure delivery, it does not alter any browser behaviors in regards to the file input.
You can modify the HTML and JavaScript to make it very robust, this code suffices my current project so i doubt I'll be making any changes to it.
Caveats
Different browsers treat the value of the file input differently, which in chrome results in c:\fakeroot\ on windows machines.
Uses anonymous functions, (for lack of a better word) which means if you have too many file inputs you can cause the browser to behave slowly on processing.
Ran into the same issue today, but it seems there's an easy way to have your own styles - hide the input, and style the associated label:
<div class="upload">
<label for="my-input"> Upload stuff </label>
<input type="file" id="my-input" name="files[]" />
</div>
CSS:
.upload input{
display: none;
}
.upload label{
background: DarkSlateBlue;
color: white;
padding: 5px 10px;
}
Works in latest Chrome, Firefox and IE 10. Didn't test others
While Reigel's answer conveys the idea, it doesn't really have any style attached to it. I came across this problem recently and despite the plethora of answers on Stack Overflow, none really seemed to fit the bill. In the end, I ended up customizing this so as to have a simple and an elegant solution.
I have also tested this on Firefox, IE (11, 10 & 9), Chrome and Opera, iPad and a few android devices.
Here's the JSFiddle link -> http://jsfiddle.net/umhva747/
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
$('.uploadButton').click(function() {
var fileName = $("#fileUpload").val();
if (fileName) {
alert(fileName + " can be uploaded.");
}
else {
alert("Please select a file to upload");
}
});
body {
background-color:Black;
}
div.upload {
background-color:#fff;
border: 1px solid #ddd;
border-radius:5px;
display:inline-block;
height: 30px;
padding:3px 40px 3px 3px;
position:relative;
width: auto;
}
div.upload:hover {
opacity:0.95;
}
div.upload input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.uploadButton {
background-color: #425F9C;
border: none;
border-radius: 3px;
color: #FFF;
cursor:pointer;
display: inline-block;
height: 30px;
margin-right:15px;
width: auto;
padding:0 20px;
box-sizing: content-box;
}
.fileName {
font-family: Arial;
font-size:14px;
}
.upload + .uploadButton {
height:38px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post" enctype="multipart/form-data">
<div class="upload">
<input type="button" class="uploadButton" value="Browse" />
<input type="file" name="upload" accept="image/*" id="fileUpload" />
<span class="fileName">Select file..</span>
</div>
<input type="button" class="uploadButton" value="Upload File" />
</form>
Hope this helps!!!
Here is a solution with a text field where the user types in the (relative) pathname of the file copy on the server (if authorized) and a submit button to browse the local system for a file and send the form:
<form enctype="multipart/form-data" action="" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
<p><input type="file" name="upload_file" id="upload_file" size="40"/></p>
<p><input type="text" id="upload_filename" name="upload_filename" size="30" maxlength="100" value="<?php echo htmlspecialchars($filename, ENT_COMPAT, 'UTF-8'); ?>"/>
<input type="submit" class="submit submit_upload" id="upload_upload" name="upload_upload" value="Upload"/></p>
</form>
The scripting part hides the file input, clicks it if the user clicks on the submit button, submits the form if the user has picked up a file. If the user tries to upload a file without entering a filename, the focus is first moved to the text field for the filename.
<script type="text/javascript">
var file=$('#upload_file');
var filename=$('#upload_filename');
var upload=$('#upload_upload');
file.hide().change(function() {if (file.val()) {upload.unbind('click').click();}});
upload.click(function(event) {event.preventDefault();if (!filename.val()) {filename.focus();} else {file.click();}});
</script>
Simply style the submit button for a perfect result:
.submit {padding:0;margin:0;border:none;vertical-align:middle;text-indent:-1000em;cursor:pointer;}
.submit_upload {width:100px;height:30px;background:transparent url(../images/theme/upload.png) no-repeat;}
This is my method if i got your point
HTML
<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>
When you retreive the value of an input field, browser will return a fake path (literally C:\fakepath[filename] in Chrome). So I would add the following to the Javascript solutions:
val=$('#file').val(); //File field value
val=val.replace('/','\\'); //Haven't tested it on Unix, but convert / to \ just in case
val=val.substring(val.lastIndexOf('\\')+1);
$('#textbox').val(val);
Ofc, it could be done in a single line.