Create Custom Type Field In Admin Form Magento2

Create Custom Type Field In Admin Form Magento2 – In many cases , when we need to create a custom type field in admin form. which can handle our custom data. so here i am going to explain, how to create a custom type field in admin form.you have to just follow these steps to create custom type field in form.
1 . go to your admin form page
Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Tab\Form

namespace Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Tab;

class Form extends \Magento\Backend\Block\Widget\Form\Generic 
implements \Magento\Backend\Block\Widget\Tab\TabInterface
{
    /**
    * @var \Magento\Store\Model\System\Store
    */
    protected $_systemStore;
    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Framework\Data\FormFactory     $formFactory
     * @param \Magento\Store\Model\System\Store       $systemStore
     * @param array                                   $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Framework\Data\FormFactory $formFactory,
        \Magento\Store\Model\System\Store $systemStore,
        array $data = []
    ) {
        $this->_systemStore = $systemStore;
        parent::__construct($context, $formFactory, $data);
    }

    /**
    * Prepare form
    *
    * @return $this
    */
    protected function _prepareForm()
    {
        $form = $this->_formFactory->create();
        $form->setHtmlIdPrefix('customfield_');
        $fieldset = $form->addFieldset(
            'base_fieldset',
            ['legend' => __('Custom Form Field'), 'class' => 'fieldset-wide']
        );
        $fieldset->addType(
            'mycustomfield',
            '\Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer'
        );
        $this->setForm($form); 
        return parent::_prepareForm();

    }
}

In above code i have created a custom type field (mycustomfield) and also define a renderer file path for it.Now We have to create renderer file on above mentioned location.

2 . create renderer file
here i have created renderer file on this location.
Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer

namespace Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer;

/**
* CustomFormField Customformfield field renderer
*/
class CustomRenderer extends \Magento\Framework\Data\Form\Element\AbstractElement
{
    /**
    * Get the after element html.
    *
    * @return mixed
    */
    public function getAfterElementHtml()
    {
        // here you can write your code.
        $customDiv = '<div style="width:600px;height:200px;margin:10px 0;border:2px solid #000" id="customdiv"><h1 style="margin-top: 12%;margin-left:40%;">Custom Div</h1></div>';
        return $customDiv;
    }
}

3 . now you can use name of custom type field as a field type for another field.

* Prepare form
*
* @return $this
*/
protected function _prepareForm()
{
    $form = $this->_formFactory->;create();
    $form->setHtmlIdPrefix('customfield_');
    $fieldset = $form->addFieldset(
        'base_fieldset',
        ['legend' => __('Custom Form Field'), 'class' => 'fieldset-wide']
    );
    $fieldset->addType(
        'mycustomfield',
        '\Webkul\CustomFormField\Block\Adminhtml\Customformfield\Edit\Renderer\CustomRenderer'
    );
    $fieldset->addField(
        'custom div',
        'mycustomfield',
        [
            'name'  => 'customdiv',
            'label' => __('Custom Div'),
            'title' => __('Custom Div'),
          
        ]
    );
    $this->setForm($form); 
    return parent::_prepareForm();
}

Now your div will be display like that in a admin form

 

hope so it will help you.