Перейти к содержанию

Пример

Это пример демонстрирует создание формы для сбора мнений посетителей сайта и оформления подписки на новостную рассылку.

В элементе <form> используется атрибут action, указывающий адрес веб-страницы, на которую отправляются введенные данные.

Все элементы формы находятся между тегами <form> и </form>.

В форме используется несколько видов элементов, созданых для сбора различных данных.

<fieldset> используется для группировки связанных по смыслу элементов формы.

<label> указывает назначение каждого из элементов.

Код
<html>
    <head>
        <title>Формы</title>
    </head>
    <body>
        <form action=" http://www.example.com/review.php " method="get">
            <fieldset>
                <legend>Данные пользователя:</legend>
                <label>Имя:
                    <input type="text" name="name" size="30" maxlength="100">
                </label>
                <br />
                <label>Email:
                    <input type="email" name="email" size="30" maxlength="100">
                </label>
                <br />
            </fieldset>
            <br />
            <fieldset>
                <legend>Ваше мнение:</legend>
                <p>
                    <label for="hear-about">
                        Как вы узнали о нас?
                    </label>
                    <select name="referrer" id="hear-about">
                        <option value="google">Google</option>
                        <option value="friend">От друзей</option>
                        <option value="advert">Реклама</option>
                        <option value="other">Другоe</option>
                    </select>
                </p>
                <p>Посетите ли вы наш сайт снова?
                    <br />
                    <label>
                        <input type="radio" name="rating" value="yes" />
                        Да
                    </label>
                    <label>
                        <input type="radio" name="rating" value="no" />
                        Нет
                    </label>
                    <label>
                        <input type="radio" name="rating" value="maybe" />
                            Возможно
                    </label>
                </p>
                <p>
                    <label for="comments">Комментарий:</label>
                    <br />
                    <textarea rows="4" cols="40" id="comments"></textarea>
                </p>
                <label>
                    <input type="checkbox" mame="subscribe" checked="checked" />
                        Я хочу получать рассылку с новостями сайта
                </label>
                <br />
                <input type="submit" value="Submit review"/>
            </fieldset>
        </form>
    </body>
</html>

Результат