
How to create a custom form in magento?
What types of form fields are available in magento by default?
We will try to answer these questions.
In magento predefined are many different type of fields. All available type of form elements are located in folder lib\Varien\Data\Form\Element. The table below shows a list of them
Field Types:
Button | Checkbox | Checkboxes | Collection | Column |
Date | Editor | Fieldset | File | Gallery |
Hidden | Image | Imagefile | Label | Link |
Multiline | Multiselect | Note | Obscure | Password |
Radio | Radios | Reset | Select | Submit |
Text | Textarea | Time |
Code examples:
All the code’s written below are written in the class like Ave_Form_Block_Adminhtml_Form_Edit_Tab_Form inside the _prepareForm() function.
Here is how to add the fields to an admin form, with a list of all the options
Text Field
$fieldSet->addField( 'title', 'text', array( 'label' => Mage::helper('form')->__('Title'), 'class' => 'required-entry', 'required' => true, 'name' => 'title', 'onclick' => "alert('on click');", 'onchange' => "alert('on change');", 'style' => "border:10px", 'value' => 'hello world!!', 'disabled' => false, 'readonly' => true, 'after_element_html' => '<small>Comments</small>', 'tabindex' => 1 ) );
Time
$fieldSet->addField( 'time', 'time', array( 'label' => Mage::helper('form')->__('Time'), 'class' => 'required-entry', 'name' => 'time', 'value' => '08,15,30' ) );
TextArea
$fieldSet->addField( 'textarea', 'textarea', array( 'label' => Mage::helper('form')->__('TextArea'), 'class' => 'required-entry', 'name' => 'comment', 'value' => 'Comment will be here', ) );
Submit Button
$fieldSet->addField( 'submit', 'submit', array( 'label' => Mage::helper('form')->__('Submit'), 'value' => 'Submit' ) );
DropDown
$fieldSet->addField( 'select', 'select', array( 'label' => Mage::helper('form')->__('Select'), 'class' => 'required-entry', 'name' => 'title', 'value' => '1', 'values' => array('-1' => 'Please Select..', '1' => 'Option1', '2' => 'Option2', '3' => 'Option3'), ) );
DropDown (another way to use)
$fieldSet->addField( 'selectType', 'select', array( 'label' => Mage::helper('form')->__('Select Type'), 'class' => 'required-entry', 'name' => 'title', 'value' => '4', 'values' => array( '-1' => 'Please Select..', '1' => array( 'value' => array( array('value' => '2', 'label' => 'Option2'), array('value' => '3', 'label' => 'Option3') ), 'label' => 'Type' ), '2' => array( 'value' => array( array('value' => '4', 'label' => 'Option4'), array('value' => '5', 'label' => 'Option5') ), 'label' => 'Color' ), ) ) );
Radio Button
$fieldSet->addField( 'type', 'radio', array( 'label' => Mage::helper('form')->__('Radio'), 'name' => 'type', 'value' => '1' ) );
Radio Button (another way to use)
$fieldSet->addField( 'type', 'radios', array( 'label' => Mage::helper('form')->__('Radios'), 'name' => 'type', 'value' => '2', 'values' => array( array('value' => '1', 'label' => 'Radio1'), array('value' => '2', 'label' => 'Radio2'), array('value' => '3', 'label' => 'Radio3'), ) ) );
Password Field
$fieldSet->addField( 'password', 'password', array( 'label' => Mage::helper('form')->__('Password'), 'class' => 'required-entry', 'name' => 'password', 'value' => 'hello !!' ) );
Password Field (obscure)
$fieldSet->addField( 'obscure', 'obscure', array( 'label' => Mage::helper('form')->__('Obscure'), 'class' => 'required-entry', 'name' => 'obscure', 'value' => '123456789' ) );
Note
$fieldSet->addField( 'note', 'note', array( 'text' => Mage::helper('form')->__('Some Text'), ) );
Multiselect
$fieldSet->addField( 'multiselect', 'multiselect', array( 'label' => Mage::helper('form')->__('Select Type'), 'class' => 'required-entry', 'name' => 'title', 'onclick' => "return false;", 'onchange' => "return false;", 'value' => '4', 'values' => array( '-1' => array('label' => 'Please Select..', 'value' => '-1'), '1' => array( 'value' => array( array('value' => '2', 'label' => 'Option2'), array('value' => '3', 'label' => 'Option3') ), 'label' => 'Size' ), '2' => array( 'value' => array( array('value' => '4', 'label' => 'Option4'), array('value' => '5', 'label' => 'Option5') ), 'label' => 'Color' ), ) ) );
Multiline
$fieldSet->addField( 'multiline', 'multiline', array( 'label' => Mage::helper('form')->__('Multi Line'), 'class' => 'required-entry', 'name' => 'address', 'value' => 'hello world!!' ) );
Link
$fieldSet->addField( 'link', 'link', array( 'label' => Mage::helper('form')->__('Link'), 'href' => 'http://www.blog.ave-magento.com/', 'value' => 'Magento Blog' ) );
Label
$fieldSet->addField( 'label', 'label', array( 'value' => Mage::helper('form')->__('Some Label Text'), ) );
Image Upload
$fieldSet->addField( 'logo', 'image', array( 'value' => 'https://www.google.com/images/srpr/logo11w.png', ) );
File Upload
$fieldSet->addField( 'file', 'file', array( 'label' => Mage::helper('form')->__('Upload'), 'value' => 'Upload' ) );
Date
$fieldSet->addField( 'date', 'date', array( 'label' => Mage::helper('form')->__('Date'), 'image' => $this->getSkinUrl('images/grid-cal.gif'), 'format' => Mage::app()->getLocale()->getDateFormat( Mage_Core_Model_Locale::FORMAT_TYPE_SHORT ) ) );
Date with time
$dateFormatIso = Mage::app()->getLocale()->getDateTimeFormat(Mage_Core_Model_Locale::FORMAT_TYPE_SHORT); $fieldSet->addField( 'start_date', 'date', array( 'name' => 'start_date', 'label' => Mage::helper('events')->__('Start Date'), 'title' => Mage::helper('events')->__('Start Date'), 'image' => $this->getSkinUrl('images/grid-cal.gif'), 'input_format' => $dateFormatIso, 'format' => $dateFormatIso, 'time' => true ) );
Checkbox
$fieldSet->addField( 'checkbox', 'checkbox', array( 'label' => Mage::helper('form')->__('Checkbox'), 'name' => 'Checkbox', 'checked' => false, 'value' => '1' ) );
Checkbox (another way to use)
$fieldSet->addField( 'checkboxes', 'checkboxes', array( 'label' => Mage::helper('form')->__('Checkboxs'), 'name' => 'Checkbox', 'values' => array( array('value' => '1', 'label' => 'Checkbox1'), array('value' => '2', 'label' => 'Checkbox2'), array('value' => '3', 'label' => 'Checkbox3'), ), 'value' => '1' ) );