Здравствуйте Гость!


Запомнить.
Авто. вход.
Забыли пароль?
Регистрация

ПОДПИСКА Подписавшись по E-mail, Вы будете получать уведомления о новых статьях к себе на почту.
Подписатся на почтовую рассылку на сайте astranar.ru
Подписаться



ДОБАВЛЯЙТЕСЬ В ДРУЗЬЯ Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте на стене моего аккаунта.
Мой аккаунт Вконтакте
Мой аккаунт
Главная - HTML - Создание форм в HTML


Создание форм в HTML


Создание форм в HTML

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

Создайте для начала простую html страницу.
Форма создается тегом <form> ну и соответственно заканчивается она тоже тегом </form>

<form name = "form_1" action = "action.php" method = "post">

</form>

1) Атрибут "name" - Значение этого атрибута означает имя HTML формы
2) Атрибут "action" - Значение этого атрибута отвечает за путь к файлу обработчика этой формы.
3) Атрибут "method" - У него может быть одно из двух значений: "post" и "get". Этот атрибут определяет способ отправки. Первый способ скрытый а второй способ открытый.
Пример:
astranar.ru/action.php
astranar.ru/action.php?tak=1


В первом случает никто не видит как передаются переменные и их значения а во втором все видно.
Далее давайте добавим текстовое поле, оно задается таким тегом <input>

Внутри тега <form> напишите такую строчку:
 Ваша фамилия: <input type = "text" name = "familia" value = "Ваша фамилия">

1) Атрибут "type" отвечает за тип элемента ввода. В данном случае, мы указали, что это обычное текстовое поле. В следующих элементах мы будем менять значение этого атрибута.
2) Атрибут "name" отвечает за имя элемента. Здесь мы указали, что имя данного поля familia.
3) Атрибут "value" отвечает за значение этого поля по умолчанию. А теперь создадим поле для ввода пароля:
Ваш пароль: <input type = "password" name = "parol" value = "Ваш пароль">

как видите все осталось таким же как и в предыдущем поле, только мы поменяли атрибут type и теперь оно уже password.

Следующим мы создадим выпадающий список:
Выберите вариант:

<select name = "variant">
<option value = "1">Вариант 1
<option value = "2">Вариант 2
<option value = "3">Вариант 3
</select>

Тег <select> означает начало выпадающего списка. Заканчивается список тегом </select>. Атрибут "name" ясен. Элементы списка создаются с помощью тега <option>. Значение атрибута "value" означает, какой значение будет у переменной variant то есть либо variant = 1, либо variant= 2, либо variant= 3. Сразу после окончания описания тега <option> ставится то, что увидит пользователь в выпадающем списке.

Теперь добавим текстовую область, используя тег <textarea>:
<textarea name = "comment" rows = "5" cols = "10"> комментарий </textarea>

Здесь мы с Вами создаём текстовую область высотой в 5 строк (значение атрибута "rows") и шириной в 10 символов (значение атрибута "cols").

Следующий элемент - это радио-кнопка.
<input type = "radio" name = "variantradio" value = "1">Вариант 1

<input type = "radio" name = "variantradio" value = "2">Вариант 2
<input type = "radio" name = "variantradio" value = "3">Вариант 3

Ещё одним элементом формы являются переключатели checkbox.С правилами ознакомлен и согласен:
<input type = "checkbox" name = "pravila" value = "yes">

Ещё одним элементом является поле для выбора файла.
Выберите файл для загрузки:<input type = "file" name = "path">

И два последних элемента - это кнопки.
<input type = "button" name = "knopka" value = "Добавить">

И последний элемент - это кнопка "submit"
<input type = "submit" value = "Отправить">

Вот вроде бы и все, что касается html форм.
Удачи вам!



Просмотров страницы: 4271
Урок добавлен: 18 Августа 2012

<<<Предыдущая статьяСледущая статья >>>

Копирование материалов разрешается только с указанием автора (Пальгов Олег) и индексируемой прямой ссылкой на сайт (https://astranar.ru/)!

Добавляйтесь ко мне в друзья ВКонтакте: https://vk.com/palgov_oleg. Если Вы хотите оценить меня и мою работу, то напишите на стене моего аккаунта ВКонтакте.

Если Вы не хотите пропустить новые материалы на сайте, то Вы можете подписаться на обновления:
Подписаться на обновления


Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Ещё статьи по html:
Стандартная табличная верстка
Установка Favicon на сайт
Начало работы с HTML
Проверка статуса ICQ в HTML


Комментарии (0)


Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Создание форм в HTML
Настоящий друг с тобой, когда ты не прав. Когда ты прав, всякий будет с тобой.

М. Твен


Вступайте в группу!