How to create a widget that accepts html input?

I am new to web development and WordPress. Since, I am still learning, I want to achieve the results by doing my own research. And when it is not helping, only then I try to seek help. Well this may be the first time I am posting a question. Without wasting time, I will come to my question:

I have tried to put together a widget that shows the carousel. The carousel slides will have a Headline, some text below the headline and then a link formatted as button. All of this will be on the left side and on right side I will have an image.

Whatever I mentioned above was achievable with a little research. However, I want to submit the headline input as:

<h1>
    <span class="headline">
        <strong class="text-primary">Some heading starts here</strong>
        and ends here
    </span>
</h1>

Here is the code for widget input fields, which is working fine.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('description'); ?>">Description</label><br />
            <textarea type="text" name="<?php echo $this->get_field_name('description'); ?>" id="<?php echo $this->get_field_id('description'); ?>" class="widefat"><?php echo $instance['description']; ?></textarea>
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_title'); ?>">Link Title</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_title'); ?>" id="<?php echo $this->get_field_id('link_title'); ?>" value="<?php echo $instance['link_title']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?php echo $this->get_field_id('link_url'); ?>">Link URL</label><br />
            <input type="text" name="<?php echo $this->get_field_name('link_url'); ?>" id="<?php echo $this->get_field_id('link_url'); ?>" value="<?php echo $instance['link_url']; ?>" class="widefat" />
        </p>

        <p>
            <label for="<?= $this->get_field_id( 'image_uri' ); ?>">Image</label>
            <img class="<?= $this->id ?>_img" src="<?= (!empty($instance['image_uri'])) ? $instance['image_uri'] : ''; ?>" style="margin:0;padding:0;max-width:100%;display:block"/>
            <input type="text" class="widefat <?= $this->id ?>_url" name="<?= $this->get_field_name( 'image_uri' ); ?>" value="<?= $instance['image_uri']; ?>" style="margin-top:5px;" />
            <input type="button" id="<?= $this->id ?>" class="button button-primary js_custom_upload_media" value="Upload Image" style="margin-top:5px;" />
        </p>

I know that below code will not help in achieving the desired result.

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

So, I want to know my options to achieve the desired result.

Thanks!

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Thanks to @TomJNowell for his advise on using textarea.

This is what I did to achieve what I wanted. It serves the purpose but I am not sure if it is the right way or not.

• I changed below input field:

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <input type="text" name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" value="<?php echo $instance['headline']; ?>" class="widefat" />
        </p>

To a textarea:

        <p>
            <label for="<?php echo $this->get_field_id('headline'); ?>">Headline</label><br />
            <textarea name="<?php echo $this->get_field_name('headline'); ?>" id="<?php echo $this->get_field_id('headline'); ?>" class="widefat" rows="5"><?php echo $instance['headline']; ?></textarea>
        </p>

And this is my update function:

    public function update( $new_instance, $old_instance ) {
        // processes widget options to be saved
        $instance = $old_instance;
        $instance['headline']   =   wp_kses_post($new_instance['headline']);
        $instance['description'] = strip_tags( $new_instance['description'] );
        $instance['link_title'] = strip_tags( $new_instance['link_title'] );
        $instance['link_url'] = strip_tags( $new_instance['link_url'] );
        $instance['image_uri'] = strip_tags( $new_instance['image_uri'] );
        return $instance;       
    }

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0