I am working on a form using twitter bootstrap Version 2.3.2, the form does not have any labels and each input field is using placeholder. All input fields on the form are displaying placeholder text except file upload.
I have tried adding <input class="input-xxlarge" type="file" name="service_guide"
placeholder="Upload image"/> but it does not seem to work.
Here is the HTML for fileupload
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="input-append">
<div class="uneditable-input span3">
<i class="icon-file fileupload-exists"></i>
<span class="fileupload-preview"></span>
</div>
<span class="btn btn-file">
<span class="fileupload-new">Select file</span>
<span class="fileupload-exists">Change</span>
<input class="input-xxlarge" type="file" name="service_guide"
placeholder="Upload image"/>
</span>
Remove
</div>
</div>
This is what my form looks like
I will really appreciate any help here.
According to w3.org, placeholder attribute is valid for <input> only
when type is text, search, url, tel, e-mail, password, or number.
So, you better not use placeholder attribute for <input type="file">
Related
I want to use 6 input file in one page, in a vue template
I want that user could upload six files in six different inputs. each input is like this:
<div class="form-group">
<label class="form__label font-size--15 font-w--400">
{{$t("تصویر جلو کارت ملی")}}
</label>
<div class="input-group mb-3">
<div class="custom-file ">
<input id="melliCardFront" type="file" class="custom-file-input" #change="processMelliCardFront($event)" />
<label class="custom-file-label" for="melliCardFront">انتخاب فایل</label>
</div>
</div>
<div class="file-listing">
{{ mellicard_front.name }}
<span class="remove-file" v-show="mellicard_front" v-on:click="removeMelliCardFront()">حذف</span>
</div>
</div>
but when I use this, the input files Are arranged from above of page. when I take the opacity of input file to 1, the page is like this
my problem is that when I click on top of the page, it opens an input file. or in some browsers, it opens instead of other input.how can I fix this problem?
icheck-bootstrap is a pure css checkboxes and radio buttons for Twitter bootstrap. This implies it will work with any of the frontend libraries. At least that's the way I figured it... And indeed, his use from the readme of his github page for the library :Link to icheck-bootstrap demo with docs Does work it just has a side effect that I can live with.
In at lease one place where I'm trying to use this library, the component is in a modal dialog that is used to login to the site. Below is the html template code for the component:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true" (click)="hideModal()">
<span aria-hidden="true">×</span>
</button>
<h3 class="modal-title-site text-center"> Login to Rove </h3>
</div>
<form #f="ngForm" (ngSubmit)="onSubmit()">
<div class="modal-body">
<div class="form-group login-username">
<div>
<input name="log" id="login-user" class="form-control input" size="20"
[(ngModel)]="model.email" placeholder="Enter User Email" type="email">
</div>
</div>
<div class="form-group login-password">
<div>
<input name="Password" id="login-password" class="form-control input" size="20"
[(ngModel)]="model.password" placeholder="Password" type="password">
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<span class="checkbox login-remember">
<input name="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</span>
</div>
</div>
<div>
<div>
<input name="submit" class="btn btn-block btn-lg btn-primary" value="LOGIN" type="submit">
</div>
</div>
</div>
</form>
<div class="modal-footer">
<p class="text-center">
Not here before? <a data-toggle="modal" data-dismiss="modal"
href="#ModalSignup">Sign Up.</a> <br>
Lost your password?
</p>
</div>
The code above is without the icheck-bootstrap implemented code. Below I have changed the key lines of code that will implement the checkbox as per the readme documention on the github site
<div class="icheck-success checkbox login-remember">
<input id="rememberme" value="forever" checked="checked"
[(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
this code works as per the readme, unfortunately, after the dialog has been closed the modality of the modal dialog stays and the main page behind it will not allow any input from keyboard or mouse.
Note the input tag in the effective lines, I have change from the name attribute, to the id attribute. That seems wrong to me but, it is as the documentation suggests and, the only way it will completely work. If I do not change the attribute from name to id the checkbox changes to the correct style but it will not check to show a true state. In fact if I remove the icheck-success class from the class attribute of the above div line the behavior is identical and the component will still not take input after the dialog box has been closed if I use the id attribute instead of the name attribute.
I'm using Angular V9 and the dialog component that I am using is from the Valor Software ngx-bootstrap library and, as stated, it works perfectly when I code the html input tag with the name attribute. Does any know of a workaround or possibly what is happening here? the styling is what I want on the site but not at the cost of not having the login dialog effectively lock the site up after you login.
Thanks for any info that you may have on this issue.
I have fix the problem I was having. The first part of the problem was that I was not asking the right question. I have edited the question to ask it in a better way, I think.
I have fixed the problem with the html below:
<div class="icheck-success checkbox login-remember">
<input id="rememberme" name="rememberme" [(ngModel)]="model.rememberMe" type="checkbox">
<label for="rememberme">Remember Me</label>
</div>
it seems I had to have a name attribute in the input tag for some reason that I'm not clear about at all but, this is what I did to get the modal dialog to truly clear from the page after close.
I could not figure out how to remove the "choose file" from the input button. I just want the user to be able to drag or upload the file directly by clicking on the image. This is what I have so far : here
<div class="popup-wrapper popup-wrapper-3">
<div class="popup">
<div class="popup-close">x</div>
<div class="popup-content">
<h2>Upload Your Resume</h2>
<p class="small-text">Upload your resume to complete the job application
</p>
<p class="sub">
<label>Resume:</label>
<input accept=".doc, .docx, .pdf" type="file" display="none" placeholder="" name="resume">
<img src="../images/search/apply.gif">
<p class="small-text">Click to browse the file
</p>
<button class="button vlose-button" type="button">Apply Now</button>
</p>
</div>
</div>
</div>
Welcome!
Have you tried with other browsers?
FireFox doesn't show that message.
Another thing (maybe more important), the input type="file" doesn't have placeholder attribute, and there is no "display" attribute.
If you want to use custom attributes you should use the data-* structure.
If you want to style it (i.e hide the input) you should do that with CSS.
You can read more about this here.
Hope that will point you to the right direction and Good luck!
<div class="well">
<div class="panel-title>
<span class="fa fa-caret-right" ng-if="!showGeneral"></span>
<span class="fa fa-caret-down" ng-if="showGeneral"></span>
</div>
<label>GENERAL</label>
<div ng-if="generalFormName.$valid" class="pull-right">
<i class="fa fa-check" style="color:#4cc94c;font-size:large;"></i>
</div>
<div class="panel-collapse" ng-if="showGeneral">
<general></general>
</div>
</div>
<div>
<form name="generalFormName" novalidate autocomplete="off">
<input type="text" class="form-control align" required ng-model="infor.name" />
</form>
</div>
The directive general is another html. When the required fields in that form are filled in by the user I need a check mark to displayed to the right of the label. I do not have any button to submit and send the form data and then check for validation. I just need a check mark when formname.$valid. I added an ng-if but for some reason I am not able to get it.
Can someone help me out on this? Would be of great help .
Thanks in advance.
A form in Angular makes its validation state available through its name and only to its scope and the descendant scopes. Currently the <general> directive is outside the form's scope, so it cannot access the validation data. The simplest solution is to reposition the form to enclose both the input(s) and the <general> directive:
<form name="generalFormName" novalidate autocomplete="off">
<div class="well">
...
<general></general>
...
</div>
<div>
<input type="text" class="form-control align" required ng-model="infor.name" />
</div>
</form>
If the <form> must absolutely stay where it is, you can wrap it with an ng-form and use the ng-form's validity in <general>:
<div ng-form="ngFormName">
<div class="well">
...
<general valid="ngFormName.$valid"></general>
...
</div>
<div>
<form name="generalFormName" novalidate autocomplete="off">
<input type="text" class="form-control align" required ng-model="infor.name" />
</form>
</div>
</div>
The validity of the inner generalFormName affects the validity of the wrapper ngFormName.
If neither solution works (I don't see a reason why), you can always create a directive that publishes the validity of its adjacent form to a variable in the parent scope. Using variables in the parent scope is tricky, and I believe the previous solutions should be adequate, so I will not go in details. Instead of a variable, it could invoke a callback function - expect less surprises.
I am trying to make a basic log in system. I am mixing and matching bootstrap. Signing in layout is done. When I click on sign up, it takes me to another form field and it also works. For some reason when I click on forgot password, it should take me to forgot password page but it does not and nothing happens. I have the "forgotten password" page an ID but whenever I put that ID, the sign in stops working and format messes up.
Here is my code. I added js/css bootstrap code also.
http://jsfiddle.net/8cjrj118/1/
Here is my part of my code for the forgotten password form. I took off the id of "forgotten home" from main page because it was messing everything up.
<div style="display: none;" id="form-olvidado">
<h4 class="">
Forgot your password?
</h4>
<form accept-charset="UTF-8" role="form" id="login-recordar" method="post">
<fieldset>
<span class="help-block">
Email address you use to log in to your account
<br>
We'll send you an email with instructions to choose a new password.
</span>
<div class="form-group input-group">
<span class="input-group-addon">
#
</span>
<input class="form-control" placeholder="Email" name="email" type="email" required="">
</div>
<button type="submit" class="btn btn-primary btn-block" id="btn-olvidado">
Continue
</button>
<p class="help-block">
<a class="text-muted" href="#" id="acceso"><small>Account Access</small></a>
</p>
</fieldset>
</form>
Try this:
Forgot password?
DEMO
DEMO
$('#forgot').click(function(){
$('#form-olvidado').css(
"display","block"
);
$('#loginbox').css(
"display","none"
);
});
OR
$('#forgot').click(function(){
$('#form-olvidado').show();
$('#loginbox').hide();
});
Add forgot as id to anchor tag which says forgot password ?
then add this code
Secondly two methods can be used one is using css display block or none in jquery or
Hide or show both does the trick
Another thing regarding using jsfiddle In left side menu there is a tab called external resources you have to add css and other javascript files in that menu
Go to this site it has all bootstrap and other files hosted so that it can be used on the fly