Above is what I am trying to create as a login form (although there should be a mirror of 'login' after the right brace that says 'signup'). I'm having trouble getting the objects to line up horizontally as I wish. The second image (below) shows what I have. Yikes.
I obviously don't want the fieldset around it, but I our it there to try and group the username and password fields. Here is my code thus far. The HTML:
<head>
<meta content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
<script type="text/javascript" src="{{ STATIC_URL }}jquery1-6.4.min.js"></script>
<link rel="stylesheet" href="{{ STATIC_URL }}login.css" type="text/css"/>
</head>
<script>
function login(){
if($('username').text === '') alert('Please enter your username');
else if($('password') === '') alert('Please enter your password');
$('loginForm').submit();
}
</script>
<body>
<img src="{{ STATIC_URL}}logo.png" class='center'>
<br/>
<span class='login_signup_button'>
<a title='click to login' onClick='login()'>
login
</a>
</span>
<form method = 'POST' action='login' id='loginForm'>
<fieldset>
<label for="username">username</label>
<input type="text" id="username" face="helvetica"/>
</br>
<label for="password">password</label>
<input type="password" id="password" face="AmericanTypewriter"/>
</fieldset>
</form>
<span class='login_signup_button' value='submit'>
<a title='signup for omnicloud' href='signup' class='login_signup_button'>
signup
</a>
</span>
</body>
and the CSS (which is imported into the HTML):
#font-face{
font-family:AmericanTypewriter;
src:url('AmericanTypewriter.TTF');
}
body{
background-color:rgb(48,94,255);
}
image.center{
/*display: block; */
margin-left: auto;
margin-right: auto;
width:500px;
}
/* Used for braces */
h1{
font-family:AmericanTypewriter;
font-size:234pt;
color:rgb(249,255,41);
}
/* Used for login, signup, username, password */
p{
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}
fieldset{
border: 10px solid rgb(255,255,255);
width: 500px;
margin: auto;
}
a{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255);
}
.login_signup_button button{
background-color:rgb(48,94,255);
font-family:AmericanTypewriter;
font-size:42pt
color:rgb(255,255,255)
border-bottom:0;
border-right:0;
border-top:0;
border-left:0;
display:block;
}
.login_signup_button a:hover{
background-color:rgb(249,255,41);
color:rgb(48,94,255);
}
EDIT: updated code to fix the action of login, added js function, formatted labels for s
Something like this. (Just a rough start).
Note that I'm using an image for the brackets (not seen here). I don't know which version of American Typewriter you're using, but I doubt it will look that thin at that size, and it's probably not worth loading an entire weight of a typeface just for those two characters. Sometimes an image is just better, even though it might not seem as elegant.
Note that I'm a common image replacement technique for the logo. This is better for SEO that simply using an <img> with alt text. (Which you should always include if you choose that route instead.)
Edit: And if you do want to use the font for the brackets, you might try using CSS :before and :after pseudo-classes to add the content around the fieldset or whatever you use as your container for those form elements.
It appears you want to maintain grouping of fields which fieldset provides but not happy with the lines around those fields. If that is the case then you can mark filedset border as none.
fieldset {
border: none;
}
I believe what you are trying to do is to have the input field show next to your text label.
This is how i would write the HTML:
<body>
<img src="logo.png" class="center"/>
<div id="signin">
<form action="path-to-submit" method="post">
<label for="username-field">Username</label>
<input id="username-field" type="text" name="username"/><br/>
<label for="password-field">Password</label>
<input id="password-field" type="password" name="password"/><br/>
<input type="submit" value="Login"/>
Signup for Omnicloud
</form>
</div>
</body>
Because and are inline elements, they will show up next to each-other. Using the br tag will create a line-break for the next set of fields.
Related
I'm trying to integrate an html page(which already has lots of formatting, links to css files, .js files etc) in to asp.net
The problem is that some of the styles used in the html refer to a form element, like this:
#Area form input[type="mytype"] {
content: '';
position: absolute;
display: block;
}
When I try to wrap this up in an asp.net page, it loses the formatting, because I need to put everything inside an asp.net 'form' with runat="server". The Css gets confused because it's now a form within and area within a form.
<!DOCTYPE html>
<html>
<head>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/all.css" rel="stylesheet">
</head>
<body>
<form method="post" action="uitest.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTUxMTcwNzgxMGRk/FKLdutHp78brNcMIqdbHqG7TcPZ3FoZf+HMkhw=" />
</div>
<div id="feature">
<div class="validate-form">
<span class="icon"></span>
<input class="required-email" type="email" placeholder="Email address">
<button class="btn"><span>Apply now</span></button>
</div>
</div>
</form>
</body>
</html>
What's the best way round this? Can I just rename 'form' to something else in the Css?
thanks
You should not have a nested form in a Web Forms app. If your CSS styles aren't being applied, your selector isn't targeting your elements properly or your selected has lower specificity than another selector with conflicting styles. runat=server has nothing to do with it, as that attribute is not actually rendered on the page.
Now, it appears you have an illegal type for your input. Based on your selector, you should have a structure something like:
<div id="Area">
...
<form>
...
<input type="mytype" /> //ILLEGAL!!
</form>
</div>
Why do you have a mytype input? You should only be using valid types, like text. Change them, and then add this:
#Area form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If your inputs don't get a red background, then adjust to this:
form input[type="text"]{
background-color:red !important; //This is just for testing, don't put into production!
}
If you are still having trouble, actually paste your source code (click View Source from your browser, not Visual Studio).
UPDATE
Why do you have #Area in your selector? There is not element in your markup with that ID. This selector will work:
form input[type="email"]{ ... }
Assuming you don't need to be able to interact with the input elements in the page's code-behind file, it's perfectly acceptable to just use literal HTML controls in the page's markup.
Assuming, also, that you are allowed to tweak the CSS, you can remove form from your selectors, and then just make sure you copy everything into a <div> ... </div> with an id="Area" attribute.
CSS:
#Area input[type="whatever"] {
content: '';
position: absolute;
display: block;
}
HTML:
<div id="Area">
...
<!-- add markup here -->
...
</div>
I'm currently using following login form where I want to change the design a bit:
http://html-form-guide.com/php-form/php-login-form.html
I want to place ' Login ' into the middle of the box, instead the left:
I've also found out that you can change the textsize, font etc. in fg_membersite.css (line 17). What's interesting is that in Chrome it IS displayed in the middle, only in Firefox it's shown on the left. Since I'm a new CSS worker I wanted to ask if anybody could help me fixing this incompatiblity problems here.
Since it also contains lots of Javascript based stuff I wasn't sure if I posting source codes here would be sensible, because I'd have to post the whole source anyway then.
Thanks in advance!
EDIT: Much prettier now. Thanks:
http://rapidhdd.com/images/4013242013-10-06_1842.png
Use this for the center text part:
<form id='login' action='login.php' method='post' accept-charset='UTF-8'>
<fieldset >
<legend align="center">Login</legend>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password' maxlength="50" />
<input type='submit' name='Submit' value='Submit' />
</fieldset>
</form>
I guess you've changed the HTML code but note the: <legend align="center">Login</legend>
align="center"
http://jsfiddle.net/4szBC/
EDIT:
Since it seems like align is deprecated you, can do this using by using css.
legend {
text-align: center;
}
If you want the css right in HTML, add it in a <script> tag and place it in <head>. Like this:
<script type="text/css">
legend {
text-align: center;
}
</script>
http://jsfiddle.net/4szBC/1/
add to submit button few CSS rules:
input[type=submit] {
display: inline-block;
margin: 0 auto;
padding: 10px 30px;
}
I am trying to make two hyperlinked buttons go side by side. I saw this question but can not make the answers work. Below are my two attempts to make the buttons go side by side. The first attempt works but hyperlinks to the wrong location. The second one hyperlinks correctly but is not side by side. The third based on this question doesn't link anywhere but I think that has to do with using links instead of Javascript:submitRequests().
<!DOCTYPE html>
<html>
<body>
<head>
<style>
.container {
overflow: hidden;
}
button {
float: left;
}
button:first-child {
margin-right: 5px;
}
</style>
</head>
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 1
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
</form>
Attempt 2
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2">
</form><form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit">
</form>
Attempt 3
<div class="container">
<button onclick="http://trinker.github.io/qdap_dev/paste2.html">paste2</button>
<button onclick="http://trinker.github.io/qdap_dev/colSplit.html">colSplit</button> text
</div>
</body>
</html>
If you just need plain links to work, just use links and style them to look like buttons (see also Styling an anchor tag to look like a submit button):
<style>
.button {
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
font: menu;
color: ButtonText;
display: inline-block;
padding: 2px 8px;
}
</style>
<div class="container">
paste2
colSplit text
</div>
You could also do <button>paste2</button> but this is not actually legal HTML5. FWIW, Firefox does seem to render it correctly though.
buttons would line up side by side automatically since they're display: inline-block by default (I think). I'd remove the float: left since it could be causing some issues when nesting.
You should never nest forms. It'll lead to some really screwy things.
However, if you want two forms side by side you can make them do that by adding display: inline to them. Here's a small demo: http://jsbin.com/UgaMiYu/1/edit
The onclick attribute should't make any difference at all.
I just tried to add css to attempt 2. how about this:
HTML:
<form action="http://trinker.github.io/qdap_dev/paste2.html" target="_blank">
<input type="submit" value="paste2"/></form>
<form action="http://trinker.github.io/qdap_dev/colSplit.html" target="_blank">
<input type="submit" value="colSplit"/>
</form>
CSS:
form{
float:left;
}
DEMO: http://jsfiddle.net/uzDZN/
NOTE: Add class to form which has this buttons. Otherwise css may effect other form elements in website.
Utilizing regular buttons and setting their display property to either inline or inline-block worked for me.
I need to display 2 buttons using jquery mobile and the code is here: http://jsfiddle.net/kiranj/rQ3mh/3/
However, I need to make sure
1) first button is left aligned, has a fixed width of 40% and
2) second button is right aligned, has a fixed width of 40%
Seems like I am missing some important thing in achieving this simple looking functionality. Appreciate any help
For reference, here is the code:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<br/><br/><br/>
<div data-role="fieldcontain">
<input type="submit" name="agree" data-inline="true" data-corners="false" data-theme="b" id="pageptosagree" value="Agree" />
<input type="submit" data-inline="true" data-corners="false" name="notAgree" id="pagetosdonotagree" value="I Do Not Agree" />
</div>
</body>
</html>
Here is the css:
div.divinput div{
overflow: hidden;
}
div.divinput div.buttonleft div{
width:40%;
float:left;
}
div.divinput div.buttonright div {
float:right;
width:40%;
}
.clear {
clear: both;
}
Change CSS in jquery CSS code to:
`.ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c {
float: right; //just add this single property. Everything will work.
font-family: Helvetica,Arial,sans-serif;
text-decoration: none;
}`
You can find the Jquery CSS that you are using here
If you add/overwrite some CSS properties that originally are in jquery.mobile-1.1.0.min.css i think you will get the result you want. Try the below code:
CSS
.ui-btn{
width:40%;
}
.ui-btn-up-c,
.ui-btn-hover-c{
float:right;
}
HTML
<div data-role="fieldcontain">
<input type="submit" name="agree" id="pageptosagree" data-inline="true" data-corners="false" data-theme="b" value="Agree" />
<input type="submit" name="notAgree" id="pagetosdonotagree" data-inline="true" data-corners="false" value="I Do Not Agree" />
</div>
Hope it can help you!
I was just testing this: http://jsfiddle.net/rQ3mh/8/
Please note that this is not a proper way to style it. Just to see if it works
The reason it doesn't work is because once the interface is applied there is no class .buttonleft or .buttonright (Inspect the element to see the class names) Therefore the only way to address those divs is by number. Maybe you should check the documentation around jquery mobile and how to apply class to the interface or at leas inherit it from the <input>
Hope that helps a little.
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>