Створення простої форми на HTML, CSS і JavaScript

13

Від автора: Створення HTML-форм – один з основних розділів веб-дизайн і веб-програмуванні. Використовуючи форми, ми реєструємося на сайтах, пишемо повідомлення в гостьові книги, залишаємо коментарі, пишемо і відправляємо листи через веб-інтерфейси поштових сервісів. Написання абсолютної більшості веб-додатків починається з створення форми. На рахунок «абсолютної більшості» я, звичайно загнув, серйозні програмісти починають, як правило, з іншого. А ось початківці розробники, такі як автор цього туториала, починають проектування свого першого dt-програми зі створення простий HTML-форми.

Створення простої форми на HTML, CSS і JavaScript

Автор: Павло Карабило

Початківець веб-розробник, самоучка. Живу, навчаюсь, працюю у столиці України. Активно вивчаю JavaScript, jQuery, CSS3, HTML5, PHP, SQL. Особливий інтерес маю до дизайну та розробки інтерактивних інтерфейсів веб-додатків (front-end).

У цьому туториале я буду використовувати HTML, CSS3 і зовсім трішки – JavaScript. Слідуючи за мною крок за кроком, початківець веб-програміст (або веб-дизайнер) зможе створити просту форму, яка зможе стати основою для першої гостьової книги, системи коментарів або іншого простого веб-додатки. Сподіваюся, в недалекому майбутньому, я запропоную вашій увазі невеликий туторіал, в якому розповім, як з однієї такої форми спроектувати і написати гостьову книгу, використовуючи PHP і MySQL.

Перед тим, як ми приступимо до практичних кроків, я Вам рекомендую переглянути демо-результат роботи.

Також завантажте вихідні коди собі на комп’ютер!

Отже, почнемо.

Крок 1.

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

поле для введення імені автора повідомлення;

поле для введення адреси електронної пошти;

текстову область для написання повідомлення;

кнопка з написом «Відправити» або будь-який інший для того, щоб все це працювало.

Почнемо, мабуть, з HTML. Створимо файл і назвемо його, наприклад, index.html. Або як вам буде завгодно, я назву його саме так.

Напишемо в наш файл наступний HTML-код:

Найпростіша і крутєйша форма

Ім’я

E-Mail

Текст повідомлення

Думаю, що з розміткою поки ні у кого ніяких питань не виникне. У нас є два поля для введення імені автора та адресу його електронної пошти, кожне поле підписано міткою , одне велике текстове поле для введення повідомлення і кнопка для відправки всього цього добра куди подалі . Поки це все добро виглядає приблизно так:

Створення простої форми на HTML, CSS і JavaScript

Як бачите, кожне текстове поле має підказку – текст, розташований в поле.

Крок 2.

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

…..
…..
Текст повідомлення

Як бачите, ми просто опишемо обробку подій onblur і onfocus. Подія onfocus спрацьовує, коли ми виділяємо елемент форми, подія onblur спрацьовує, коли ми виділяємо що-небудь інше, і елемент повертається в первісний стан. Загалом, шматок коду виглядає так:

onfocus=»if(this.value == ‘якийсь текст’) this.value = «»(якщо при виділенні елемента в ньому каходится «якийсь текст», то зробити так, щоб в ньому нічого не знаходилася, тобто » «)
onblur=»if(this.value.length == 0) this.value = ‘якийсь текст'» (якщо при видаленні фокуса елемента в ньому перебуває 0 символів, помістити в цей елемент ‘якийсь текст’)

Ось як це виглядає на практиці:

Створення простої форми на HTML, CSS і JavaScript

При натисканні на елемент (при його виділенні) підказка в ньому зникає і автор повідомлення може вводити свої дані. При виділенні чогось іншого, якщо виділений до цього елемент автор не вніс свої дані в текстовому полі знову з’явиться текст підказки.

Крок 3.

Розмітка і мініатюрний сценарій готові. Справа залишилася за малим – за стилями.

Створимо файл CSS, наприклад styles.css і приєднаємо його до нашого html-документу, додавши між тегами … наступний рядок:

Першим ділом додамо стиль блоку-контейнера.

#container {
margin: 0 auto;
border: 3px solid #EEEEEE;
width: 800px;
-webkit-birder-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; }

За допомогою визначень width: 800px; margin: 0 auto; ми задаємо блоку-контейнера ширину 800 пікселів і розташовуємо його по центру html-документа. За допомогою інших визначень задаємо кордон блоку-контейнера – її тип, ширину колір, а за допомогою визначень CSS3 -webkit-birder-radius,-moz-border-radius і border-radius робимо кути кордонів закругленими. Кордон контейнера робимо світлою і невиразною, щоб вона не відволікала увагу від більш важливих елементів.

Створення простої форми на HTML, CSS і JavaScript

Тепер, створимо визначення для текстових полів:

input, textarea {
border: solid 1px #CCCCCC;
margin-left: 10px;
padding: 4px;
outline: 0;
font: Verdana, Geneva, sans-serif;
width: 200px;
background: #F9F9F9;
-webkit-birder-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

За допомогою margin-left задаємо відступ від краю блоку-контейнера в 10 пікселів. Визначення padding служить для створення простору між текстом в текстовому полі і межею текстового поля. Крім цього, як бачите, ми задаємо колір, стиль кордону (знову закруглені кути) і ширину текстових полів. Ось що у нас виходить:

Створення простої форми на HTML, CSS і JavaScript

Що ж, непогано, хоча не завадило б виділити поле для повідомлення і кнопку відправки.

textarea {
width: 400px;
height: 150px;
line-height: 150%;
}
.send input {
width: auto;
margin-bottom: 10px;
border: 2px solid #E0E0F3;
font: Verdana, Geneva, sans-serif;
background-color: #E5E5F8;
}

В принципі, нічого нового. Ми просто ставимо нові розміри для текстової області, включаючи висоту рядка line-height. Для кнопки робимо нижній відступ до межі контейнера за допомогою margin-bottom. Ось що виходить:

Створення простої форми на HTML, CSS і JavaScript

Це вже схоже на щось. Далі, додаємо стилі міток label, а також робимо невеликий відступ поля Ім’я автора від верхньої межі контейнера.

p label {
margin-left: 10px;
font-style: italic;
color: #c0c0c0;
}
.input name {
margin-top: 10px;
}

Як можна бачити, мітки стали світліше і тепер вони менше виділяються, але їх все одно видно:

Створення простої форми на HTML, CSS і JavaScript

В принципі, виглядає вже досить непогано, однак, можна додати ще трохи візуальної інтерактивності за допомогою CSS:

input:hover, textarea:hover, input:focus, textarea:focus {
border-color: #A0A0A0;
}
.send input:hover {
border: 2px solid #C0C0E3;
}

При наведенні курсору на елемент, його кордони стають трохи темніше і чіткіше:

Створення простої форми на HTML, CSS і JavaScript

Ось, в принципі і все, урок по створенню простий HTML-форми підходить до кінця. Ми з вами з нуля спроектували і написали просту інтерактивну веб-форму в світлих тонах, яка в майбутньому стане основою першої гостьової книги, написаної, наприклад, на PHP+MySQL.

З повагою Павло Карабило

Ваші відгуки і зауваження чекаю в коментарях!

Створення простої форми на HTML, CSS і JavaScript