Form

The form is the most important element for user interaction. It is used to collect data from the user and send it to the server.

In the following example, the form is styled with the monster components.

<main class="monster-color-primary-1">
    <form class="monster-form">
        <label for="msg">Your message:
            <textarea id="msg2" name="user_message"></textarea>
        </label>
        <fieldset>
            <legend>Personal Information</legend>
            <label for="name">from
                <input type="text" id="na3me" name="user_name"/></label>
            <label for="mail">reply:
                <input type="email" id="ma3il" name="user_email"/>
            </label>
            <label for="msg">Your message:
                <textarea id="ms1g" name="user_message"></textarea>
            </label>
        </fieldset>
        <fieldset>
            <legend>Detasil Information</legend>
            <div id="from">
                <label for="name">from:</label>
                <input type="text" id="name" name="user_name"/>
            </div>
            <div id="reply">
                <label for="mail">reply:</label>
                <input type="email" id="mail" name="user_email"/>
            </div>
            <div id="message">
                <label for="msg">Your message:</label>
                <textarea id="msg" name="user_message"></textarea>
            </div>
            <div class="button">
                <button type="submit">Send your message</button>
            </div>
        </fieldset>
    </form>
</main>

Here you can see the result in the browser: