1. Основен език за описание на уеб страници - HTML
Услугата World Wide Web представлява мрежа от свързани онлайн документи, създадени с HTML (англ. HyperText Markup Language - език за маркиране на хипертекст).
Услугата World Wide Web представлява мрежа от свързани онлайн документи, създадени с HTML (англ. HyperText Markup Language - език за маркиране на хипертекст).
2. История.
|
3. Приложения за създаване на HTML страници
а) текстов редактор - Notepad, Notepad++, Visual Studio Code
б) специализирани приложения - BlueGriffon, Dreamweaver и др.
а) текстов редактор - Notepad, Notepad++, Visual Studio Code
б) специализирани приложения - BlueGriffon, Dreamweaver и др.
4. Безплатен редактор за кодиране - Visual Studio Code
а) инсталиране на Visual Studio Code - https://code.visualstudio.com/
Защо VS Code? #
- Visual Studio Code е безплатен редактор за кодиране, който ви помага да започнете да кодирате бързо. Използвайте го за кодиране на всеки език за програмиране, без да превключвате редактори. Visual Studio Code има поддръжка за много езици, включително Python, Java, C++, JavaScript и др. Вижте тези въвеждащи видеоклипове или вижте нашите пакети за кодиране за Java, Python и .NET .
- Работете отдалечено с вашите учители или съученици, като използвате безплатното разширение LiveShare. Редактирайте и отстранявайте грешки в кода си в реално време и използвайте функциите за чат и обаждане, за да задавате въпроси или да обсъждате идеи заедно. Независимо дали работите върху групова задача или преподавате урок, можете да поканите няколко души да се присъединят към вашата сесия и да кодирате заедно.
- Вижте този урок за това как да започнете да използвате LiveShare.
б) създаване на HTML файла
- текстовият файлове се записва с разширение .html или .htm
- текстовият файлове се записва с разширение .html или .htm
Описанието на HTML документ се състои от специални елементи, наречени тагове.
в) HTML таг - етикет, заграден в ъглови скоби (< >).
Таговете указват на браузъра как да интерпретира информацията, описана в HTML документа, като определят началото и края на описанието на HTML елементите, както и тяхното съдържание, вид и атрибути.
Всеки таг има конкретно предназначение. Таблица с всички възможни тагове и тяхното предназначение можете да видите на адрес www.w3schools.com/tags/ или като отворите файла "Web\HTML\HTML Tags.pdf" от приложените файлове на изд. Домино.
в) HTML таг - етикет, заграден в ъглови скоби (< >).
Таговете указват на браузъра как да интерпретира информацията, описана в HTML документа, като определят началото и края на описанието на HTML елементите, както и тяхното съдържание, вид и атрибути.
Всеки таг има конкретно предназначение. Таблица с всички възможни тагове и тяхното предназначение можете да видите на адрес www.w3schools.com/tags/ или като отворите файла "Web\HTML\HTML Tags.pdf" от приложените файлове на изд. Домино.
г) Атрибути
Към много от таговете могат да се добавят атрибути (променливи), които съдържат допълнителна информация за тага.
Към много от таговете могат да се добавят атрибути (променливи), които съдържат допълнителна информация за тага.
Например в тага за изображение <img>
<img src="img_girl.jpg" width="500" height="600">
има атрибути c имена src, width, height, които имат следните стойности:
<img src="img_girl.jpg" width="500" height="600">
има атрибути c имена src, width, height, които имат следните стойности:
- src=”img_girl.jpg" - като src означава source (източник). В самия атрибут се въвежда URL-а на картинката, която искате да покажете.
- width="500"
- height=”600"
- Атрибутите width и height се използват за да се определят широчината и височината на картинката.
5. Структура на HTML документ
а) особености
а) особености
- HTML документите са съставени от две основни части: глава (head) и тяло (body).
- HTML документът трябва да започва с декларацията <!DOCTYPE html>. Това не е HTML таг, а инструкция за уеб браузъра - прилежащите му атрибути определят версията на HTML езика и какъв тип е документът. Ако документът е написан на актуалната версия на езика (HTML5), не се задават аргументи.
б) Основни тагове, които оформят HTML документ:
Освен заглавието на страницата, между таговете head се поставят и специалните метатагове, описващи съдържанието на страницата или указващи някакво поведение на браузъра, търсещите машини, кеширащите системи и други.
- <html>
- <head>
- <title>
Освен заглавието на страницата, между таговете head се поставят и специалните метатагове, описващи съдържанието на страницата или указващи някакво поведение на браузъра, търсещите машини, кеширащите системи и други.
- <body>
атрибути на секцията body
пример: <body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green">
това е страница с черен фон, цвета на текста - бял, цвета на непосетените хипервръзки - син, цвета на посетените хипервръзки - зелен, а цвета при щракане върху тях - жълт
пример: <body bgcolor="black" text="white" link="blue" alink="yellow" vlink="green">
това е страница с черен фон, цвета на текста - бял, цвета на непосетените хипервръзки - син, цвета на посетените хипервръзки - зелен, а цвета при щракане върху тях - жълт
д) Пример за най-обща структура на уеб сайт:
- Като спазвате основните изисквания за структурата на един HTML документ, добавете таговете <head>, <title> , <body>.
- Заглавието и съдържанието на документа вземете от файла struktura.docx от папката "Site\Resources".
- Запишете файла и проверете какъв е резултатът, като го отворите в браузъра.
Въведение в HTML
https://tutorials.bg/kursove/html-css-uroci
https://tutorials.bg/kursove/html-css-uroci
Тема 11. Тагове за текст, хипервръзка, изображение
1. Форматиране на текст в HTML
a) заглавие - таговете от <h1> до <h6> определят заглавия в HTML
- <h1> е заглавие от най-високо ниво, с най-голям размер на символите
- <h2> до <h6> определят подзаглавията в низходящ ред
б) параграф - за обособяване на блок от текст като отделен параграф се използва HTML тагът <р>.
Пример:
<p>Това е параграф </p>
Пример:
<p>Това е параграф </p>
Задача. Създайте страница с име history_NHG.html по модела:
nhg-blg.com/index.php?option=com_content&task=view&id=105&Itemid=159 изисквания:
|
в) Тагове за форматиране на текст:
|
Примери:
<p><strong> Това е параграф</strong> </p> <p><b>Карлово</b></p> <p><strong>Карлово </strong></p> <p> <i> Карлово</i></p> <p><em>Карлово </em> </p> <p><del>Карлово</del></p> <p>10<sup>a</sup></p> <p>10<sub>a</sub></p> |
- <br> таг за празен ред - Този таг няма затварящ таг
- <blockquote> - използва се за вмъкване на цитати. Браузърите вмъкват разстояние колкото един ред преди и след елемента, както и отстъп отляво и отдясно
- <рге> - показва текста така, както е написан в текстовия редактор - с всички паузи между букви и думи и оставени празни редове (пример: www.w3schools.com/html/tryit.asp?filename=tryhtml_pre)
- <hr> - дефинира тематично прекъсване в HTML страница и най-често се показва като хоризонтална линия - Този таг няма затварящ таг
г) основен таг <div>... </div> - използва се за оформяне на блок.
Той представлява нещо като универсален контейнер, който може да съдържа всякаква информация - текст, изображения, а може и да е празен.
С помощта на атрибута style (или със CSS, както ще видим по-нататък) може да се задават различни параметри на блока, като размери, цвят, рамка и др. Освен това могат да се задават параметри, които важат за всички разположени в блока обекти. Например за текстове - шрифт, размер, цвят, подравняване и т.н. Това дава възможност за оформяне на структурата на сайта и го прави основен таг за повечето съвременни сайтове.
Той представлява нещо като универсален контейнер, който може да съдържа всякаква информация - текст, изображения, а може и да е празен.
С помощта на атрибута style (или със CSS, както ще видим по-нататък) може да се задават различни параметри на блока, като размери, цвят, рамка и др. Освен това могат да се задават параметри, които важат за всички разположени в блока обекти. Например за текстове - шрифт, размер, цвят, подравняване и т.н. Това дава възможност за оформяне на структурата на сайта и го прави основен таг за повечето съвременни сайтове.
Във файлът ще добавяме различни елементи в следващите упражнения.
Домашна работа!
Задача 1. Отворете файла pois.html от папката "Site" от приложените материали (изд. Домино). Разгледайте HTML кода на страницата. Страницата трябва да съдържа списък със забележителност в Карлово. Първата забележителност е с добавени елементи, но частично оформена. Подбрани са само някои за нуждите на уроците.
Ще забележите, че страницата се състои от няколко блокчета, реализирани с тага <div>. Номерирали сме ги с помощта на атрибута "id".
Задача 2. В момента заглавията на забележителностите са реализирани с таг за параграф. (Кой е той?)
Като използвате тагове за заглавие (от <h1> до <h6>), оформете заглавието на всяка забележителност (блокче). Кой от таговете ви се струва най-подходящ? (Оставете <h2> като окончателен вариант).
Задача 3.
Вземете текста за Исторически музей - Карлово от файла "history_museum.docx" и като използвате тага за параграф, го поставете в предвиденото за това място (в div с id=2). Оформете текста в 3 параграфa (както е показан в уордовския документ).
За нови редове използвайте тага <br>.
Задача 1. Отворете файла pois.html от папката "Site" от приложените материали (изд. Домино). Разгледайте HTML кода на страницата. Страницата трябва да съдържа списък със забележителност в Карлово. Първата забележителност е с добавени елементи, но частично оформена. Подбрани са само някои за нуждите на уроците.
Ще забележите, че страницата се състои от няколко блокчета, реализирани с тага <div>. Номерирали сме ги с помощта на атрибута "id".
Задача 2. В момента заглавията на забележителностите са реализирани с таг за параграф. (Кой е той?)
Като използвате тагове за заглавие (от <h1> до <h6>), оформете заглавието на всяка забележителност (блокче). Кой от таговете ви се струва най-подходящ? (Оставете <h2> като окончателен вариант).
Задача 3.
Вземете текста за Исторически музей - Карлово от файла "history_museum.docx" и като използвате тага за параграф, го поставете в предвиденото за това място (в div с id=2). Оформете текста в 3 параграфa (както е показан в уордовския документ).
За нови редове използвайте тага <br>.
2. Създаване на хипервръзка в HTML
В един HTML документ може да се добавят линкове към други документи или ресурси, които може да се намират на същия сървър или на външен за сайта сървър.
a) таг <а> - за създаване на хипервръзка
Използва се най-често с атрибута href, който задава адреса на документа (файл или интернет адрес), към който трябва да се свърже.
В един HTML документ може да се добавят линкове към други документи или ресурси, които може да се намират на същия сървър или на външен за сайта сървър.
a) таг <а> - за създаване на хипервръзка
Използва се най-често с атрибута href, който задава адреса на документа (файл или интернет адрес), към който трябва да се свърже.
Пример:
<a href="https://mon.bg/"> Връзка към МОН</a> В прозореца на браузъра ще се вижда текста "Връзка към МОН", при кликване върху който ще се отвори началната страница на сайта mon.bg. По подразбиране връзките се показват в браузъра сини на цвят и подчертани, а посетените връзки - виолетови. Цветът им може да бъде променен чрез ползване на езика CSS. |
б) хипервръзка към страници от същия сайт
<a href="events.html">Предстоящи събития</a> - на href се задава относителен път
в) хипервръзка към друг уеб сайт или конкретна страница в него.
В този случай на атрибута href се задава пълният абсолютен адрес (URL):
<a href="https://it-study.weebly.com/1048107910751088107210781076107210851077-10901077108910901074107210851077-1080-10871091107310831080108210911074107210851077-10851072-109110771073-1.html"> Изграждане, тестване и публикуване на уеб сайт </a>
<a href="events.html">Предстоящи събития</a> - на href се задава относителен път
в) хипервръзка към друг уеб сайт или конкретна страница в него.
В този случай на атрибута href се задава пълният абсолютен адрес (URL):
<a href="https://it-study.weebly.com/1048107910751088107210781076107210851077-10901077108910901074107210851077-1080-10871091107310831080108210911074107210851077-10851072-109110771073-1.html"> Изграждане, тестване и публикуване на уеб сайт </a>
г) хипервръзка към различни части на страницата
Това е подходящо за дълги документи, за да не скролират посетителите в търсене на нужната информация.
Използва се атрибутът id
Това е подходящо за дълги документи, за да не скролират посетителите в търсене на нужната информация.
Използва се атрибутът id
<h3 id="glava3"> Глава III</h3>
<a href="#glava3">Към 3. глава</а> <a href="tom1.html"> Глава III на 1. том</а> |
|
<a href="#end">Към края на страницата</a>
Съдържание <a id = "end"></a> |
|
Задача 3. Отворете текстовият файл href-proba.txt
Създайте HTML страница с име index-href.html и разгледайте всички хипервръзки в него. Открийте кой е тага (връзката) за преминаване в началото на страницата. |
Атрибутът torget определя къде да се отвори свързаният документ, към който сочи хиперлинкът.
Приема някоя от стойностите: име, _blank, _self, _parent, _top.
Най-често се използват:
Приема някоя от стойностите: име, _blank, _self, _parent, _top.
Най-често се използват:
- _blank - отваря документа в нов прозорец;
- _self - отваря документа в текущия прозорец (по подразбиране);
- име - отваря документа в област с това име (напр. <iframe id="име">). Ако няма такава, се отваря в нов прозорец..
<a href ="https://mon.bg/" target="_blank"> Връзка към МОН</a>
3. Изображения при уеб страниците
Изображенията могат да подобрят дизайна и външният вид на уеб страницата. В HTML страницата може да се вмъкнат различни формати (gif, jpeg, png) на файлове, представляващи изображения.
Изображенията могат да подобрят дизайна и външният вид на уеб страницата. В HTML страницата може да се вмъкнат различни формати (gif, jpeg, png) на файлове, представляващи изображения.
а) HTML изображения – тага <img>
<img src="img_girl.jpg" width="500" height="600"> |
има атрибути c имена src, width, height, които имат следните стойности:
- src=”img_girl.jpg" - като src означава source (източник). В самия атрибут се въвежда URL-а на картинката, която искате да покажете.
- width="500"
- height=”600"
- alt="липсва" - aлтернативен текст
<img src="image.jpg" alt="липсва" /> - задава какъв текст да се появи, ако не се вижда изображението. - align="left" - подравняване на снимката спрямо текста
<img src="img.jpeg" align="left" /> - подравнява изображението вляво спрямо текста. - top, bottom, middle, left, right - Подравнява изображението по горната линия на текста, долната или в средата. Вляво или вдясно на страницата.
HTML изображения - www.w3schools.com/html/html_images.asp
Линкове с цветови комбинации:
Примери:
- цветове в WEB страница
- подравняване на текст
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8 />
<title> blue background </title>
</head>
<body bgcolor="#A9F5F2">
<b> <I> <U> Тази страница е със светло син цвят </U> </I> </B>
<P align = "left"> "Текст" в ляво </P>
<P align = "right"> "Текст" в дясно </P>
<P align = "center"> "Текст" в центъра </P>
<P align = "justify"> Текстът е двустранно подравнен </P>
</body>
</html>
<html>
<head>
<meta charset=UTF-8 />
<title> blue background </title>
</head>
<body bgcolor="#A9F5F2">
<b> <I> <U> Тази страница е със светло син цвят </U> </I> </B>
<P align = "left"> "Текст" в ляво </P>
<P align = "right"> "Текст" в дясно </P>
<P align = "center"> "Текст" в центъра </P>
<P align = "justify"> Текстът е двустранно подравнен </P>
</body>
</html>
face="название на шрифта" - задава шрифт за текста
size="размер на текста" - задава размер на текста
color="цвят" - задава цвят на текста
ПРИМЕР:
<p><h1><font face="arial, helvetica, sans-sherif" color="green"> Иван Вазов </font></h1> </p>
size="размер на текста" - задава размер на текста
color="цвят" - задава цвят на текста
ПРИМЕР:
<p><h1><font face="arial, helvetica, sans-sherif" color="green"> Иван Вазов </font></h1> </p>
Тема 12. Тагове за таблица, списъци, аудио и видео
1. Тагове за таблица:
<table> - създава таблица
<tr> - създава ред в таблица <td> - създава клетка в ред от таблица <caption> - заглавие на таблица <th> - заглавие на колона в таблица |
Клетките в таблицата имат атрибути:
colspan - определя броя на колоните, които клетката трябва да обхване rowspan - определя броя на редовете, които клетката трябва да обхване |
<table border="10">
<tr> <th>Koлoнa l</th> <th>Koлoнa 2</th> <th>Koлoнa 3</th> </tr> <tr> <td>pед 1, колона 1</td> <td>pед 1, колона 2</td> <td>pед 1, колона 3</td> </tr> <tr> <td>pед 2, колона 1</td> <td>pед 2, колона 2</td> <td>peд 2, колона 3</td> </tr > </table> |
Вместо следващите атрибути в HTML5 се използва CSS:
<table align="center" border="2" width="500" height="400" cellspacing="4" cellpadding="4">
<table align="center" border="2" style="width:100%"> |
Задача 1.
Отворете файла events.html. В него създайте таблица в подходящия блок (div), като използвате данните от файла "Site\Resources\Karlovo_tablitsa.docx". За целта може да създадете първо един празен ред (<tr>) с 2 колони (<td>), като след това го размножите, за да получите нужните редове. Запишете файла и го проверете. |
2. Тагове за списъци
Списъците могат да бъдат:
Списъците могат да бъдат:
|
|
Атрибут type:
type = "1" type = "A" type = “a” type =”I” type = ”i” |
<ol type="I">
<li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ol> |
<ol type="a">
<li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ol> |
<h2>Неподредени списъци</h2>
<ul style="list-style-type:disc;"> <li>Кафе</li> <li>Чай</li> <li>Мляко</li> </ul> <ul style="list-style-type:disc;">
Атрибут type: disc, square, circle, none |
3. Таг за аудио
За да възпроизведете аудио файл в HTML, използвайте <audio> елемента:
Пример:
<!DOCTYPE html> <html> <body> <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Вашият браузър не поддържа аудио елемента </audio> </body> </html> |
Основните атрибути, използвани с тага audio:
|
4. Таг за видео
За да покажете видеоклип в HTML, използвайте елемента: <video>
a) HTML видео формати
Има три поддържани видеоформата: MP4, WebM и Ogg |
Основните атрибути, използвани с тага video:
|
Пример 1:
<video controls width="640" src="movie.mp4" type="video/mp4"> </video> Пример 2:
<!DOCTYPE html> <html> <body> <video poster="movie.jpg" controls height="640" width="480"> <source src="movie.mp4" type="video/mp4"/> <source src"movie.webm" type="video/webm"/> <source src="movie.ogv" type="video/ogg"/> Вашият браузър не поддържа маркера за видео </video> </body> </html> Пример 3:
<video poster="movie.jpg" controls style="width:100%"> |
|
Практически задачи:
Тема 13. Създаване на форми
1. Предназначение на формите (формуляри).
Потребителските форми дават възможност на потребителите да въвеждат данни в определени полета от уеб страницата. Формите са най-използваното средство за създаване на формуляри за връзка за потребителите, анкетни проучвания и полета за търсене на информация.
Потребителските форми дават възможност на потребителите да въвеждат данни в определени полета от уеб страницата. Формите са най-използваното средство за създаване на формуляри за връзка за потребителите, анкетни проучвания и полета за търсене на информация.
2. Таг за формуляр <form>
б) въвеждане на елементи на формуляра
Повечето елементи на формите се въвеждат чрез тага <input>, който може да съдържа няколко атрибута, най-важният от които е type. Атрибутът type указва вида на елемента в конкретния случай.
в) поле за текст
- <input type="text"> Показва поле за въвеждане на текст
Пример:
<html>
<head>
<meta charset=UTF-8 />
<title> Формуляр в HTML </title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Собствено име</label><br>
<input type="text" size ="40" id="fname" name="fname" value="Въведи името си"><br>
<label for="lname">Фамилия</label><br>
<input type="text" id="lname" name="lname" value="Въведи фамилията си"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<html>
<head>
<meta charset=UTF-8 />
<title> Формуляр в HTML </title>
</head>
<body>
<form action="/action_page.php">
<label for="fname">Собствено име</label><br>
<input type="text" size ="40" id="fname" name="fname" value="Въведи името си"><br>
<label for="lname">Фамилия</label><br>
<input type="text" id="lname" name="lname" value="Въведи фамилията си"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
- <input type="submit"> Показва бутон за подаване (за подаване на формуляра)
- <input type="button"> Показва бутон с възможност за кликване
- атрибута name, който приема като стойност името за полето.
- атрибутът size задава дължината на текстовото поле в брой символи (например size="40"). Ако не се използва този атрибут, дължината на текстовото поле по подразбиране ще бъде 20 символа.
- чрез атрибута value може да се зададе текст, който да се вижда в текстовото поле, преди още клиентът да е въвел някаква информация.
- чрез атрибута maxlenght може да въведете ограничение на броя на изписваните в текстовото поле символи. Например ако зададете maxlenght="10", в текстовото поле няма да бъде възможно да се въведат повече от 10 символа (букви, цифри и други).
в) поле за Радио бутон
- <input type="radio"> Радио бутон се използва за избор на един от многото възможности за избор
г) поле за отметка
- <input type="checkbox"> Показва квадратче за отметка (за избор на нула или повече от много избори)
д) създаване на падащ списък
Елементът определя падащ списък: <select>
Тагът <select> загражда нужния брой елементи <option>, които съставят списъка. Техните атрибути value задават стойностите, които ще бъдат върнати, а текстът, затворен между таговете <option> и </option>, ще се визуализира в падащото меню
Елементът определя падащ списък: <select>
Тагът <select> загражда нужния брой елементи <option>, които съставят списъка. Техните атрибути value задават стойностите, които ще бъдат върнати, а текстът, затворен между таговете <option> и </option>, ще се визуализира в падащото меню
Пример:
<label for="cars"> Избери кола:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<label for="cars"> Избери кола:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- Използвайте атрибута, за да укажете броя на видимите стойности: size
- Използвайте атрибута, за да позволите на потребителя да избере повече от една стойност: multiple
e) текстова област
Ако желаете да предоставите възможност за по-подробно мнение или коментар, трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага <textarea>.
Атрибутите на тага са:
Ако желаете да предоставите възможност за по-подробно мнение или коментар, трябва да използвате многоредово поле за въвеждане на текст. Многоредовите полета се въвеждат чрез тага <textarea>.
Атрибутите на тага са:
- атрибутът name, определящ названието, под което ще се съхранява и обработва тази част от формата.
- атрибутът rows, на който се присвоява като стойност някаква цифра, указваща височина на полето в брой редове.
- атрибутът cols, на който се присвоява като стойност някаква цифра, указваща ширината на полето в брой символи (цифри, букви и др.).
Пример:
<!DOCTYPE html>
<html>
<body>
<h2>Коментар</h2>
<form>
<label for="text1">Baшият коментар:</label>
<textarea name="Comentar" id="textl" cols="40" rows="12">Моят коментар е </textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Коментар</h2>
<form>
<label for="text1">Baшият коментар:</label>
<textarea name="Comentar" id="textl" cols="40" rows="12">Моят коментар е </textarea>
<br><br>
<input type="submit">
</form>
</body>
</html>
ж) поле за въвеждане на парола
<input type="password"> определя поле за парола
<input type="password"> определя поле за парола
Пример:
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
з) поле за качване на файл
<input type="file">
<input type="file">
Пример:
<form>
<label for="myfile">Избери файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
<form>
<label for="myfile">Избери файл:</label>
<input type="file" id="myfile" name="myfile">
</form>
и) бутон за изпращане (изтриване) на данни (коментирахме в примерите)
<input type="submit" value="Submit">
<input type="submit" value="Submit">
Аналогично е изработването на бутон "Reset", чрез който формата се изчиства и се изтриват попълнените вече данни. За целта трябва да зададете на атрибута type от тага input стойността reset.
Други атрибути на <form>:
- method - определя метода за изпращане на формата action - задава URL адрес, на който да се изпрати, по подразбиране е адресът на формата пате - определя името на формата Други атрибути на <input>:
- type=image - определя външно изображение като бутон за изпращане
- type=hidden - определя скрито поле
- value - задава начална стойност на полето
- name - определя името на полето при изпращане на данните
Формулярът с цялата информация в него да се изпрати в някаква електронна пощенска кутия (e-mail) и да се съхранява там.
За да изпратите формуляра на някакъв имейл, е необходимо само да добавите в отварящия таг form (първия таг на всеки формуляр) атрибута action и да му зададете като стойност адреса на имейла, в който трябва да пристигне информацията, придружен от формата mailto:
За да изпратите формуляра на някакъв имейл, е необходимо само да добавите в отварящия таг form (първия таг на всеки формуляр) атрибута action и да му зададете като стойност адреса на имейла, в който трябва да пристигне информацията, придружен от формата mailto:
Формата се изпраща на URL адреса, посочен в атрибута ѝ action по два метода: GET и POST. Първият добавя данните от полетата към URL адреса като списък формат име=стойност, разделени със знака &. Това е лесно за проследяване и запомняне като отметка в браузъра, но не е подходящо за чувствителна информация, а адресът не може да е по-дълъг от 3000 символа. Методът POST вмъква данните в тялото на HTML заявката. Така те не се виждат в полето за адрес на браузъра и отпада ограничението за обема им.
Домашна работа!
Създайте файл с име form.html, който да представлява регистрационна форма със следните данни:
Създайте файл с име form.html, който да представлява регистрационна форма със следните данни:
- Име (текстово поле),
- Години (падащо меню),
- Пол (радиобутон),
- Потребител (текстово поле),
- Парола (поле за парола),
- Имейл (текстово поле),
- Бутон за изпращане (Submit).
Практическо изпитване I
Задача!