Поточний час:
Сьогодні 22 листопада, середа 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 11 місяців 3 дня

Ваш ip адрес:54.80.169.119

Доброї ночі!
Ви обновили сторінку в 3 : 53
Статистика

Кількість публікацій на блозі: 367
Кількість коментарів на блозі: 102
Кількість категорій на блозі: 27
Кількість міток на блозі: 3

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

 

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

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

Полностью все элементы и атрибуты, для создания контактной формы можно просмотреть перейдя по ссылке  http://ruszura.in.ua/html.html, находятся на cтранице “HTML” в абзаце “Элементы для форм”.

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

В любом случае почти на каждом сайте присутствует контактная форма. Для сайтов контактную форму в большинстве случаев создают с помощью нужных плагинов. У меня на сайте установлен один из плагинов, но я считаю не будет лишним узнать, как написать код контактной формы на html-странице вручную.

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

На языке гипертекстовой разметки HTML написать код для ввода данных можно без проблем, но этим кодом отправить данные будет невозможно.

Для этого необходимы специальные серверные языки программирования например РНР. Поэтому чтобы эти данные отправить, нужен способ совместить язык гипертекстовой разметки HTML с языком программирования РНР.

А РНР ето язык програмирования который должен в свою очередь эти данные обрабатывать. Поэтому мы заполняет необходимые поля, где указываем наши инициалы, пишем текст сообщения, а затем нам нужно отправить все ети данные на обработку.

Далле речь пойдет о создании контактной формы на языке HTML, о том как создать скрипт на языке РНР что–бы обрабатывал и отправлял ети даные читайте в следующих постах.

Далее чтобы удобнее было разобраться просто скопируйте код на странице сайта “Примеры HTML” по ссылке http://ruszura.in.ua/html/pryklady-html.html таблица “4” или таблица “3”, по таблице я как раз буду ориентироваться описывая эту публикацию, контактную форму вставлю в зоне скроллов.

Вобще–то вы можите и не копирывать етот код, а просто открыть желательно веб–редактор а не текстовый,  написать код формы а затем сохранить файл с розширением HTML.

<td valign= top bgcolor= “#33CC33″ >зона скролов</td> Закривающий тег  “</td>”  это часть кода которая размещена в таблице “3” или “4”, в этой части я решил разместить контактную форму.

<td valign= top bgcolor= “#33CC33″ >здесь вставлем контактную форму</td>

Вы можите не обращать внимание на етот код а сразу перейти к абзацу “Создаем контактную форму”, ориентироватся по етому коду мой совет начинающему веб мастеру, для практики, чтобы лутше освоить язык HTML нужно часто практиковать просмотривая коды любых HTML – страниц, и делая изменения в кодах.

Очень хороший способ выучить язык разметки текста HTML, советую попробуйте етот способ, провереный, так лучше и легче выучить и запоминать. 

Первые действия: ищем в коде текст “зона скроллов” нажмите “Enter” перед надписью “зона скроллов”, после чего текст опустится в низ, его  можно удалить, етот текст только для ориентировки. Цвета # 33CC33 можно поменять на другие или удалить, например на # ff0000.

 

Код html- страницы по которому можно ориентироваться, как создавать контактную форму.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>

<head>

<meta http–equiv= «Content–Type» content= «text/html; charset=windows-1251 » >

<title> Назва сайту, або заголовок</title>

</head>

<body>

<table width= «900» border= 1  align= center>

<tr>

<td align= center>

<table width=  100%  height= 60 border = 1 >

<tr>

<td width= 800 bgcolor= «#cc3333″ > місце для банера </td>

<td width= 100 bgcolor= «#66ff99″ > час і дата</td>

</tr>

</table>

</td>

</tr>

<tr>

<td height= 30 bgcolor= «#cccc99″ >

<a href = «index.html» ><strong> HOME </strong></a>

<a href = «produce.html» > ПРОДУКЦІЯ</A>

<a href = «despre.html» >ПРО НАС</a>

<a href = «imagini.html» >ЗОБРАЖЕННЯ</a>

<a href= «contact.html» >КОНТАКТИ </a>

</td>

</tr>

<tr>

<td valign= top bgcolor= «#33CC33″ >зона скролів</td>

</tr>

<tr>

<td height= 30 bgcolor = «ff6666″ > фіксована зона контактних даних </td>

</tr>

</table>

</body>

</html>

 между <td valign= top bgcolor= “#ff0000”>вписываем коды контактной формы</td>  

Создаем контактную форму

Сначала нужно создать форму отправки. Форма отправки начинается создаваться с парного тега “form” открываем тег <form> и перед тегом </ td> закрываем тег </ form> 

Этот тег содержит специальные атрибуты, которые нужно указывать, прежде-всего это атрибут для отправки формы, ето обработчик он называется “action” он указывает куда нужно отправить данные  <form action .

Далее  прописываем файл formdata.php, сначала мы создадим етот файл с расширением рнр, назовем formdata.php затем такое же название необходимо указать в коде в кавычках, и добавляем еще один атрибут который укажет каким методом нужно отправлять данные. <form action “formdata.php”

Существуют два метода Get и Post. Если на странице существует несколько форм то тогда необходимо еще указать имя для каждой формы например “form1”.

<p><h1>КОНТАКТИ</h1></p> <form action “formdata.php” method “POST” name=”form1″>⇒форма создана теперь нужно прописать необходимые элементы.

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

Вписываем параграф “р” сначала слово  названием  между тегами <p> Имя </ p> пишем имя, затем ниже, или рядом з тегами параграфа  прописываем  “input” переводится (ввести с англ), вписываем к команде “input” атрибут “type =”” он указывает на тип (текстовое поле “text”), далее указываем название поля name = “firstname”. Назовем первое поле fitrstname (имя-англ).

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

Размер поля указывается с помощью атрибута “size”. Полностю код строки текстового поля “Имя”, такой же код строки указываем и для текствого поля “Фамилия”

Имя

<p>Імя</p>
<input type= "text" name= "name" >

 <p>Імя</p> <input type= “text” name= “name” > это поле “Имя”, для второго поля “Фамилии” копируем код и меняем название вместо “Имя” пишем “Фамилия” и дописываем атрибут size = “в кавычках для тог что–бы указываем нужный размер текствого поля  Фамилия. Для того чтобы написать фамилию текствое поле должно быть больше, так как букв в фамилии обычно бывает больше чем в имени.

 Фамилия

<p>Фамілія</p>
<input type= "text" name= "secendname" size= "25" >

<p>Фамілія</p> <input type= “text” name= “secendname” size= “25” >  поле для того чтобы указать “Фамилию” можно задать границу символов которую разрешается прописывать в данном поле, (хотя это не обязательно, можно и не прописывать), задается с помощью атрибута maxlenght = где в кавычках необходимо указать количество символов например “12”.

Следующее поле создаем для ввода текста сообщения, с помощью тега “textarea”, необходимо указать название поля name = “your-message” и размеры поля для сообщения. Размеры указывают с помощью атрибутов cols (колонки) и rows (строки)

Текст

<p>TEXT</P>
<textarea name= "your-message" cols= "40" rows= "10"></textarea>

<p>TEXT</P> <textarea name= “your-message” cols= “40” rows= “10”></textarea> поле для текста сообщения, после всех этих действий у нас должно  отобразится в браузере три поля для ввода фамилий, имени, и поле для текста, можно добавить в контактную форму поля для ввода почтового адреса, пароля, чибоксов, скрытого текста, файла, радиокнопок.

 1gf

Далее примеры кодов Пароль Чекбоксы Pадиокнопки Выбор

Пароль

<p>Пароль</p>
<input type="password" name="password" size="15">

<p>Пароль</p> <input type=”password” name=”password” size=”15″>⇒ код для ввода пароля вместо символов выводятся черные точки

 Чекбоксы

<p><h1>Чекбокси</h1></p>
<p><strong>Що ви poбите</strong></p>
<label><input type="checkbox" name="nathing">Нічого</label>
<label><input type="checkbox" name="anething">Все</label>
<label><input type="checkbox" name="Ollthing">Майже все</label>

<p><h1>Чекбоксы</h1></p> <p><strong>Что вы делаете<strong></p> <label><input type=”checkbox” name=”nathing”>Нічого</label> <label><input type=”checkbox” name=”anething”>Все</label> <label><input type=”checkbox” name=”Ollthing”> Почти  все</label>  код для чекбоксов, пригодится для разного вида вопросов

 Pадиокнопки

 <p><h1>Pадіокнопки</h1></p>
<p><label>yes<input type="radio" name "time" value ="yes"></label><label>nou<input type="radio" name "time" value ="nou"></label></p>

<p><h1>Pадиокнопки</h1></p> <p><label>yes<input type=”radio” name “time” value =”yes”></label><label>nou<input type=”radio” name “time” value =”nou”></label></p>⇒ для радиокнопок, необходимое для того, чтобы дать вариант ответа.

Форма чтобы указать вариант выбора

Выбор, это поле которое нужно для того чтобы указать выбор варианта, выбрать один из предложенных вариантов например “Укажите сколько часов вы дрыхнете ночью”, форма нужна если вы проводите какое–то тестирование, тогда вы указываете несколько ответов, а пользователь отвечает выбирая один из ответов.

Как создается такая форма? для этого создаем парный тег “select” напомню (парные теги нужно закрывать),

<select> внутри парного тегу создаем элементы списка </ select>.

Тег <select> это контейнер в котором хранятся варианты. Для создания вариантов выбора прописываем еще один парный тег “option”.

Тег <option> это варианты выбора, например в нашем случае нам нужно выбрать пять варрантов, тогда между тегами <select> прописываем пять тегов <option>. Между тегами <option> указываем вариант цифрой </ option>.

Выбор

<p><h1>Вибір</h1></p>
<p>Вкажіть скільки годин ви дрихнете  вночі</p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>

<p><h1>Вибор</h1></p> <p></p> <select> Укажите сколько часов вы дрыхнете ночью<option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select>

gf2

Кнопки “Отправить” “Очистить”

Форма кнопок, для того что-бы отправить наши даные

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

Создаем абзац под кнопку с помощью парного тега <p> </p>,  здесь между тегами указываем еще один тег <input где добавляем атрибут “type”, который будет указывать на “submit” (отправить) далее необходимо указать название name = “batton “и если мы хотим чтобы внутри кнопки была надпись, нам необходимо дописать артибут value =” Отправить “. <input type=”submit” name=”batton” value=”Отправить” >

Отправить

<p><input type=”submit” name=”batton” value=”Відправити” </p>

<p><input type=”submit” name=”batton” value=”Отправить” ></p>⇒ у нас появится кнопка “Отправить”

если ее сечас нажать то на экране появится что “Файл не найден” так как кодов в файле formdata.php который мы создали перед добавлением элементов к форме не существует. Однако назначение кнопки понятно.

Возьмем еще одну кнопку, которая будет указывать нам на очистку данных, делаем те же процедуры что и в предыдущей, создаем абзац под кнопку с помощью парного тега <p> </p> между тегами указываем еще один тег <input где добавляем атрибут type который должен указывать на команду “reset” (очистить), вместо “submit” пишем “reset” дальше указываем название name = “batton” и если мы хочите чтобы внутри кнопки появился надпись нам необходимо дописать артибут value = “Очистить”.

Очистить

<p><input type=”reset” name=”batton” value=”Очистити” </p>

<p><input type=”reset” name=”batton” value=”Очистити” </p>⇒ у нас появится кнопка “Очистить”, если ее нажать тогда все написанные данные будут стерты с поля

 3gf

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *