'how can i add tabs, new line inside textarea content?

I am trying to develop a blogging website where I am writing a code for creating a blog page, here I am taking the blog content using a textarea and after writing the blog content user has to publish using the publish button.

so I have to write a code for this textarea where I need to give tabs in paragraphs and next lines and scrollbar is there any way to achieve this? so that when I will be published this, there will be a proper paragraph in a blog?

<section class="body-section">
    <div class="blog-wrapper">
        <span class="title">
            <input type="text" class="form-control form-control-lg" name="title" placeholder="Title for your blog" id="txtTitle">
        </span>
        <span class="txtareaBody">
            <textarea name="txt" class="form-control" placeholder="start writing your blog.." id="comment" rows="20" scrollable></textarea>
        </span>
        <span>
            <input type="file" placeholder="upload thumbnail image" formnovalidate name="imgUpload" id="ImgUpload" class="form-control">
        </span>
    </div>

</section>
javascripthtmlcss


Solution 1:[1]

To provide tab in paragraphs use the tab property and define the tab size.This would provide the required spacing in the text area.Here I have provided the code for your reference . You can also refer the link provided to know more on inserting tabs and spaces in HTML:https://www.geeksforgeeks.org/how-to-insert-spaces-tabs-in-text-using-html-css/

<style>
.tab {
        tab-size: 2;
    }
    </style>
<section class="body-section">
    <div class="blog-wrapper">
        <span class="title">
            <input type="text" class="form-control form-control-lg" name="title" placeholder="Title for your blog" id="txtTitle">
        </span>
        <span class="tab">
            <textarea name="txt" class="form-control" placeholder="start writing your blog.." id="comment" rows="20" scrollable></textarea>
        </span>
        <span>
            <input type="file" placeholder="upload thumbnail image" formnovalidate name="imgUpload" id="ImgUpload" class="form-control">
        </span>
    </div>

</section>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pooja

Related Questions