Створюємо текстову область
| <textarea name="area" rows="6" cols="25">Цей текст буде значенням цього елемента форми </textarea> |
Цей елемент працює таким чином, що будь-який текст що опиниться всередині конструкції <textarea></textarea>, буде вважатися значеням цього елемента.
Створюємо поле для введеня пароля
| <input type="password" name="password" /> |
Створюємо приховане поле
Приховане поле може містити такі самі текстові значення як і текстове, але воно не буде відображатися для користувача у його браузері.
| <input type="hidden" name="hidden" value="приховане значення" /> |
Створюємо елементи вибору
Створюємо флажки
| <input type="checkbox" name="сheckbox1" value="один" /> <input type="checkbox" name="сheckbox2" value="два" /> <input type="checkbox" name="сheckbox3" value="три" /> |
Флажок – це елемент вибору типу checkbox. Флажок може мати атрибут value, але на відміну від інших елементів цей атрибут для флажків як правило не використовується. Текст, що знаходиться поруч із флажками, являється звичайним текстом.
Створюємо перемикачі
Перемикачі (їх ще називають «радіокнопками» та «кнопками вибору варіантів») використовуються тоді, коли потрібно що користувач вибрав лише один із запропонованих варіантів. В html перемикачі працюють так, що коли ви обираєте один з них, то всі інші автоматично вимикаються.
| <input type="radio" name="radio" value="101.1" /> <input type="radio" name="radio" value="103.5" /> <input type="radio" name="radio" value="106.1" /> |
Створюємо випадаючі списки
Випадаючі списки створюються за допомогою двох різних елементів. Головним є елемент select, який може містити безліч елементів
| <select name="select" size="1"> <option value="value1">Item1</option> <option value="value2">Item2</option> <option value="value3">Item3</option> <option value="value4">Item4</option> </select> |
У елемента select, є атрибут name. А в елементів option є атрибути value. В програму потрапить лише те значення value, елемент якого буде обраний у випадаючому списку. Зауважте, що значення атрибута value не відображається на сторінці, користувач буде бачити лише той текст, що знаходиться між елементами <option></option>.
Створюємо список із множинним вибором
В деяких ситуаціях, може бути коисно скористатися ще одним елементом вибору, він називається – список із множинним вибором. Він являється різновидом випадаючого списку, і створюється схожим способом.
| <select name="list" size="7" multiple="multiple"> <option value="value1">Item1</option> <option value="value2">Item2</option> <option value="value3">Item3</option> <option value="value4">Item4</option> <option value="value5">Item5</option> <option value="value7">Item6</option> <option value="value7">Item7</option> </select> |
Додаємо кнопки
Кожна із кнопок створена як варіант елемента input, але завдяки атрибуту type, у всіх цих кнопок різна дія. Код що покладений в основу сторінки демонстрації кнопок, наглядно показує яким чином можна створювати кнопки всередині форм.
Начало формы
Конец формы
Кнопка із типом button, зазвичай використовується при програмуванні на стороні клієнта. Кнопка reset, повертає сторінку у її початковий стан. Кнопка submit, без усякого сумніву являється дуже важливим елементом програмування на стороні сервера. За допомогою цієї кнопки, забезпечується зв’язок між формами та вашими програмами. Коли користувач заповнив усі поля форми, він натискає на кнопку Send, яка має тип submit. Після ціє дії, із даних у елементах форми формується пакет даних, який відправляється на обробку серверу.
36. Каскадні таблиці стилів.
Стиль – це набір правил оформлення та форматування, який можна застосовувати до різних елементів веб-документа. У разі використання стандартної мови HTML для надання кільком елементам певних властивостей (наприклад, призначення стилю шрифту) доводиться здавати ці властивості для кожного елемента. Використання таблиць стилів дає змогу уникнути цього, оптимізувавши розробку веб-сайтів. Стилі дають змогу позицію вати елементи сторінки (наприклад, тексти і графіку), задаючи координати. Крім того, таблиці стилів часто використовують під час створення так званих динамічних сторінок.
CSS (Cascading Style Sheets) — це технологія опису зовнішнього вигляду документа, що створено засобами HTML, XML і XHTML. CSS використовується для завдання кольорів, шрифтів, розташування елементів сторінки тощо. До появи CSS оформлення веб-сторінок вказувалося безпосередньо в HTML-коді сторінки. Проте, з появою CSS стало можливим принципове розділення змісту і представлення документа. За рахунок такого нововведення стало можливим легке застосування єдиного стилю оформлення для кількох сторінок сайту, а також швидка зміна цього оформлення.
Переваги:
^ Застосування кількох варіантів дизайну сторінки для різних пристроїв перегляду. Наприклад, для відображення на екрані монітора - дизайн буде розраховано на велику ширину. У разі друкування документу не буде роздруковане меню сайту, а у разі перегляду у мобільному комп’ютері чи телефоні, меню буде виведено після вмісту сторінки.
^ Зменшення часу завантаження сторінок сайту за рахунок перенесення правил представлення даних до окремого CSS-файлу. В цьому випадку браузер завантажує лише структуру документа і дані, що містяться на сторінці. CSS-файл з правилами представлення цих даних завантажується браузером лише один раз і зберігається в кеші браузера.
^ Простота подальшої зміни дизайну. Не потрібно виправляти кожну сторінку, достатньо лише змінити кілька правил у CSS-файлі.
Додаткові можливості оформлення. Наприклад, за допомогою CSS-правил можна застосувати обтікання певного блоку текстом або зробити так, щоб меню фіксовано знаходилося в певному місці при перегортанні сторінки.
Недоліки:
Різні браузери можуть в різний спосіб інтерпретувати правила CSS, і відповідно, по різному відображати одні і ті ж фрагменти сторінки.
Таблиці каскадних стилів (CSS, Cascading Style Sheets) містять параметри форматування частини або всього тексту веб-сторінки. Якщо таку таблицю підключено, то у тегах можна просто вказувати посилання на неї, а не задавати велику кількість атрибутів. У цьому випадку стилі названі каскадними тому, що в одному документі їх можна описати кілька, і браузер використовуватиме їх каскадом відповідно до їхнього пріоритету. Таблиця стилів – це шаблон, який керує формуванням тегів веб-сторінки.
Таблиці каскадних стилів – це передусім набори параметрів, що змінюють властивості тегів HTML. Такі набори називають ще визначенням тегів. Наприклад:
P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}
Тут задано параметри для тегу абзацу <P>, які встановлюють розмір шрифту 40 пунктів, колір шрифту – зелений, гарнітуру - Comic Sans MS. У документі достатньо ввести теги <P> … </P> із текстом абзацу, щоб автоматично адати йому зазначеного оформлення.
Застосування каскадних стилів у HTML-документах. Є чотири способи зв’язку каскадних стилів із HTML-документом:
Зв’язувальний – дозволяє використовувати 1 таблицю стилів для форматування багатьох сторінок.
Впровадження – дозволяє задавати всі правила таблиці стилів в документі
Імпортування – дозволяє вбудовувати таблицю стилів розташованих на сервері
Вбудовується таблиця в теги Підключення зовнішньої таблиці стилів.Зовнішня таблиця стилів (External Style Sheet) – це текстовий файл із розширенням .css. Його підключають до HTML-документа за допомогою тегу <LINK>, який записують у розділі <HEAD>, наприклад: <LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>
Атрибути REL та TYPE вказують браузеру на те, що сторінка використовує таблиці каскадних стилів. Атрибут HREF задає адресу файлу (mystyle.css).
Оформимо веб-сторінку за допомогою зовнішньої таблиці стилів.
Відкрийте текстовий редактор Блокнот і введіть таке визначення тегу <P>:
P {font-size: 40pt; color: green; font-family: “Comic Sans MS”}
Збережіть файл з іменем mystyle.css. Створіть у Блокноті файл такого змісту:
<HTML><HEAD>
<LINK REL=”stylesheet” TYPE=”text/css” HREF=”mystyle.css”>
<TITLE> Приклад використання CSS</TITLE> </HEAD>
<BODY><P>Цей текст оформлено відповідно до таблиці стилів, яка міститься у файлі mystyle.css: розмір шрифту - 40 пунктів, колір шрифту – зелений, а гарнітура - Comic Sans MS. </P></BODY><HTML>
1. Збережіть цей файл з іменем pryklad1.html у тій самій папці, що і mystyle.css.
2. Відкрийте файл pryklad1.html у вікні браузера. Як бачите, хоча в цьому докуметі не задано жодних параметрів для тегу <P> … </P>, текст абзацу набув нових властивостей, які описані в зовнішній таблиці стилів mystyle.css.
Перевага такого методу підключення CSS полягає в тому, що одну таблицю стилів можна підключити до багатьох документів, і всі вони матимуть єдине стильове оформлення.
37. Основні поняття про 3-55779.php">⇐ Назад