Programmeerimise algõpe: HTML sisestusväljad

< Programmeerimise algõpe

Sisestusväljad, valikud ja päringu saatmine

Nupp

Wikiversity lehel on mõned tähtsad asjandused, mida olen seni meelega eiranud, nimelt: sisestusread ja nupud.

Otsime siis selle sama lehe koodist, kus on nupp, millel on kiri [Search].

<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />

• Mida me näeme?

Selle moodustab

1. <input silt
2. Nagu juba teame title atribuudiga saab anda kasutajale lisateavet selle HTML elemendi kohta, mille kohal arvutihiir (cursor) peatub.

Selgitav jutt ilmub mõne hetke pärast elemendi kõrvale kollaka taustaga raami ja kaob, kui hiir selle elemendi pealt lahkub. Nii saame vältida oma kallite külastajate vihastamist asjadega, mis neid ei huvita.

1. id atribuudist räägime Javascripti ja CSSiga seoses .
2. class atribuudist räägime CSSiga seoses .
3. value atribuudi väärtus "Search" ongi jutt, mida me nupu peal nägime. Selle atribuudi teisi otstarbeid selgitan mõni rida allpool.
4. type ja name atribuudist räägime kah mõni rida allpool.
5. Elementi lõpetava nurksulu > ees peab XHTML standardi kohaselt olema tõusev murdjoon /. HTML reeglite järgi seda seal olla ei tohtinud. Sulgevat paarilist </input> ei ole XHTML ega

HTML süsteemis.

• Mida see nupp teeb?

1. Kirjutan nupu kohal olnud sisestusreale "wiki" ja vajutan [Search] nuppu.
2. Avaneb leht, kuhu on muu hulgas kirjutatud "Search results" ehk maakeeli "Otsingu tulemus". Hea õnne korral on seal ka mõne leitud lehe lingid.

Kuidas ta seda tegi?

Ega täpselt ei teagi, sest see toimus arvutis, millele me ei tohiks ligi pääseda, ehk siis serveris, mille aadressi leiame aadressiribalt - "http://beta.wikiversity.org". Liiatigi servereid ei programmeerita HTML keeles.

Päring aadressiribal

Sellegipoolest, me võime uurida selle serveri käitumise seaduspära.

1. Läheme taas lehele, kuhu on muu hulgas kirjutatud "Search results" ehk maakeeli "Otsingu tulemus".
2. Kopeerime aadressiribalt kogu teksti: http://beta.wikiversity.org/w/index.php?title=Special%3ASearch&search=wiki&fulltext=Search
   1. Nagu juba teame http:// teatab selle normi , mille põhjal hakatakse aadressi edasi lugema.
   2. Talle järgneb serveri nimi ja majutaja aadress "beta.wikiversity.org".
   3. /w/index.php viitab failile index.php , mis asub (väidetavalt) /w kaustas.

Seni oli kõik tuttav.

• Mida tähendab ?title=Special%3ASearch&search=wiki&fulltext=Search ?

fulltext=Search meenub meile äsja vaadeldud nupu koodist: name="fulltext" ... value="Search" .

• Aga ülejäänu?

Tegelikult oli nupp ainult osake suuremast koodilõigust:

<form action="/w/index.php" id="searchform">
	<input type='hidden' name="title" value="Special:Search"/>
	<input id="searchInput" title="Search Wikiversity" accesskey="f" value="" name="search" />
	<input type='submit' name="go" class="searchButton" id="searchGoButton"	value="Go" title="Go to a page with this exact name if exists" />&nbsp;
	<input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
</form>

Siit leiamegi:

1. action="/w/index.php"
2. name="title" value="Special:Search" , mis URLil oli title=Special%3ASearch
3. value="" name="search" , mis URLil oli search=wiki
   1. Tuletan meelde, et kirjutasin nupu kohal olnud sisestusreale "wiki" enne, kui vajutasin [Search] nuppu.

See jupp ongi sisestusrea kood:

	<input id="searchInput" title="Search Wikiversity" accesskey="f" value="" name="search" />

Niisiis leidsin aadressireal sõna, mida olin sisestanud.

• http://beta.wikiversity.org/w/index.php?title=Special%3ASearch&search=wiki&fulltext=Search

1. Asendan selle prauseri aadressiribal mõne teise sõnaga - näiteks sandbox .
   1. http://beta.wikiversity.org/w/index.php?title=Special%3ASearch&search=sandbox&fulltext=Search
2. Vajutan [Enter] klahvi.
3. Avaneb uus leht, kuhu on muu hulgas kirjutatud "Search results" ehk maakeeli "Otsingu tulemus". Hea õnne korral on seal ka There is a page named "Sandbox" on this wiki ja mõne leitud

lehe lingid.

1. Õnnestuski Wikiversity serverit pisut lollitada, aga ta on ka selleks valmis.

Sisestusväljad

Mis toimub?

• <form elemendi action ütleb prauserile, mis aadressile pöörduda , kui selle <form elemendi siltide vahel olevat
  • <input type='submit' nuppu vajutada.
• Prauser lisab sellele aadressile  ? märgi järele sama <formi piiresse jäänud <input elemendi võrdusmärgiga = seotud name ja value atribuudi väärtused. Kui selles <formis on mitu <input elementi, siis eraldab nende andmeid aadressireal &.
  • Näiteks: http://beta.wikiversity.org/w/index.php?title=Special%3ASearch&search=wiki&fulltext=Search

Mida server teeb, kui talle selline päring saadeti, see sõltub sellest, kuidas ta on programmeeritud.

Näide

Tegin sellise lehe http://www.hot.ee/vikiylikool/html/ylesanded/Sisestusvealjad.html , mis saadab päringuid http://en.wikipedia.org/w/index.php aadressile.

Faili salvestasin näidiskoodi tutvustamaks põhilisi sisestus- ja valikelemente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html lang="et" xml:lang="et" xmlns="http://www.w3.org/1999/xhtml">
		<head>
			<meta http-equiv="content-type" content="text/html;charset=utf-8" />
			<title> Sisestusväljad </title>
			<base href="http://en.wikipedia.org/w/index.php" target="Sisestusväljad" />
		</head>
		<body>
			<form action="#">
Kirjuta sisestusreale, mida otsid ja vajuta järgmist nuppu!				
				<input value="HTML form element" name="search" />
				<input type='submit' name="fulltext" value="Otsi!"/>
			</form><hr/>
			<form action="#">
Kirjuta sisestusreale, mida otsid ja vajuta [Enter] klahvi!				
				<input type='text' value="HTML text input" name="search" />
				<input type='submit' name="fulltext" value="Otsi!"/>
				<input type='reset' value="See nupp taastab kõigi selle vormi sisestusväljade algse teksti."/>
			</form><hr/>
			<form action="#">
Kirjuta sisestusreale, mida otsid ja vajuta järgmist nuppu!				
				<input type='password' value="HTML password input" name="search" />
				<input type='submit' name="fulltext" value="Otsi!"/>
			</form><hr/>
			<form action="#">
Vajuta järgmist nuppu!				
				<input type='hidden' value="HTML input hidden" name="search" />
				<input type='submit' name="fulltext" value='Otsi, mis on  "HTML input hidden" !'/>
			</form><hr/>
			<form action="#">
Klõpsa linnuke märkeruutu ja vajuta järgmist nuppu!				
				<input type='checkbox' value="HTML input checkbox" name="search" />
				<input type='submit' name="fulltext" value='Otsi, mis on  "HTML input checkbox" !'/>
			</form><hr/>
			<form action="#">
Klõpsa emba-kumba valikusõõri ja vajuta järgmist nuppu! <br/>				
				"HTML input radio" <input type='radio' value="HTML input radio" name="search" /> <br/>
				"radiobutton" <input type='radio' value="radiobutton" name="search" checked="checked" /> <br/>
				<input type='submit' name="fulltext" value='Otsi, mis on "radiobutton" või "HTML input radio"!'/>
			</form><hr/>
			<form action="#">
Klõpsi järgmist pilti!
				<input type='hidden' value="HTML input image" name="search"/>
				<input type='image' value="HTML input element" name="fulltext" src="http://www.hot.ee/vikiylikool/img/NeaidisPilt.gif" alt="piltnupp" title="Töötab 

nupuna." />
			</form><hr/>
			<form action="#">
Kirjuta sisestustahvlile, mida otsid ja vajuta järgmist nuppu!
				<textarea name="search" rows="4" cols="9">
HTML 
textarea
				</textarea>
				<input type='submit' name="fulltext" value='Otsi , mis on  "HTML textarea"!'/>
			</form><hr/>
			<form action="#">
Hoia [Ctrl] klahv all ja klõpsa mitmel loetelu valikul järjest. Seejärel vajuta nupule! 	
				<select name="search" multiple="multiple" size="2">
				  <option value="HTML select">select</option>
				  <option value="HTML option" selected="selected">option</option>
				  <option value="HTML select multiple">multiple</option>
				  <option value="HTML select size">size</option>
				  <option value=" "></option>
				</select>
				<input type='submit' name="fulltext" value='Otsi, mis on "HTML select" või "HTML option"!'/>
			</form><hr/>
			<form action="http://validator.w3.org/check" method="post" enctype="multipart/form-data">
Vali oma arvutist ".html" fail ja vajuta järgmist nuppu!
				<input type='file' name="uploaded_file" />
				<input type='submit' value='Valideeri  HTML file !'/>
			</form><hr/><hr/><hr/>
			<form action="#">
Järgmisi nuppe pole mõtet näppida!				
				<input type='button' value="HTML input button" name="search" onclick="this.value=this.value+' jne'; "/>
				<input type='submit' name="fulltext" value='Otsi asjatult , mis on "HTML input button" !'/>
			</form><hr/>
		</body>
	</html>

Ülesanne

Koostasin veel ühe HTTP päringu http://maps.google.fi/maps?saddr=Helsinki&daddr=Rakvere+to:Narva+to:Tartu , mis joonistab kaardile teekonna Rakvere ja Narva kaudu Helsingist Tartu.

• 1. Uuri eeltoodud näiteid ja kirjuta HTML kood, mis joonistab sääraseid radu asulate vahel, mida saab valida erinevaist HTML elementidest.
  • Kasuta ka neid elemente:
    • <label
    • <fieldset
    • <legend
  • Katseta ka neid atribuute:
    • method
    • checked
    • selected
    • disabled
    • readonly
    • maxlength
    • tabindex
    • multiple
    • size

• • • Paranda alati vead (, kui neid on), et failid valideeruksid  ! Kasuta sellist standardit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">