slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2228
Пора поговорить и о формах, неотъемлемой части сайтов.

На сайтах формы используются всюду. Они передают информацию на сервер, которую впоследствии можно обработать и что-то сделать с ней в дальнейшем, используя язык PHP. Тут же мы будем говорить только о создании формы, но не ее обработке.

Например, форма регистрации есть почти на любом сайте, состоит она, как правило, из нескольких текстовых полей и кнопки отправки данных. Форма авторизации, состоит из двух полей и кнопки отправки данных.

Но у форм есть больше возможностей представить информацию.

Всю форму, которая относится к одной группе информации, помещают между тегами <form></form>. Важные атрибуты этого тега:

Action - адрес программы или документа, который обрабатывает данные формы.

Name - имя формы, оно нужно чтобы можно было обратиться конкретно к этой форме через js или php-код. Старайтесь давать уникальные имена разным формам.

Method– метод передачи данных, принимает значения POST и GET. Отличие POST от GET в том, что он передает зашифрованные данные, которые сложно достать, если кто-то захочет перехватить данные идущие от формы.

Основным тегом элементов формы является <input>, важный его атрибут, определяющий то, какой элемент отображается – type, ниже приведена таблица значений этого атрибута и что получается на деле.

Табл. 1. Значения type
ТипОписаниеВид
button Кнопка.
checkbox Флажки. Позволяют выбрать более одного варианта из предложенных. ПивоЧайКофе
file Поле для ввода имени файла, который пересылается на сервер.
hidden Скрытое поле. Оно никак не отображается на веб-странице.
image Поле с изображением. При нажатии на рисунок данные формы отправляются на сервер.
password Обычное текстовое поле, но отличается от него тем, что все символы показываются звездочками. Предназначено для того, чтобы никто не подглядел вводимый пароль.
radio Переключатели. Используются, когда следует выбрать один вариант из нескольких предложенных. ПивоЧайКофе
reset Кнопка для возвращения данных формы в первоначальное значение.
submit Кнопка для отправки данных формы на сервер.
text Текстовое поле. Предназначено для ввода символов с помощью клавиатуры.

Так же стоит упомянуть о теге <textarea></textarea>, который сообщает о поле для ввода большого объема текста в несколько строчек, выглядит это так:

Еще есть тег выпадающего поля <select></select>, каждый из пунктов которого определяется тегом <option></option>.

Пример:

Таблица №2. Пример выпадающего поля
КодКак выглядит

{cv style="brush: html;"}

<select>
  <option>Первый пункт поля</option>
  <option>Второй пункт поля</option>
  <option>Третий пункт поля</option>
  <option>Четвертый пункт поля</option>
</select>

{/cv}

Все теги внутри <form> имеют атрибут name и каждому он должен присваиваться, уникальный в рамках текущей формы.

Чаще всего отправку формы определяют по нажатию <input> с type = submit, либо по нажатию кнопки Enter.

Тестовые задания, для использования знаний на практике

Все задания разбиты на 3 уровня, начиная с 1 уровня до 3 они усложняются. Рекомендую делать задания по порядку, так как каждое следующее проще сделать, если сделано предыдущие. Выполнение этих заданий условно-обязательно, для лучшего понимания сути работы HTML машины их необходимо делать.

Уровень первый

Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично.

Как он должен выглядеть:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form>
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /</td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

 

Уровень второй

Суть второго уровня сложности этого задания, в усложнении формата текста, использованного на предыдущем уровне. Возьмите свой уже отформатированный текст, допишите код так, чтобы он выглядит как нужно в задании.

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form method="get"> 
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /></td>
                </tr>
                <tr>
                    <td>Выберете ваш пол</td>
                    <td>
                        <select>
                            <option>Мужской</option>
                            <option>Женский</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td><input type="reset" value="Сбросить" /></td>
                    <td><input type="submit" value="Отправить" /></td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

 

Уровень третий

Третий уровень сложности аналогичен 1 и 2 уровням сложности. Подсказка! Используйте атрибут style.

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Формы. Первый уровень сложности. </TITLE>
    </HEAD>
    <BODY>
        <form method="get"> 
            <table>
                <tr>
                    <td>Ваше имя</td>
                    <td><input type="text" value="Имя..." name="name" /></td>
                </tr>
                <tr>
                    <td>Фамилия</td>
                    <td><input type="text" value="Фамилия..." name="fam" /></td>
                </tr>
                <tr>
                    <td>Выберете ваш пол</td>
                    <td>
                        <select>
                            <option>Мужской</option>
                            <option>Женский</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td colspan="2">Укажите ваш примерный возраст:</td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="radio" value="radiobutton" name="radiobutton">
                        10-20
                        <input type="radio" value="radiobutton" name="radiobutton">
                        20-30
                        <input type="radio" value="radiobutton" name="radiobutton">
                        30-40
                        <input type="radio" value="radiobutton" name="radiobutton">
                        40-50
                    </td>
                </tr>
                <tr>
                    <td>Загрузите свое фото</td>
                    <td><input type="file" /></td>
                </tr>
                <tr>
                    <td>Введите свой логин</td>
                    <td><input type="text" value="Логин..." name="login" /></td>
                </tr>
                <tr>
                    <td>Введите пароль</td>
                    <td><input type="password" value="" name="password" /></td>
                </tr>
                <tr>
                    <td>Дополнительная информация о вас</td>
                    <td><textarea></textarea></td>
                </tr>
                <tr>
                    <td>Согласие на рассылку новостей</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td>Согласие с лецензионным соглашением</td>
                    <td><input type="checkbox" /></td>
                </tr>
                <tr>
                    <td><input type="reset" value="Сбросить" /></td>
                    <td><input type="submit" value="Отправить" /></td>
                </tr>
            </table>
        </form>
    </BODY>
</HTML>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • ZOMRO
    4.80
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

ZOMRO аватар
БЮДЖЕТНЫЕ VDS/VPS У нас Вы можете найти лучшие предложения бюджетных вариантов VDS/VPS: zomro.com/c...
Перейти в тему
ataman_web аватар
hydraruzxpnew4af.onion.loan/ гидра маркет в обход блокировок , пупить можно все...
Перейти в тему
ZOMRO аватар
Лучшее предложение! Тариф VDS/VPS «ADVANCED» Процессор: 3 ядра ОЗУ: 4096 Mb SSD NVMe: 48Gb ОС: Linu...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

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

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.