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

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

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

Ваш ip адрес:54.162.181.75

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

Кількість публікацій на блозі: 365
Кількість коментарів на блозі: 100
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

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”, в цій частині я вирішив розмістити контактну форму.

Ви можите не звертати увагу на цей код, а відразу перейти до абзацу “Створюємо контактну форму”, оріентуватися по цьому коду моя порада починаючому веб майстру, пригодиться для практики, щоб краще засвоїти мову 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” і вказує куда потрібно відправити дані.

Файл formdata.php, спочатку ми створимо файл з розширенням рнр, назвемо 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>Що ви 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адіокнопки

 <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= “Відправити”.

Відправити

<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

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

Leave a Reply

Your email address will not be published. Required fields are marked *