I have this HTML file for a simple Login page
<g:HTMLPanel>
<div class="login">
<div class="heading">
<h2>Sign in</h2>
<form action="#">
<g:Label ui:field="lblError" styleName="errorFields"></g:Label>
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" placeholder="Username or email" ui:field="txtUserName"/>
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon"><i class="fa fa-lock"></i></span>
<input type="password" class="form-control" placeholder="Password" ui:field="txtPassword"/>
</div>
<button type="submit" class="float" ui:field="btnSubmit">Login</button>
</form>
</div>
</div>
Now is there a way I can bind this in my GWT .
I put this Html in my uibinder.xml file...
But then it says
Type mismatch: cannot convert from InputElement to TextBox
But if i change the input to GWT textbox , whole styling disturbs.
I want to have the exact same styling/effects of this html file in my GWT.
Please advice.
First of all the error you receive just means that in your java file (for this uiBinder) you've mapped txtUserName wrong;
yours is like:
#UiField
TextBox txtUserName;
Change it to
#UiField
InputElement txtUserName
But be aware - InputElement will have really small amount of functions to work with. You can "convert" this line
<input type="text" class="form-control" ui:field="txtUserName"/>
to
<g:TextBox setStyleName="form-control" ui:field="txtUserName">
You can then set the placeholder in your java file (in the constructor after the uiBinder call):
txtUserName.setAttribute("placeholder", "Username or email");
And to be sure your style is not overriden by GWT default theme - please check your ...gwt.xml file does not contain not commented lines like:
<inherits name='com.google.gwt.user.theme.standard.Standard'/>
First of all: yes it is possible to bind to existing input elements. I used it myself for creating a login form, which should be able to allow autofill of username/password. (As far as I remember that was only possible in some browsers if the input elements were already existing during page load contained in HTML not added by GWT).
You can create a textbox that binds to the existing input element using TextBox.wrap(element) and PasswordTextBox.wrap(element) like that:
Element elemUsername = DOM.getElementById("login_username");
Element elemPassword = DOM.getElementById("login_password");
txtUserName = TextBox.wrap(elemUsername);
txtPassword = PasswordTextBox.wrap(elemPassword);
As a consequence, you would have to remove the ui:field tags in your HTML file.
And either you change the the #UiField annotation to #UiField(provided = true) for these textboxes in your java file and wrap the elements in the constructor of the form - or you have to remove this annotation completely and bind events manually (by code) if you need them.
Related
I want to do this in html:
<div class="input-group" id="name">
<input type="text" class="form-control" name="name" placeholder="Name">
<span class="input-group-addon">None</span>
</div>
I try this in GWT Bootstrap:
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name"/>
<b:InputGroupAddon>
<b:Anchor ui:field="noName" text="None"/>
</b:InputGroupAddon>
</b:InputGroup>
But thus I get the error:
Illegal child <b:Anchor text='Name' ui:field='noName'> in a text-only context. Perhaps you are trying to use unescaped HTML where text is required, as in a HasText widget?: <b:InputGroupAddon> (:56)
Why? b:Anchor implements HasText interface.
My aim is to add a link on which, when a user clicks input will fill value NONE
The HasText bit is about InputGroupAddon, not Anchor. "Text-only context" (implied by implementing HasText) means you can only put, well, text into that widget. Either through the text property (<b:InputGroupAddon text='Name' />) or inside the tags (<b:InputGroupAddon>Name</b:InputGroupAddon>) - those declarations are equivalent. You can't put unescaped HTML or widgets in such a context.
For your use case, I'd recommend using buttons (as the Bootstrap docs suggest):
<b:InputGroup>
<b:TextBox b:id="name" placeholder="Name" />
<b:InputGroupButton>
<b:Button ui:field="noName" text="None" />
</b:InputGroupButton>
</b:InputGroup>
See the demo to see it in action. You can easily style it to your needs (maybe no text and just an icon = "ERASER").
I Wanted to know if a <form> can contain many <fieldset> in it? Or is it better to use <div> instead? In my case, I want to design a sophisticated responsive designed <form> with many different kinds of <input>.' And if so, do theshould be in his own` alone?
Better like this :
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</fieldset>
</form>
Or like this :
<form action="#" method="POST">
<div id="input1-wrapper">
<h3>Input 1</h3>
<input type="texte" name="input1" placeholder="input1">
</div>
<div id="input2-wrapper">
<h3>Input 2</h3>
<input type="texte" name="input2" placeholder="input2">
</div>
</form>
Multiple Fieldsets in a form are allowed. Example: Data entry fields in one fieldset and action buttons ('submit,' 'cancel' etc.) in a separate fieldset.
Fieldset should always have a legend tag according to the standards.
Actually, Fieldsets are just another 'display' block level element. i.e. think of it as a 'fancy div'. It can be used anywhere a 'block level element' can. It has no 'special knowledge' of what is inside it. As the 'legend' is a separate element that it can be styled individually with CSS.
being pedantic ;-/
www.whatwg.org/specs/web-apps/current-work/multipage/forms
Extracted text: ' ..., one can use the fieldset element. The title of such a group of controls is given by the first element in the fieldset, which has to be a legend element.'.
It looks a lot nicer that a 'div' with headings, in my opinion. To the point that I use it outside of forms for grouping things. Try getting that text in the border with CSS.
<form action="#" method="POST">
<fieldset id="input1-wrapper">
<legend>Input 1</legend>
<input type="text" name="input1" placeholder="input1">
</fieldset>
<fieldset id="input2-wrapper">
<legend>Input 2</legend>
<input type="text" name="input2" placeholder="input2">
</fieldset>
</form>
With Bootstrap 3, form input element size does not change as specified by size attribute, code snippet:
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" size="50">
I understand that there are workarounds to shorten the length of an input element but, help me understand why doesn't it work with size attribute of input element?
Working code at bootply.
Thanks!
There are a couple things you could do. You could use Bootstrap's col-* classes to change how your form lays out, or you can either modify the CSS or add inline styles to your inputs (such as <input ... style="width:200px;">).
I would personally try to use the col-* classes for consistency, even though it adds a bit more markup to your pages. As an example, something like this:
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1" class="col-sm-4">Email address</label>
<div class="col-sm-8">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" size="50" type="email">
</div>
</div>
...
I'd also try to follow the documentation and examples from the Bootstrap docs.
if you are using bootstrap 3 try placing your inputs in a div
<div class="col-md-6">
<input class="form-control" id="exampleInputEmail1" placeholder="Enter email" type="email" />
</div>
If you're using Visual Studio then you might want to remove Microsoft's defaults in the Site.css which contains:
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
I have this situation in which I show 1 form in two steps. So to proceed to the second part of the form you have to click on a button. But before moving on I would like to perform form validation (all required fields need to be filled in). But because this is a normal button, the whole submit magic is not triggered and the validation does not happen. So the question I'm interested in is how can I trigger form validation in my controller ? It would even be better to trigger validation for specific fields. Just to give an idea, the form looks like
<form name="form" submit="save()">
<section id="step1">
<label for="username" required>Username</label>
<input type="text" name="username" ng-model="user.username" required />
.....
<button ng-click="proceed()">Proceed</button>
</section>
<section id="step2">
<label ...></label>
<input...>
....
<button type="submit">Save</button>
</section>
</form>
Also, I don't want to opt for disabling the button until all required fields are valid.
Take a look at the ng-form directive. It allows nesting forms (actually not HTML <form>s, but Angular NgFormControllers). So you can split your one form, used for posting to the server, into two logical forms, used for independent validation:
<form submit="save()">
<div ng-form="form1">
...controls...
<button ng-click="proceed()"
ng-disabled="form1.$invalid">Proceed</button>
</div>
<div ng-form="form2">
...controls...
<button type="submit"
ng-disabled="form2.$invalid || form1.$invalid">Submit</button>
</div>
</form>
You can access the $valid property from your controller. Something like this could work.
$scope.proceed = function(){
if($scope.form.username.$valid){
//username is valid we may proceed to the next step
}
};
<button ng-click="proceed()">Proceed</button>
Replace To :
<button ng-click="proceed()" ng-disabled="form.$invalid">Proceed</button>
Button will not visible button until all required fields are valid.
DEMO
This question already has an answer here:
Closed 12 years ago.
Possible Duplicate:
Need to change smarty file into zend file
Hi I have a one tpl file with the name of login.tpl in smarty..so now i need to create a form like login.php and ini file for this form in zend framework..
here is the example code..so need to convert to form and ini file for this in zend..
/* login.tpl file */
<div id="add-user-form" class="form">
<form action="/account/login" method="post">
{{input_text type="hidden" name="redirect_url" value=$smarty.server.REDIRECT_URL|default:"/"}}
<div class="contain">
<div class="fieldgrp">
<label> </label>
<div class="field"><p><h3>Enter User Credentials</h3></p></div>
</div>
<div class="fieldgrp">
<label for="login_name">Username </label>
<div class="field">{{input_text name="login" id="login_name" class="longfield" maxlength="100"}}</div>
</div>
<div class="fieldgrp">
<label for="login_password">Password </label>
<div class="field">{{input_text type="password" name="password" id="login_password" class="longfield" maxlength="100"}}</div>
</div>
<div class="fieldgrp">
<label> </label>
<div class="field"><input type="submit" value="Login" /></div>
</div>
</div>
</form>
</div>
You have a couple of options:
create a Zend_Form element and assign decorators to get the output you want
create a Zend_Form element and render it using the view script decorator to duplicate the layout of the form (easier then no. 1 but the level of reuse is low)
create the form using plain old html (you loose automatic rendering of errors, and need to output the value of each element manually)
use Smarty as your View in Zend Framework (it has the same cons as the option no.3)
Whichever path you choose you will have to get your hands dirty and learn something new. ZF documentation is a place to start. But be warned, Zend_Form is not for the faint of heart :)