form-with-textarea-sample.html

﻿<html>
    <head>
        <style>
            form {
                display: grid;
                grid-template-columns: 30px 400px 30px;
                grid-template-rows: auto;
            }
        </style>
    </head>
    <body>
        <form style="margin: 50px" action="/search" aria-expanded="false">
            <label aria-hidden="true" aria-label="Search the web" tabindex="-1">
                <svg aria-hidden="true" width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10.4167 0C15.7555 0 20.0833 4.32792 20.0833 9.66667C20.0833 11.9759 19.2736 14.0959 17.9227 15.7584L24.4571 22.2929C24.8476 22.6835 24.8476 23.3165 24.4571 23.7071C24.1021 24.0621 23.5465 24.0944 23.1551 23.8039L23.0429 23.7071L16.5084 17.1727C14.8459 18.5236 12.7259 19.3333 10.4167 19.3333C5.07792 19.3333 0.75 15.0055 0.75 9.66667C0.75 4.32792 5.07792 0 10.4167 0ZM10.4167 2C6.18248 2 2.75 5.43248 2.75 9.66667C2.75 13.9008 6.18248 17.3333 10.4167 17.3333C14.6508 17.3333 18.0833 13.9008 18.0833 9.66667C18.0833 5.43248 14.6508 2 10.4167 2Z" fill="#767676"></path>
                </svg>
            </label>
            <div>
                <div>
                    <textarea type="search" inputmode="search" maxlength="1000" autocomplete="off" autofocus="" aria-controls="sw_as" aria-autocomplete="both" aria-owns="sw_as" placeholder="Ask me anything..." spellcheck="false" autocorrect="off" autocapitalize="none" rows="1" enterkeyhint="search" style="width: 390.281px;"></textarea>
                </div>
            </div>
            <div class="mic_cont icon" data-priority="2">
                <div class="b_icon tooltip" role="button" tabindex="0" aria-label="Search using voice" data-sbtipx="Search using voice" data-tooltip="Search using voice" style="height: 100%;">
                    <svg width="17" height="24" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M15.9 10.8C16.3556 10.8 16.7322 11.1386 16.7918 11.5778L16.8 11.7V12.3C16.8 16.5713 13.494 20.0705 9.3012 20.378L9.3 23.1C9.3 23.597 8.89704 24 8.4 24C7.94436 24 7.5678 23.6614 7.50816 23.2222L7.5 23.1V20.3782C3.39988 20.0779 0.147396 16.7256 0.00487175 12.5836L0 12.3V11.7C0 11.203 0.402948 10.8 0.9 10.8C1.35564 10.8 1.73219 11.1386 1.79178 11.5778L1.8 11.7V12.3C1.8 15.6924 4.48134 18.4585 7.84032 18.5947L8.1 18.6H8.7C12.0924 18.6 14.8585 15.9187 14.9947 12.5597L15 12.3V11.7C15 11.203 15.403 10.8 15.9 10.8ZM8.4 0C11.0509 0 13.2 2.14903 13.2 4.8V12C13.2 14.6509 11.0509 16.8 8.4 16.8C5.74903 16.8 3.6 14.6509 3.6 12V4.8C3.6 2.14903 5.74903 0 8.4 0ZM8.4 1.8C6.74316 1.8 5.4 3.14315 5.4 4.8V12C5.4 13.6568 6.74316 15 8.4 15C10.0568 15 11.4 13.6568 11.4 12V4.8C11.4 3.14315 10.0568 1.8 8.4 1.8Z" fill="#123BB6"></path>
                    </svg>
                </div>
            </div>
        </form>
    </body>
</html>