Как сделать одну форму в html

Добавлено: 04.11.2018, 01:51 / Просмотров: 45294

Закрыть ... [X]

Скачать 14 видеоурок по HTML Размер: 18.87 MB, скачали: 545 раз.
Скачать исходники к 14 видеоуроку по HTML Размер: 61.48 kB, скачали: 369 раз.

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.
Что такое таблицы и табличная верстка, вы уже знаете из предыдущих уроков по HTML. В этом видеоуроке мы с вами познакомимся с формамиФормы используются для осуществления обратной связи, создания форумов, гостевых книг, чатов и других изобретений веб-программистов.  На своем экране вы видите форму нашего сайта. В этом видеоуроке мы создадим похожую, только с большим количеством элементов.

Среди новичков веб-программирования бытует ошибочное мнение: они наивно полагают, что для создания форумов, чатов, гостевых книг и т.п. вполне достаточно владеть языком HTML. Хочу вас огорчить  — этого не достаточно. Главную роль в этом деле играет язык PHP. Мы планируем записывать по нему видеокурс чуть позже. Найти его вы сможете на сайте http://info-line.net

Однако, давайте приступать к изучению форм. Перейдем на наш рабочий стол, зайдем в папку site2, откроем наш индексный файл через программу notepad. Теперь скопируем то изображение, которое у нас не отображалось из прошлого сайта. Копируем папку img, удаляем из нее все, кроме нашего изображения.

Теперь давайте создадим еще одну страничку. Нажмем кнопочку «Новый», копируем все, что есть в индексной странице, и давайте заменим ссылки. Первая ссылка у нас будет на главную страничку index.html, вторая – на эту страничку (мы ее сейчас сохраним и назовем form.html). Переименуем вторую ссылку. Она будет называться «Обратная связь».

<div>Меню:</div> <p><a href="index.html">Главная</a></p> <p><a href="form.html">Обратная связь</a></p>

Копируем эти два пункта меню в индексный файл, сохраним его и сохраним нашу форму.

Теперь давайте удалим весь ненужный текст, который находится в блоке контента и пропишем на его месте форму. Форма задается тегами <form></form>.  У тега <form> есть атрибут action. В его значении прописывается путь к скрипту-обработчику или ваш e-mail посредством mailto:ваш_e-mail_адрес.

<form action="mailto:" >

Теперь в область между тегами нам нужно вписать элементы формы – это и поля, и переключатели, и флажки (checkbox), и, конечно же, кнопки. Давайте запишем тег <input>. Он не требует закрывающего и означает то, что мы будем сейчас прописывать элемент формы. Тег <input> имеет атрибут type, означающий тип элемента. Если нам нужно текстовое поле, то вводим text. Существует еще атрибут name – это обязательный атрибут, означает он имя нашего поля. Оно нужно для скрипта-обработчика, который будет забирать информацию. Введем в качестве имени, например, pole1. Теперь добавим ширину поля с помощью атрибута size, например, 20. С помощью атрибута maxlength мы устанавливаем максимальное значение символов, которое можно будет ввести в поле. Пусть будет 10. Атрибут value означает значение нашего поля, то есть то, что будет введено по умолчанию. Например, «Имя».

<form action="mailto:" > <p>Имя:<br><input type="text" name="pole1" size="20" maxlength="10" value="Имя"></p> <p>Сообщение:<br></p> </form>

Теперь создадим абзац перед полем и после поля. Пропишем код в поле для сообщения. Оно будет выше и шире. Текстовое поле вводится с помощью тегов <textarea></textarea>. Добавим ему атрибут name = “message”, укажем количество строк, с помощью атрибута row и количество символов в строке, с помощью атрибута cols. Как вы заметили, тег <textarea> имеет закрывающий тег. Для чего это нужно? Нужно это для того, чтобы между ними мы вводили текст. Этот текст означает то, что у нас будет записано по умолчанию. То есть, это аналог атрибута value. Вводим сюда «Сообщение».

<form action="mailto:" > <p>Имя:<br><input type="text" name="pole1" size="20" maxlength="10" value="Имя"></p> <p>Сообщение:<br><textarea name="message" rows="10" cols="30">Сообщение</textarea></p> </form>

Теперь создадим кнопочку. Задается она тоже  с помощью тега <input>, только значение атрибута  type указывается как submit. Эта кнопочка у нас будет отправлять информацию. Здесь атрибут name нам не нужен, потому что информацию из кнопки мы брать не будем. Для задания подписи кнопочке используется атрибут value.

<form action="mailto:" > <p>Имя:<br><input type="text" name="pole1" size="20" maxlength="10" value="Имя"></p> <p>Сообщение:<br><textarea name="message" rows="10" cols="30">Сообщение</textarea></p> <input type = "submit" value="Отправить"> </form>

Есть еще одна кнопка – кнопка «Сбросить». Она сбрасывает информацию, которую мы ввели в поля. Отличие от кнопки «Отправить» заключается в том, что в type указывается значение reset.

<form action="mailto:"> <p>Имя:<br><input type="text" name="pole1" size="20" maxlength="10" value="Имя"></p> <p>Сообщение:<br><textarea name="message" rows="10" cols="30">Сообщение</textarea></p> <input type = "submit" value="Отправить"> <input type = "reset" value="Сбросить"> </form>

На данный момент мы закончили и сейчас введем метод отправки формы. Он вводится на теге <form>. Бывает два метода: Get и Post. Отличаются они тем, что метод Get передает информацию через строку браузера, в которой указывается специальное имя переменной и ее значение. Все это видно пользователю. Метод Post основан на невидимой пользователю передаче информации (из странички в наш сервис). Введем post, все-таки передаем e-mail адрес.

<form action="mailto:" method="post">

Давайте сохраним и посмотрим на нашу страничку в браузере. Как мы видим, меню работает. Переходим на главную страницу, затем — на обратную связь. У нас два поля: «Имя», в которое введено значение «Имя», сюда мы можем ввести свое имя, и «Сообщение», куда пользователь вводит свое сообщение. Затем можно нажать либо «Сбросить» для очистки всех полей, либо «Отправить» для отправки формы. При нажатии на вторую кнопку, будет вызван почтовый клиент.

Давайте снова перейдем в код и посмотрим, какие еще возможности открывают перед нами формы. У тега Input есть такой тип (атрибут type) под названием hidden. Он означает «скрытое поле». Оно имеет имя, например, pole2 и значение, которое передается. Это поле не видно пользователю, который вводит информацию.

<input type = "submit" value="Отправить"><input type = "reset" value="Сбросить"></p> <input type = "hidden" name="pole2" value="Секретная информация"> </form>

Разберем дополнительные элементы формы. Прописываем новый абзац, слова «Ваш пол», и переключатели – так называемые радиокнопки. Одна радиокнопка прописывается один раз. Сделаем три варианта ответа: «Мужчина», «Женщина» и «Не знаю».

<p>Ваш пол: <br>Мужчина<input type="radio" name="sex" value="man"><br>Женщина<input type="radio" name="sex" value="woman"><br>Не знаю<input type="radio" name="sex" value="dk"></p>

Сохраним и проверим в браузере, что у нас получилось. Как вы видите, нам предлагается выбрать пол. При нажатии на радиокнопку, у нас фиксируется значение; после нажатия на кнопку «Отправить», выбранный вариант будет отправлен. Выбрать значение можно только одно – в этом и есть прелесть радиокнопок.

Давайте переместим этот код в форму перед кнопками «Отправить» и «Сбросить».

Прописываем еще один абзац и разберем флажки. Записываем вопрос, например «Выберите любимое число», затем тег <input>: значение атрибута type задаем checkbox, записываем имя и значение value устанавливаем yes. Задаем несколько флажков. Пусть будет 5.

<p>Выберите любимое число:<br> <input type="checkbox" name="1" value="yes"> <input type="checkbox" name="2" value="yes"> <input type="checkbox" name="3" value="yes"> <input type="checkbox" name="4" value="yes"> <input type="checkbox" name="5" value="yes"> </p>

Сохраним и проверим в браузере. Мы видим, что теперь нужно сделать перенос на следующую строку, чтобы варианты не отображались в одной строке, а также прописать значения, чтобы пользователь понимал, что значит каждое из полей.

<p>Выберите любимое число:<br> <input type="checkbox" name="1" value="yes">1<br> <input type="checkbox" name="2" value="yes">2<br> <input type="checkbox" name="3" value="yes">3<br> <input type="checkbox" name="4" value="yes">4<br> <input type="checkbox" name="5" value="yes">5 </p>

Сохраним и проверим. Мы можем отметить столько вариантов, сколько хотим. Чтобы число было отмечено по умолчанию, нужно добавить слово checked. Например, мы хотим, чтобы по умолчанию цифра 4 была отмечена галочкой. Прописываем ему «checked».

<p>Выберите любимое число:<br> <input type="checkbox" name="1" value="yes">1<br> <input type="checkbox" name="2" value="yes">2<br> <input type="checkbox" name="3" value="yes">3<br> <input type="checkbox" name="4" value="yes" checked>4<br> <input type="checkbox" name="5" value="yes">5 </p>

Сохраняем. Обновляем страницу. Мы видим, что цифра «4» отмечена галочкой по умолчанию.

Снова переходим в код. Опять прописываем абзац и напишем выпадающий список. Прописывается он с помощью тега <select>, значения задаются с помощью тега <option>. Пропишем имя нашему тегу <select>. Это имя для всего выпадающего списка.

<select name="v_spisok">

В <option> пропишем значения. Например, пусть у нас будет вопрос: «Какой ваш любимый цвет?». Значения будут: красный, синий и зеленый.

<p>Какой Ваш любимый цвет? <select name="v_spisok"> <option value="blue">Синий <option value="red">Красный <option value="green">Зеленый </select> </p>

Сохраним. Теперь нам на сайте предлагается выбрать любимый цвет: синий, красный или зеленый.

Давайте перенесем наш список на следующую строку с помощью тега <br>.

<p>Какой Ваш любимый цвет?<br> <select name="v_spisok"> <option value="blue">Синий <option value="red">Красный <option value="green">Зеленый </select> </p>

Сохраним, проверим еще раз – стало лучше.  Перейдем в код, добавим selected и зададим красный цвет по умолчанию.

<p>Какой Ваш любимый цвет?<br> <select name="v_spisok" > <option value="blue">Синий <option value="red" selected>Красный <option value="green">Зеленый </select> </p>

Сохраним, обновим страничку. Как мы видим, красный цвет стал цветом по умолчанию. Мы его можем поменять на синий или зеленый.

Переходим в код. Снова пишем абзац. У меня настал кризис вопросов, поэтому давайте напишем опять «Какой ваш любимый цвет?». Сейчас мы будем разбивать наш предыдущий список на группы. Делается это с помощью тега <optgroup></optgroup>, в котором прописывается атрибут label. Выделим, например группы светлые цвета и темные цвета. В первой группе отнесем желтый, розовый и светло-зеленый цвет, а ко второй – темно-серый, бардовый и темно-синий, например.

<p>Какой Ваш любимый цвет?<br> <select name="v_spisok"> <optgroup label="Светлые"> <option value="blue">Желтый <option value="red" selected>Розовый <option value="green">Светло-зеленый </optgroup> <optgroup label="Темные"> <option value="blue">Темно-серый <option value="red" selected>Бордовый <option value="green">Темно-синий </optgroup> </select> </p>

Сохраним и проверим в браузере, что у нас получилось. Обновим страницу. Нас спрашивают: «Какой Ваш любимый цвет?». Мы видим, что при нажатии элементы списка разделились на две группы: светлые и темные, как мы и хотели.

Перейдем снова в код. Скоро мы закончим эту трудную тему, а осталось нам только прописать список с полосой прокрутки. Уже даже не знаю, какие вопросы задавать, поэтому используем снова тот же вопрос. Прописывается он, как и предыдущий список. Уберем тег <optgroup> и добавим значение size = «3».

<p>Какой Ваш любимый цвет?<br> <select name="v_spisok" size="3"> <option value="blue">Желтый <option value="red" selected>Розовый <option value="green">Светло-зеленый <option value="blue">Темно-серый <option value="red" selected>Бордовый <option value="green">Темно-синий </select> </p>

Сохраним и посмотрим. Обновляем страницу. Появился список со всеми введенными нами значениями. Мы можем здесь использовать наши <optgroup>.

<p>Какой Ваш любимый цвет?<br> <select name="v_spisok" size="3"> <optgroup label="Светлые"> <option value="blue">Желтый <option value="red" selected>Розовый <option value="green">Светло-зеленый </optgroup> <optgroup label="Темные"> <option value="blue">Темно-серый <option value="red" selected>Бордовый <option value="green">Темно-синий </optgroup> </select> </p>

Сохраним. Проверяем – отображаются как светлые, так и темные цвета.

На этом данный видеоурок мы заканчиваем. Обязательно потренируйтесь в создании формочек и различных элементов; попробуйте создать формы опросов. Затем переходите к следующему видеоуроку, в котором мы будем разбирать очень интересную тему под названием «Фреймы». До встречи в следующем видеоуроке!



Источник: http://info-line.net/videos/14-videourok-kursa-po-html-formy

Похожие новости


Домики для дачи для детей своими руками фото
Ванна с молоком и медом в домашних условиях
Слабительное в домашних условиях детям
Цветы из фарфора своими руками мастер
Зонированье комнаты своими руками
Беседка из бруса своими из бруса руками фото




ШОКИРУЮЩИЕ НОВОСТИ


Back to Top