I will like to translate this full code into a zend form with all the ids, html image elements, the classes, the spans. Everything. Am finding it difficult to add the image and to group the elements accordint to the divs and spans.
I will be grateful if anyone could help me. Thank you.
<form method="get" action="/search" name="searchForm" id="searchForm">
<div class="logo">
<a href="http://trial.com" title="Trial" name="trialLogo">
<img width="205" height="40" alt="Trial Search" src="..image/logo.png">
</a>
</div>
<input type="hidden" value="/Listing" name="ref_uri">
<div class="inputBlock">
<span class="inputWrapper"><input type="text" class="labelMagic fieldHelpText" tabindex="3" id="what" name="what" autocomplete="off"><input type="hidden" name="listingId"></span>
</div>
<div class="inputBlock">
<span class="inputWrapper"><input type="text" autocomplete="off" value="Location" class="labelMagic" tabindex="4" id="where" name="where"><input type="hidden" name="geoId"></span>
</div>
<div class="submitWrapper"><button class="goButton" tabindex="5" name="go" type="submit">Go!</button>
</div>
</form>
You could certainly employ a collection of configured HtmlTag decorators to perform all this wrapping, including setting the attributes on all these divs and spans.
But perhaps easier would be to simply employ a ViewScript decorator for the form. A good example appears on this MWOP Dev Zone article.
Related
i've been searching for this and couldn't find any answers specific for my need:
I have a really big form, which i want to slice in components. My form looks like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<div ngModelGroup="someInfo">
<input type="text" ngModel>
<input type="text" ngModel>
</div>
<div ngModelGroup="someOtherInfo">
<input type="text" ngModel>
<select ngModel>SomeOptions</select>
</div>
</form
I want to create separate components for these groups so when i check form.value it sees the groups, something like this:
<form #form="ngForm" (ngSubmit)="onSubmit(form)">
<some-info-component ngModelGroup="someInfo"></some-info-component>
<some-other-info-component ngModelGroup="someOtherInfo"></some-other-info-component>
</form>
so how do i make this work, when i try to access form.value.someInfo it is empty object, i've tried with ControlValueAccessor but it only works when i give these components [ngModel] but not with ngModelGroup
I'm trying to force a <label/> and its <input/> to stay on the same line.
I'm using the form-control class to make the <input/> pretty. However, when I do so, it REALLY wants to put itself on a separate line. I'm avoiding using rows and columns because I want the label right next to the textbox, not to move around depending on the size of the screen.
<div>
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
I want this:
Search [______________________]
I get this:
Search
[_____________________]
How do I force them to stay on the same line?
http://embed.plnkr.co/qA2s5RGRpvfRa7rhiq1n/preview
What you are looking for is referred by Bootstrap as an inline form or horizontal form.
<form class="form-inline" role="form">
<div class="form-group">
<label class="form-label">Search</label>
<input type="text" class="form-control">
</div>
</form>
Make sure your form has the form-inline class on it and realistically they should be wrapped in a form-group. The inline form make everything in one line.
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Search</label>
<div class="col-sm-10">
<input type="text" class="form-control">
</div>
</div>
</form>
When using form-horizontal, the form-group acts like a row, so you can move content to separate lines :) With that, you would need to use grid properties so the label/input is properly aligned.
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>
I am creating a form that requires the user to input their name and email address. The first line of the form has two inputs side by side for each part of the name and the 2nd line has one input for the email address that should be the same width as the first line combined. I'm trying to use the fluid grid system but can't line up the 2nd row with the first.
<form action="/subscriptions" method="post">
<fieldset>
<div class="control-group">
<label class="control-label" for="name">Name</label>
<div class="controls row-fluid">
<input class="span2" id="first_name" name="first_name" placeholder="First" required="required" type="text">
<input class="span2" id="last_name" name="last_name" placeholder="Last" required="required" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls row-fluid">
<input class="span4" id="email" name="email" type="email">
</div>
</div>
</fieldset>
</form>
http://jsfiddle.net/sguha095/v4amX/
Have a look a this jdfiddle: http://jsfiddle.net/kY5LL/18/
I added some div.row-fluid containers per row of your form and one extra set of inputs for demonstration.
Hope this is what you were looking for.
First we need to clean up the HTML a bit, there is an extra closing div on the first line.
I just added some classes to improve the styling so you could see how it works. The input-block-level class is a bootstrap mixin to force inputs to act like true block level elements. That's needed if you want this to be clean and to leverage the benefits of CSS. If you want to do all of your styling with HTML, then you can do so with more markup and less semantic methods, but I would recommend against it.
Hope this helps!
http://jsfiddle.net/kY5LL/12/
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 :)