web дизајн (it), део 4, школска 2010 11, триместар 3
TRANSCRIPT
Web Дизајн (Internet)
студијски програм Интернет
Технологије
Никола Рељин – Интернет, Висока ICT Школа
HTML
Форме
Никола Рељин – Интернет, Висока ИКТ Школа, 2008-2009.
Елементи форме
●Форме се користе за интеракцију са
корисницима: слање поруке, фајлова,
унос текста, избор опција пре слања на
сајт,...
●Елемент у ком се налазе ове
функционалности је <form>
Форма за унос имена и
презимена●Изглед који нам треба..
Форма за унос имена и
презимена●Форма за унос
садржи елементе
<input>, и ту су све
функционалности
потребне форми
●Остали елементи су
додатни
●Дугме смо ставили
да би слали садржај
негде
●<form id="forma_1"
name="forma_1"
method="post"
action="neka_akcija.php">
<label for="firstname">Име:
</label><input type="text"
name="firstname" /><br/>
<label
for="lastname">Презиме:
</label><input type="text"
name="lastname" /><br/>
<input type="submit"
value="Пошаљи" /></form>
Појашњења
●<form id="forma_1"
name="forma_1"
method="post"
action="neka_akcija.p
hp">
●Дефинишемо форму
назива “forma_1”,
која ће користити
методу слања HTTP-
ом по стандарду
POST, а све се
шаље на обраду
страни
“neka_akcija.php”,
која обрађује
послато...
Појашњења
●<label
for="firstname">Име:
</label><input
type="text"
name="firstname"
/><br/>
●Дефинишемо поље
за унос (<input
type=“text”>), назива
“firstname”, и текст
са описом (<label
for=“за који назив се
односи”>)
Појашњења
●<input type="submit"
value="Пошаљи" />
●Дефинишемо дугме
за слање целог
садржаја форме
(<input
type=“submit”>), а
текст који убацимо је
“пошаљи” (може
бити било шта)
Унапредимо форму..
●Зачинимо изглед..
Зачињен изглед●<form id="forma_1"
name="forma_1" method="post"
action="neka_akcija.php"><fieldset>
<legend>Пример форме са лепим
изгледом</legend><label
for="firstname">Име: </label><input
type="text" name="firstname"
/><br/>
<label for="lastname">Презиме:
</label><input type="text"
name="lastname" /><br/>
<input type="submit"
value="Пошаљи"
/></fieldset></form>
●Додали смо <fildset>,
којим додајемо
оквир (групишемо
делове форме), и
<legend> којим
уносимо опис fildset-
а
Избор из листе вредности
●Користимо Radio и Checkbox
Избор из листе вредности
●За избор из листе
вредности користи
се тзв radio button:●<fieldset>
●<legend>Особа</legend>
●<label
for="pol">Пол:</label>Мушки<
input type="radio" value="m"
name="pol" />
●Женски<input type="radio"
value=“z" name="pol"
checked="checked" />
●<br />
●<label
for="zanimanje">Занимање:</
label>
●Студент<input
name="zanimanje"
type="radio" value="student"
checked />
●Економиста<input
name="zanimanje"
type="radio"
value="ekonomista" />
●Инжењер<input
name="zanimanje"
type="radio"
value="inzenjer" /> <br/>
Опција која је изборна -
checkbox●<label for="kontakt">Да
Вас контактирамо?
</label>
●да<input name="kontakt"
type="checkbox"
value="da" />
●не<input name="kontakt"
type="checkbox"
value="ne" />
●</fieldset>
●Дефинисали смо на
крају питање, на које
одговарамо
“штиклирањем”
одређеног поља
●Резултат је “da|ne”
као value датог поља
●Проблем: можемо
изабрати више
ствари... (за овај
пример бољи је
radio)
Падајућа листа вредности
●Користимо
<select>..<option>
комбинацију
Падајућа листа вредности
<legend>локаџија:</legend>
<label for="kontinent">
Континент:</label>
<select name="kontinent">
<option value="evropa">
Европа</option>
<option value="azija">
Азија</option>
...
</select><br />
<label for="adresa" title="Унесите
адресу">Адреса:</label>
<textarea rows="5"
name="adresa"
cols="50"></textarea><br/>
●Дефинишемо листу
континената, као
<select>
<option/>
</select>
●Дефинишемо
текстуално поље
(дуг текст), као
<textarea>, од 5
редова, 50 “колона”
(карактера у реду)
Цели HTML<h1>Пример рада с формама</h1>
<form id="forma_1" name="forma_1" method="post"
action="neka_akcija.php">
<fieldset>
<legend>Опште информације</legend>
<label for="firstname">Име: </label><input type="text"
name="firstname" />
<br/>
<label for="lastname">Презиме: </label><input
type="text" name="lastname" />
</fieldset>
<fieldset>
<legend>Информације о особи</legend>
<label for="pol">Пол:</label>Мушки<input type="radio"
value="m" name="pol" />
Женски<input type="radio" value="m" name="pol"
checked="checked" />
<br /><label for="zanimanje">Занимање:</label>
Студент<input name="zanimanje" type="radio"
value="student" checked />
Економиста<input name="zanimanje" type="radio"
value="ekonomista" />
Инжењер<input name="zanimanje" type="radio"
value="inzenjer" />
<br/>
<label for="kontakt">Желите да Вас контактирамо?
</label>
да<input name="kontakt" type="checkbox" value="da" />
не<input name="kontakt" type="checkbox" value="ne" />
<br/>
</fieldset>
<fieldset>
<legend>локаџија:</legend>
<label for="kontinent">Континент:</label>
<select name="kontinent">
<option value="evropa">Европа</option>
<option value="azija">Азија</option>
<option value="afrika">Африка</option>
<option value="sAmerika">Сев. Америка</option>
<option value="jAmerika">Јуж. Америка</option>
<option value="Australija">Аустралија</option>
</select><br />
<label for="adresa" title="Унесите Вашу
адресу">Адреса:</label>
<textarea rows="5" name="adresa"
cols="50"></textarea><br/>
</fieldset>
<br/><input type="submit" value="Пошаљи" />
</form>
CSS дефиниције@charset "utf-8";
/* овим дефинишемо да CSS има UTF-8 */
body,td,th { font-family: Arial, Helvetica, sans-serif; color: #000000; }
body { background-color: #FFFFFF; margin:0 0 0 0; }
form{ margin:1em 1em 1em 1em; }
label { width: 10em; float: left; text-align: left; margin:0.5em 0.5em
0.5em 0; display: block; clear:both; }
.forma_1 input { margin:0.5em 0.5em 0.5em 4.5em; }
input, textarea, select { color: #781351; background-color: #fee3ad;
border: 1px solid #781351; }
.forma_1 input { color: #000; background: #ffa20f; border: 2px outset
#d7b9c9 }
fieldset { border: 1px solid #781351; width: 80%; }
legend { color: #fff; background: #ffa20c; border: 1px solid #781351;
padding: 2px 6px }
Форме
Још мало елемената и битних
ствари..
Форме за унос шифре
●Направићемо форму
за унос шифре
●<input
type="password"
name=“sifra" />
Форме за унос фајлова
●Направићемо форму
за upload фајла
●<form action="upload_file.php"
method="post"enctype="multipart/fo
rm-data"><label
for="file">Filename:</label><input
type="file" name="file" id="file" />
<br/>
<input type="submit"
name="submit" value="Submit"
/></form>
Форме за слање mail-а
●Направићемо форму
за слање mail-a●<form
action="MAILTO:[email protected]"
method="post“
enctype="text/plain">
име:<br/>
<input type="text“
name="name“ value=“name"
size="20"><br/>
Mail:<br/>
<input type="text" name="mail“
value=“Ваш mail"
size="20"><br>
●Comment:<br>
<input type="text"
name=“poruka“ value=“ваша
порука" size="40">
<br/><br/>
<input type="submit"
value="Send">
<input type="reset"
value="Reset">
</form>
Форме за избор више опција
●<select><option>..
●Може имати и
груписање опција:
<optgroup>
●Приказ Јужне и
Северне Америке, у
посебној целини под
називом “Америке”
<select name="kontinent">
<option value="evropa">
Европа</option>
<option value="azija">
Азија</option>
<optgroup title="Amerike.."
label="Америке">
<option value="sAmerika">Сев.
Америка</option>
<option value="jAmerika">Јуж.
Америка</option>
</optgroup>
</select>
Измена изгледа форме (још
мало..)●<form name="login" id="login"
method="post" action="#">
<label>Username:
<input type="text"
name="user" tabindex="1" />
</label>
<label>Password:
<input type="password"
name="password"
tabindex="2" />
<input type="submit"
name="Submit"
value="Submit"
tabindex="3" />
</label>
</form>
●form#login {
background-color: #CCCCCC;
color: #000000;
border: 1px solid #999999;
font-family: Verdana, Arial,
Helvetica, sans-serif;
font-size: 10px;
text-align: right;
}
Акције у HTML-у
Типови акција дефинисаних у
HTML-у
Како функционишу форме?
●HTML код користимо за прикупљање
података
●Садржај форме се шаље програму на
обраду
(action=“program_za_obradu.php”)
●Програм на крају прикаже да ли је све
било OK или није..
●Можемо слати податке, фајлове, ...
Функционисање
●HTML има одређене акције које
дефинишу понашање корисника на
страни
●Акције су подржане од стране script
језика, и могу се комбиновати и мењати
●За форме су битне неке акције, јер могу
омогућити мењање садржаја или
“опомену” корисника ако нешто не
унесе..
HTML акције – <body>атрибут вредност Опис
onload script Script to be run when a document loads
onunload script Script to be run when a document unloads
HTML акције - формеАтрибут тип опис
onchange script Script to be run when the element changes
onsubmit script Script to be run when the form is submitted
onreset script Script to be run when the form is reset
onselect script Script to be run when the element is selected
onblur script Script to be run when the element loses focus
onfocus script Script to be run when the element gets focus
Активности миша..Атрибут Вредност Опис
onclick script Script to be run on a mouse click
ondblclick script Script to be run on a mouse double-click
onmousedown script Script to be run when mouse button is pressed
onmousemove script Script to be run when mouse pointer moves
onmouseover script Script to be run when mouse pointer moves over an element
onmouseout script Script to be run when mouse pointer moves out of an element
onmouseup script Script to be run when mouse button is released
Где смо то видели..
●A, a:link, a:hover, a:visited, ….
●<body onload=“..”>
●<form onsubmit=“..”>
Како дефинишемо акције
●Користи се JavaScript или VBScript
(најбоље JavaScript!)
●Акције су програми дефинисани у
<script> елементу, који се налази унутар
<head>
●Да би програм знао које вредности са
стране да користи, морамо користити
посебне атрибуте, id=“..”
Атрибути у HTML-у
Неки од атрибута
Атрибути HTML-a
Attribute Value Description
class class_rule or style_rule Класа елемента, односно “понашање” елемента по CSS-у
id id_name Јединствени идентификатор тог елемента. Користи се у JavaScript..
style style_definition An inline style definition
title tooltip_text Текстуални опис елемента (mouseover)
Коришћење..●Преко CSS-a
можемо дефинисати
и особине за
елементе који имају
дефинисане ID
атрибуте
●<div
id=“moj_div”>садржај
</div>
●<div class=“plavo”
id=“posebno”>posebn
o</div>
●CSS:
●#moj_div{
color:red;
}
●.plavo{
color:blue;
}
#posebno{
color:green;
}
Коришћење..●Преко JavaScript-a
можемо дефинисати
и особине:
●<div id=“moj_div”
onclick=“akcija();”>
садржај
</div>
●<script
language="javascript“>
●function akcija(){
obj=document.getElem
entById(“moj_div”);
obj.style.color=“green”;
●}
●</script>
Пример JavaScript-a
●Пример JavaScript-a
који се извршава
унутар Body-a
●<html> <head> </head>
<body> <script
type="text/javascript“
language=“javascript”>
document.write("Hello
World!")
</script> </body>
</html>
Пример JavaScript-a
●Пример JavaScript-a
који се извршава по
позиву из Body-a
●<html> <head><script
type="text/javascript“
language=“javascript”>
function hello(){
document.write("Hello
World!") ;
}
</script> </head><body
onload=“hello();”>
</body> </html>
Неки битни атрибути
●<meta> елемент има
битне атрибуте:
●Keywords
●Description
●До скора су они
били јако битни код
одређивања
меродавности
странице
●<meta
name="keywords"
content=“Интернет,
Интернет
Технологије,
предавања, курс,
ICT, Школа,
Београд">
Неки битни атрибути
●<meta> елемент има
битне атрибуте:
●Keywords
●Description
●До скора су они
били јако битни код
одређивања
меродавности
странице
●<meta
name="description"
content=“пример
битне стране –
primer bitne strane">
Напредни CSS
Кратки преглед
Посебне дефиниције CSS
●li + li { font-size: x-
small; }
●Обухвата све <li>
елементе на целој
страни, сем првог
<li> поља (сваки <li>
коме следи исто <li>)
●<li>..</li>
<li>..</li>
<li>..</li>
●#header li > a { ... }
●Сви <a> елементи
који су “директна
деца” елемента <li>,
који су унутар
елемента који има
ID=“header”
●<li><a
href=“…”>..</li>
●<li><div><a
href=“..>..</div></li>
Прво слово блока
●p:first-letter
●{
●color: #ff0000;
●font-size:xx-large
●}
●Дефинише прво
слово унутар сваког
<p> да буде црвене
боје, велико.
●font-size:11px | 11pt |
1.4em | 110%
Прва линија блока
●p:first-line
●{
●color: #0000ff;
●font-variant: small-
caps
●}
●Дефинише прву
линију унутар сваког
<p> да буде плаве
боје, све “малим
словима”.
●font-variant: small-
caps
Бирање CSS-a на основу
browser-a●<style
type="text/css">
●/* our original style
sheet goes here */
●</style>
●<!--[if IE]><style
type="text/css">
●/* special Internet
Explorer-only style
sheet goes here */
●</style><![endif]-->
●Ако користимо IE
(Internet Explorer),
користиће се доњи
CSS style
Трик са IE
●Користимо CSS
дефиницију, и неку
особину желимо
друкчије да
дефинишемо за IE..
●.klasa{
color:red; _color:blue;
}
●Color:red; се
приказује
стандардно..
●Color: blue; - САМО у
IE
●Мора да буде ПРВО
“обична”
дефиниција, одмах
затим у истој линији
“подвучена”
дефиниција за IE
Питања и материјали
●Користити email:[email protected]
●На сајту школе, информације о предмету:http://www.ict.edu.rs/studiranje/predmeti/internet
●На фајл серверу Школе:\\fileserver\internet