This question already has answers here:
Symfony - Add class to form tag
(2 answers)
Closed 5 years ago.
I'm looking to add some class attribute in my form using symfony form builder.
I have found how to do this for input and label, but not for the form tag.
$builder->add('label', TextType::class,
[
'attr' => ['class' => 'a'], // for input
'label_attr' => ['class' => 'b'], // for label
]
);
But the render is the following:
<form method="POST">
<label for="label" class="b">Label</label>
<input type="text" class="a" name="label">
<button type="submit">Create</button>
</form>
And i just want
<form method="POST" class="c">
I tried the following:
$builder->->setAttribute('class', 'c');
But it didn't change anything
Either you do it in your builder, controller or your view.
Controller :
$form = $this->createForm(new FormType(), $data, array('attr' => array('class' => 'class')));
View (Twig) :
{{ form_start(form, { 'attr' : { 'class': 'class' } })
As Joe pointed out source here
Related
I am trying to create a CollectionType form with predefined/static rows (not a dynamic form w/JS).
This does what I want:
$formBuilder = $this->createFormBuilder()->add('titles', CollectionType::class, [
'entry_type' => TextType::class,
'data' => ['en' => '', 'de' => ''],
]);
but this doesn’t work (it results in no rows at all in the form):
$formBuilder = $this->createFormBuilder()->add('titles', CollectionType::class, [
'entry_type' => TextType::class,
]);
$formBuilder->get('titles')->addEventListener(FormEvents::PRE_SET_DATA, function (FormEvent $event) {
$data = ['en' => '', 'de' => ''];
$event->setData($data);
});
In the end, I am looking for a simple form like so:
<form name="form" method="post">
<div id="form">
<div><label>Titles</label>
<div id="form_titles">
<div><label for="form_titles_en">En</label>
<input type="text" id="form_titles_en" name="form[titles][en]">
</div>
<div><label for="form_titles_de">De</label>
<input type="text" id="form_titles_de" name="form[titles][de]">
</div>
</div>
</div>
</form>
I need the second approach for various reasons. Does anyone have a solution?
FYI: My current platform is Symfony 5.4 and Php 8.1 but I would like this solution to work with Php7.4 as well as Symfony 6+
Thank you to #Bossman for giving me direction. This is how I solved the problem.
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\FormBuilderInterface;
use App\LocaleProvider;
class TranslationCollectionType extends AbstractType
{
private LocaleProvider $localeProvider;
public function __construct(LocaleProvider $localeProvider)
{
$this->localeProvider = $localeProvider;
}
public function buildForm(FormBuilderInterface $builder, array $options)
{
foreach ($this->localeProvider->getSupportedLocaleNames() as $name => $value) {
$builder->add($value, TextType::class, [
'label' => $name,
]);
}
}
}
Then add to the form:
$builder->add('Titles', TranslationCollectionType::class);
At first, my objective here is to make two input fields inline, the picture is attached :
Symfony allow us to style form's field by using attr for form_widget of the field and label_attr for form_label but here i want to apply a style for the div containing the label + input that Symfony generate automatically in the twig :
$builder
->add('language', ChoiceType::class, array(
'choices' => array(
'FR' => 5,
'EN' => 1,
),
'label' => ' ',
'attr' => array('style' => 'float:left;width:40%'),
))
->add('level', ChoiceType::class, array(
'choices' => array(
'Good' => 5,
'Bad' => 1,
),
'label' => ' ',
'attr' => array('style' => 'float:left;width:40%'),
));
result : The style has been applyed to the input (select in our case) and the div parent wasn't be affected (stay with empty style):
<div id="homebundle_personnel_personnelLanguages_0">
<div> <!-- the div that i want to apply a style -->
<label for="homebundle_personnel_personnelLanguages_0_language" class="required"> </label>
<select id="homebundle_personnel_personnelLanguages_0_language" name="homebundle_personnel[personnelLanguages][0][language]" style="float:left;width:40%">
<option value="5">FR</option>
<option value="1">EN</option>
</select>
</div>
<div>
<label for="homebundle_personnel_personnelLanguages_0_level" class="required"> </label>
<select id="homebundle_personnel_personnelLanguages_0_level" name="homebundle_personnel[personnelLanguages][0][level]" style="float:left;width:40%">
<option value="5">Good</option>
<option value="1">Bad</option>
</select>
</div>
</div>
Resolved, I must treat this in the twig's level :
<div style="float:left;width:40%" >
{{ form_widget(form.language) }}
</div>
<div style="float:left;width:40%" >
{{ form_widget(form.level) }}
</div>
use:
'row_attr' => [
'class' => 'yourClass',
],
I need to validate the Email format before submitting the form in Cakephp.
I was provided an invalid email (i.e. testuser1 instead of testuser1#domain.com). The request was submitted, then got error. If email is invalid, request should not be submitted.
Very curious about what I missed in my code and also referred related questions in forum but that was not work for me. H
Code is:
//for email input
<div class="form-group">
<?= $this->Form->label("email", __('Email')); ?>
<?= $this->Form->text("email", [
'required' => true,
'label' => false,
'id' => "email",]);
?>
</div>
<div class="btn-group btn-group-spaced form-group" role="group" aria-label="Actions">
<?= $this->Form->button(__('Submit'), ['class' => 'btn orange btn-default']) ?>
<?= $this->Form->button(__('Clear'), ['class' => 'btn orange hollow btn-default ucase','id' => 'show-prof','type' => 'reset']) ?>
</div>
Try:
//for email input
<div class="form-group">
<?= $this->Form->label("email", __('Email')); ?>
<?= $this->Form->input("email", [
'required' => true,
'label' => false,
'id' => "email",
'type' => "email"
]);
?>
</div>
<div class="btn-group btn-group-spaced form-group" role="group" aria-label="Actions">
<?= $this->Form->button(__('Submit'), ['class' => 'btn orange btn-default']) ?>
<?= $this->Form->button(__('Clear'), ['class' => 'btn orange hollow btn-default ucase','id' => 'show-prof','type' => 'reset']) ?>
</div>
The 'type' => "email" will add a type attribute with the value email to the input.
Read: CakePHP Form helper.
Also, you can visit http://www.formvalidator.net/ for more validations
I am answering for my own question.
One small change needs to be done.
That is, instead of Form->text use Form->email to validate the email before submitting the form.
Code is like:
<?= $this->Form->email("email", [
'required' => true,
'label' => false,
'id' => "email",]);
?>
This question already has an answer here:
globally change ZF2 form formatting
(1 answer)
Closed 7 years ago.
I am creating a form using Zend Framework 2 and the Skeleton Application.
I want my layout to replicate the default example:
As you can see above, the form inputs stretch to the width of the screen. The code to produce this is (using just the email address field as an example):
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" placeholder="Email" id="exampleInputEmail1" class="form-control">
</div>
I would like the same result to happen when I add my own form element using Zend Framework 2 (Skeleton application). But when I add an element:
$this->add(array(
'name' => 'campaign_code',
'type' => 'Text',
'options' => array(
'label' => 'Campaign Code',
),
'attributes' => array(
'class' => 'form-control',
)
));
The resulting HTML is:
<div class="form-group">
<label>
<span>Campaign Code</span>
<input class="form-control" type="text" name="campaign_code">
</label>
</div>
Resulting in:
Notice how the label tag is surrounding the span and input elements? I don't want that. I want the label tag to close itself as in the first html example.
The form view helpers are so smart while rendering the elements from your form.
Add an id attribute with respective element
$this->add(array(
'name' => 'campaign_code',
'type' => 'Text',
'options' => array(
'label' => 'Campaign Code',
),
'attributes' => array(
'class' => 'form-control',
'id' => 'your_id',
)
));
i'm trying to override a template for some forms.
This one being one of them
public function buildForm(FormBuilder $builder, array $options)
{
$builder
->add('nombreBD','text', array( 'required' => true, 'label' => 'Nombre Base de Datos: '))
->add('Servidor','choice', array(
'choices' => array('1' => 'Si', '0' => 'No'),
'required' => true,
'multiple' => false,
'expanded' => true,
'label' => 'Servidor Existente?',
))
->add('ServidorBD','entity',
array ('class' => 'MonseWebBundle:ServidoresBD',
'multiple' => true,
'required' => true,
'label' => 'Servidor de Base de Datos: ',
'query_builder' => function(EntityRepository $er) {
return $er->createQueryBuilder('u')
->orderBy('u.url', 'ASC');
},
))
;
}
And this being the template
{% block text_widget %}
<div class="round full-width-input" id="full-width-input">
<input type="text" {{ block('attributes') }} value="{{ value }}" >
</div>
{% endblock %}
I think i succeded in the text inputs but i've got no idea how to set up the ones for the entity and the ones for the radio buttons (choice) because i don't know where the information is stored. For example, i don't quite know what block ('attributes') nor {{value}] return. Same as i don't know how to make of the radiobuttons selected.
I wanted to use this:
<label for="dropdown-actions">Dropdown</label>
<select id="dropdown-actions">
<option value="option1">Select your action here</option>
</select>
for the entity "ServidoresBD" and this:
<label for="selected-radio" class="alt-label"><input type="radio" id="selected-radio" checked="checked" />A selected radio</label>
<label for="unselected-radio" class="alt-label"><input type="radio" id="unselected-radio" />An uselected radio</label>
for the radio buttons.
Also, for a weird reason, all the labels in ALL the project appear as upper-case, no matter what style i put them. ALWAYS and this is really annoying.
Any help would be greatly appreciated.
The default form theming is stored under the Twig bridge. Here, you can find all blocks which are defined in the form theme.
Just take a look to this file & IMO, you will understand what you need to do. :)
Hope that helps.