A textarea is a part of form and it is a user interface element that allows a user to submit data with multi-line.

Using our class ".null-form-textarea" , you will get a simple and clean design.

- Basic:

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <textarea class="null-form-textarea" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
        </div><!--End null-margin-bottom-20-->

    </form>

Want to disable the resize of textarea? just add this class ".null-form-textarea-resize-none":

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <textarea class="null-form-textarea null-form-textarea-resize-none" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
        </div><!--End null-margin-bottom-20-->

    </form>

Add disabled attrubite if you want to disable a textarea:

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <textarea class="null-form-textarea null-form-textare-resize-none" name="comments" placeholder="Comments" rows="3" cols="50" disabled></textarea>
        </div><!--End null-margin-bottom-20-->

    </form>

You can add the below HTML code to show form error under each textarea:

<span  class="null-form-error">Message</span>

        <div class="null-margin-bottom-20">
            <textarea class="null-form-textarea null-form-textarea-resize-none" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
            <span  class="null-form-error">Comments are required</span>
        </div><!--End null-margin-bottom-20-->

You can add the below HTML code to show form success under each textarea:

<span  class="null-form-success">Message</span>

        <div class="null-margin-bottom-20">
            <textarea class="null-form-textarea null-form-textarea-resize-none" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
            <span  class="null-form-success">Comments are valid</span>
        </div><!--End null-margin-bottom-20-->

- With Label:

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <label class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="comments">
                Comments :
            </label>
            <textarea class="null-form-textarea" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
        </div><!--End null-margin-bottom-20-->

    </form>

Want to disable the resize of textarea? just add this class ".null-form-textarea-resize-none":

Add disabled attrubite if you want to disable a textarea:

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <label null-disabled="disabled" class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="comments">
                Comments :
            </label>
            <textarea class="null-form-textarea null-form-textarea-resize-none" name="comments" placeholder="Comments" rows="3" cols="50" disabled></textarea>
        </div><!--End null-margin-bottom-20-->

    </form>

You can add the below HTML code to show form error under each textarea:

<span  class="null-form-error">Message</span>

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <label id="ppt" null-disabled="disabled" class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="comments">
                Comments :
            </label>
            <textarea class="null-form-textarea" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
            <span  class="null-form-error">Comments are required</span>
        </div><!--End null-margin-bottom-20-->

    </form>

You can add the below HTML code to show form success under each textarea:

<span  class="null-form-success">Message</span>

    <form method="get" action="/">

        <div class="null-margin-bottom-20">
            <label id="ppt" null-disabled="disabled" class="null-color-main null-font-weight-bold null-display-block null-margin-bottom-10" for="comments">
                Comments :
            </label>
            <textarea class="null-form-textarea" name="comments" placeholder="Comments" rows="3" cols="50"></textarea>
            <span  class="null-form-success">Comments are valid</span>
        </div><!--End null-margin-bottom-20-->

    </form>