I have this group of radio buttons in which each of individual button has of its own position set through style attribute. I would like to how can I archive the same by using drupal form api. I found how to style as whole but, not as individual control within group. Here's how my html code look like -
<input type="radio" name="base_location" checked="checked" value="0" style="margin-left:70px;float:left;"/><span style="float:left;">District</span>
<input type="radio" name="base_location" value="1" style="margin-left:50px;float:left;"/><span style="float:left;">MRT</span>
<input type="radio" name="base_location" value="2" style="margin-left:60px;float:left;"/><span style="float:left;">Address</span>
And this is the drupal code I'm stuck at -
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
I'm aware of #type=>radio existence. However, I do not know how to group all my radio buttons together in this regard. If I use same array key for all of them, they would collide each other. If I don't, they aren't seen as part of the same group. I thank you in advance.
If you're using Drupal 6.x Form API and #type=>radios (http://api.drupal.org/api/function/theme_radios/6) each radio element will have its unique id which you can use to apply proper CSS.
The example you provided
$form['base_location'] = array(
'#type' => 'radios',
'#title' => t('base location'),
'#default_value' => variable_get('search_type', 0),
'#options' => array(
'0'=>t('District'),
'1'=>t('MRT'),
'2'=>t('Address')),
'#description' => t('base location'),
);
should output markup like so:
<div id="base-location-0-wrapper" class="form-item">
<label for="base-location-0" class="option"><input type="radio" class="form-radio" value="0" name="base_location" id="base-location-0"> District</label>
</div>
<div id="base-location-1-wrapper" class="form-item">
<label for="base-location-1" class="option"><input type="radio" class="form-radio" value="1" name="base_location" id="base-location-1"> MRT</label>
</div>
<div id="base-location-2-wrapper" class="form-item">
<label for="base-location-2" class="option"><input type="radio" class="form-radio" value="2" name="base_location" id="base-location-2"> Address</label>
</div>
Apply the following CSS and you should be set.
#base-location-0-wrapper,
#base-location-1-wrapper,
#base-location-2-wrapper {
display:inline;
margin-left:50px;
}
The answer is to use CSS with the html that you already have. It looks like you just want to change the radio buttons' display to 'inline' with 10px margins, which you can do. (And if you did break the radios up into separate elements within a fieldset, they'd no longer interact with each other.)
Related
i use TYPO3 7.6.10
i use indexed_search 7.6.0
when i submit form i go to the target page and i get the results.
The url of target page is:
search.html?tx_indexedsearch_pi2%5Baction%5D=search&tx_indexedsearch_pi2%5Bcontroller%5D=Search
i want to remove action and controller variable form url to get:
search.html
i can do that adding a configuration to real url like this:
'searchConfiguration' => array(
array(
'GETvar' => 'tx_indexedsearch_pi2[action]',
'valueMap' => array(),
'noMatch' => 'bypass'
),
array(
'GETvar' => 'tx_indexedsearch_pi2[controller]',
'valueMap' => array(),
'noMatch' => 'bypass'
)),'135' => 'searchConfiguration'
Now i get a nice url but the submitted data is not sent!
How can i resolve it?
Those parameters are required for the controller to be routed by the request. Without them the sWord will not become processed by the controller and you will not get any results.
Instead of bypassing them you can rewrite them to get something like /search/perform/results/ or you can configure your form to use method="POST" instead of "GET" and add those parameters above into hidden fields of the form and make sure the form attribute does not have the arguments as parameters in the action. Example form in the result:
<form method="POST" class="header-search-form hidden-xs hidden-sm" action="suche.html">
<input type="hidden" name="tx_indexedsearch_pi2[controller]" value="Search">
<input type="hidden" name="tx_indexedsearch_pi2[action]" value="search">
<div class="input-group">
<input type="text" class="search-query form-control" placeholder="Suchen" id="default-search-input" name="tx_indexedsearch_pi2[search][sword]">
<span class="input-group-btn">
<button class="btn" type="button">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</span>
</div>
</form>
The Bootstrap Example Code
http://getbootstrap.com/css/#forms
Copying a simple email input element from getbootstrap.com suggests we format the HTML in the following way:
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input id="exampleInputEmail1" class="form-control" type="email" placeholder="Email">
</div>
Above we have a <label> tag that closes straight after it's text content, "Email address".
I would now like to create the same form group using Zend Framework.
module/MyApp/src/MyModule/Form/MyForm.php
namespace MyModule\Form;
use Zend\Form\Form;
class MyModuleForm extends Form {
public function __construct($name = null)
{
$this->add(array(
'name' => 'email_address',
'type' => 'Email',
'options' => array(
'label' => 'Email address',
),
'attributes' => array(
'class' => 'form-control',
'placeholder' => 'Email'
)
));
The Zend Framework generated code
<div class="form-group">
<label>
<span>Email address</span>
<input class="form-control" type="email" placeholder="Email" id="exampleInputEmail1">
</label>
</div>
In the above HTML you can see that Zend has not closed the <label> tag. Instead the <label> ecapsulates its children.
How do I change the way the Zend rendering works?
I assume you are using ZF2 FormRow view helper to render your form element in your view script, e.g. $this->formRow($this->form->get('email_address'));
To render it differently you need to use the following view helpers
FormLabel
FormText
FormElementErrors
If for example you wanted to render as a definition list you would use something like
<dl class="zend_form">
<dt><?php echo $this->formLabel($this->form->get('email_address')); ?></dt>
<dd><?php echo $this->formText($this->form->get('email_address')); ?>
<?php echo $this->formElementErrors($this->form->get('email_address')); ?></dd>
</dl>
I hope this points you in the right direction
my zend form generates following code:
<dt id="register_username-label">
<label for="register_username" class="required">Membername*</label>
</dt>
<dd id="register_username-element">
<input type="text" name="register_username" id="register_username" value="" />
</dd>
but in some cases (handled in a separete decorator) i need to add some more html next to the input field (also in the dd tag). i have a instance of Zend_Form_Element_Text witch i could add some more decorators, but i don't know how to get this done :(
solution should look like this:
<dt id="register_username-label">
<label for="register_username" class="required">Membername*</label>
</dt>
<dd id="register_username-element">
<input type="text" name="register_username" id="register_username" value="" />
<div class="validate"><div class="validate-check"></div></div>
</dd>
You can add decorators to your form element in form file just as below
$form->addElement(
'text',
'register_username',
array(
'required' => false,
'decorators' => array(
array(
'HtmlTag', array(
'tag' => 'div',
'class' => 'validate'
)
)
)
)
);
And more i would like to share with you one interesting Link to understand how zend form is basically works.
Please let me know if i can help you more.
i am new to zend i have coded up to some extent but dont know further how to decorate my form using decorators etc
this is my old HTML
<div class="col_6 pre_3 padding_top_60" style="padding-top:0">
<div class="widget clearfix">
<div class="widget_inside">
<p class="margin_bottom_15">Kindly enter Username and Password.</p>
<span><?= $this->error;?></span>
<form method='post' action='<?php echo $this->url(array(), 'login') ?>' onsubmit="return validateForm();">
<div class="form">
<div class="clearfix" id="div_username">
<label class="lable-2">Username</label>
<div class="input">
<input type="text" class="xlarge" name="username" id="username" value="<?php echo $this->form['username'] ?>"/>
<span id="error_message_username"></span>
</div>
</div>
<div class="clearfix" id="div_password">
<label class="lable-2">Password</label>
<div class="input">
<input type="password" class="xlarge" name="password" id="password" value="<?php echo $this->form['password'] ?>"/>
<span id="error_message_Password"></span>
</div>
</div>
<div class="clearfix">
<label></label>
<div class="input">
<input type="checkbox" name="remember" value="1" <?php echo ($this->form['remember'] == 1)?'checked="checked"':'' ?>/></span> Stay signed in
<span style="margin-left:10px">Forgot User ID or Password </span>
</div>
</div>
<div class="clearfix">
<label></label>
<div class="input">
<input type="submit" value="Login" class="medium button blue blue-1"/>
</div> </div>
</div>
</form>
</div>
</div>
This is my Form
<?php
class Application_Form_Loginform extends Zend_Form{
public function init()
{
/* Form Elements & Other Definitions Here ... */
$this->setMethod('post');
$this->addElement('text','username',array(
'label' => 'UserName :',
'required' => true,
'filters' => array('StringTrim')
));
$this->addElement('password','password',array(
'label' => 'Password',
'required' => 'true',
'filters' => array('StringTrim')
));
$this->addElement('submit','submit',array(
'ignore'=>'true',
'label'=>'Login'
));
}
}
Question is How can i make my form made with php equal to the above HTML ??
Zend Form is a pain to use, especially decorators.
You should use the View Script decorator instead.
See here: http://framework.zend.com/manual/en/zend.form.standardDecorators.html#zend.form.standardDecorators.viewScript
Aside from Zend Form decorators having a high learning curve, it mixes view code with logic and validation code.
This is not a good thing, especially if you have frontend developers styling and working with the forms.
It also makes prototyping the look of the forms difficult since you have to keep adjusting the decorator code.
With that said, Zend Form does a good job of making validation relatively painless. But one other gripe with it is that I don't think it fits well model validation.
I agree that decorators are complex, but they save a GREAT DEAL of time, when you know how to use them. We use them for our admin panel. We recently changed it from table layout to few fieldsets and divs and it took only few hours to change 70+ forms.
Your validators should be something like:
Form:
form,
htmlTag (div, class=form)
formElements
Elements:
viewHelper
error, placement => append
htmlTag (div, class input)
Label, placement => prepend
htmlTag (div, class=clearfix)
just keep in mind you need to set different keys for each htmlTag decorator, or else they would be overwritten. Like this:
....
array('inputHtmlTag' => 'htmlTag, array('tag' => 'div', 'class' => 'input'),
....
To see how I deal with complex Twitter Bootstrap decorators see https://github.com/tomasfejfar/Zend-Form-Bootstrap/blob/master/library/Bootstrap/Form.php There you can find clues how to implement your own markup.
I'm totally confused about how decorators work. This is the html structure that I'm trying to achieve:
<form id="" action="" method="post">
<fieldset><legend>Contact form</legend>
<p>
<label for="name">Name</label>
<input type="text" name="name" id="name" size="30" />
</p>
<p>
<label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</p>
<p>
<label for="web">Website</label>
<input type="text" name="web" id="web" size="30" />
</p>
<p>
<label for="message">Message</label>
<textarea name="message" id="message" cols="30" rows="10"></textarea>
</p>
<p class="submit"><button type="submit">Send</button></p>
</fieldset>
</form>
How do I get rid of the definition list format and use a paragraph tag based layout instead?
Update: Is there a way for me to apply this style to all the forms I have created? instead of having to apply the decorators to each and every form?
If you want to change the elements of your form you have to reset the Decorators of your Form and it's elements.
Example of enclosing a field in a p-tag
class Default_Form_Contact extends Zend_Form
{
public function init()
{
$name = new Zend_Form_Element_Text('name');
$name->setLabel('Name:')
->setDecorators(
array(
array('ViewHelper', array('helper' => 'formText')),
'Errors',
array('Description', array('tag' => 'p', 'class' => 'description')),
array('HtmlTag', array('tag' => 'p', 'id' => 'name-element')),
array('Label', array('class' => 'label')),
)
);
$this->addElement($name);
}
}
Which decorators you really need you have to consider yourself. For the form decorators you can do in the init()
$this->setDecorators(array(some decorators));
After a while, I just gave up and used just the ViewRenderer decorator. Here is a good post explaining how to do that (http://weierophinney.net/matthew/archives/215-Rendering-Zend_Form-decorators-individually.html). The rest of that series is good as well if you really want to know how to use decorators.
With the ViewRenderer decorator, you're basically rendering your form against a template (not unlike MVC itself). This way gives you the ultimate control over everything, but of course what you gain in flexibility, you lose in RAD, and you make up in complexity.