Lab Sheet5 Question

POLITEKNIK TUANKU SYED SIRAJUDDIN
DEPARTMENT OF INFORMATION AND COMMUNICATION

TECHNOLOGY
COURSE CODE : FP532 COURSE : MOBILE DEVELOPMENT
LABORATORY NO : 5 DATE :
TITLE : USER INTERFACE COMPONENTS
Learnn! O"#$%&e'
By the end of this lab, students should be able to:
1. Use Form Components: apply form action and forcing a non-AJA form, apply form
elements: label, field containers, te!t fields, auto-gro"ing te!t area, ne" #$%&' attributes,
data fields, slider, flip toggle s"itch, select menus, radio buttons and chec(bo!es.
). Construct form by applying appropriate form components based the design

*. $est the +ebapps that uses the form elements.
E(")&en#: ,ersonal Computer and -otepad.., #$%&/, C'' and 01uery
1. Use Form Components: apply form action and forcing a non-AJA form, apply form
elements: label, field containers, te!t fields, auto-gro"ing te!t area, ne" #$%&' attributes,
data fields, slider, flip toggle s"itch, select menus, radio buttons and chec(bo!es.
A$#*#+ 5A
- apply form action
+hen the form is submitted, J1uery %obile "ill use an AJA transition to the
submission page similar to a lin( to an e!ternal page, unless the form is
submitted to another domain.
$he form can get or post defined in the action attribute of the form element.
01uery %obile form similar to a typical "eb form.
2form action34send.php4 action34get45 26form5
01uery %obile "ill try to send the form 7ia AJA using the frame"or(
$he results page "ill be added to the history8s bro"ser
9efine a form submission action to be sho"n "ith a pop transition
2form action34send.php4 action34get4 data-transition34pop45 26form5
- forcing a non-AJA form
to force a standard #$$, re:uest "ithout AJA, use data-a0a!34false4 on the
form element.
Another "ay to force non-AJA submit is by using target34;blan(4 on the form
element.
A$#*#+ 5B :
- apply form elements:
label
field containers
te!t fields
auto-gro"ing te!t area
ne" #$%&' attributes
data fields
slider
flip toggle s"itch
select menus
radio buttons
chec(bo!es.
<!ample 1: Form <lements
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="view!rt" c!ntent="width=device-width" initial-scale=#">
<title>$%uer& '!(ile D!cs - )aller& !f *!rm C!ntr!ls<+title>
<lin, rel="st&lesheet" href="--+--+css+themes+default+$.uer&-m!(ile-#-#-/-css" +>
<lin, rel="st&lesheet" href="--+0assets+css+$.m-d!cs-css"+>
<scrit src="--+--+$s+$.uer&-$s"><+scrit>
<scrit src="--+--+d!cs+0assets+$s+$.m-d!cs-$s"><+scrit>
<scrit src="--+--+$s+$.uer&-m!(ile-#-#-/-$s"><+scrit>
<+head>
<(!d&>
<div data-r!le="a1e" class="t&e-interi!r">
<div data-r!le="header" data-theme="f">
<h#>'ini f!rms<+h#>
<a href="--+--+" data-ic!n="h!me" data-ic!n!s="n!te2t" data-
directi!n="reverse">3!me<+a>
<a href="--+nav-html" data-ic!n="search" data-ic!n!s="n!te2t" data-
rel="dial!1" data-transiti!n="fade">4earch<+a>
<+div>
<div data-r!le="c!ntent">
<div class="c!ntent-rimar&">
<f!rm acti!n="5" meth!d="1et">
<h6>'ini f!rm elements<+h6>
<>7ll f!rm c!ntr!ls accet a <c!de>data-mini="true"<+c!de>
attri(ute that renders a smaller versi!n !f the <a href="f!rms-all-html">standard-si8ed<+a> f!rm
elements- 9n the case !f 1r!ued (utt!ns" the <c!de>data-mini="true"<+c!de> attri(ute can (e
added t! the c!ntainin1 c!ntr!l1r!u- <a href="f!rms-all-c!mare-html">C!mare mini and
n!rmal<+a> f!rm elements side-(&-side-<+>
<div data-r!le="fieldc!ntain">
<la(el f!r="name">Te2t 9nut:<+la(el>
<inut t&e="te2t" name="name" id="name" value="" data-mini="true" +>
<+div>
<la(el f!r="te2tarea">Te2tarea:<+la(el>
<te2tarea c!ls=";/" r!ws="8" name="te2tarea" id="te2tarea" data-
mini="true"><+te2tarea>
<+div>
<la(el f!r="search">4earch 9nut:<+la(el>
<inut t&e="search" name="assw!rd" id="search" value="" data-
mini="true" +>
<+div>
<la(el f!r="slider6">*li switch:<+la(el>
<select name="slider6" id="slider6" data-r!le="slider"
data-mini="true">
<!ti!n value="!ff">Off<+!ti!n>
<!ti!n value="!n">On<+!ti!n>
<+select>
<+div>
<la(el f!r="slider">4lider:<+la(el>
<inut t&e="ran1e" name="slider" id="slider" value="</"
min="/" ma2="#//" data-hi1hli1ht="true" data-mini="true" +>
<+div>
<fieldset data-r!le="c!ntr!l1r!u" data-mini="true">
<le1end>Ch!!se as man& snac,s as &!u=d li,e:<+le1end>
<inut t&e="chec,(!2" name="chec,(!2-#a" id="chec,(!2-#a"
class="cust!m" +>
<la(el f!r="chec,(!2-#a">Cheet!s<+la(el>
<inut t&e="chec,(!2" name="chec,(!2-6a" id="chec,(!2-6a"
class="cust!m" +>
<la(el f!r="chec,(!2-6a">D!rit!s<+la(el>
<inut t&e="chec,(!2" name="chec,(!2->a" id="chec,(!2->a"
class="cust!m" +>
<la(el f!r="chec,(!2->a">*rit!s<+la(el>
<inut t&e="chec,(!2" name="chec,(!2-;a" id="chec,(!2-;a"
class="cust!m" +>
<la(el f!r="chec,(!2-;a">4un Chis<+la(el>
<+fieldset>
<+div>
<fieldset data-r!le="c!ntr!l1r!u" data-t&e="h!ri8!ntal" data-
mini="true">
<le1end>*!nt st&lin1:<+le1end>
<inut t&e="chec,(!2" name="chec,(!2-?" id="chec,(!2-?"
class="cust!m" +>
<la(el f!r="chec,(!2-?">(<+la(el>
<inut t&e="chec,(!2" name="chec,(!2-@" id="chec,(!2-@"
class="cust!m" +>
<la(el f!r="chec,(!2-@"><em>i<+em><+la(el>
<inut t&e="chec,(!2" name="chec,(!2-8" id="chec,(!2-8"
class="cust!m" +>
<la(el f!r="chec,(!2-8">u<+la(el>
<+fieldset>
<+div>
<fieldset data-r!le="c!ntr!l1r!u" data-mini="true">
<le1end>Ch!!se a et:<+le1end>
<inut t&e="radi!" name="radi!-ch!ice-#" id="radi!-
ch!ice-#" value="ch!ice-#" chec,ed="chec,ed" +>
<la(el f!r="radi!-ch!ice-#">Cat<+la(el>
ch!ice-6" value="ch!ice-6" +>
<la(el f!r="radi!-ch!ice-6">D!1<+la(el>
ch!ice->" value="ch!ice->" +>
<la(el f!r="radi!-ch!ice->">3amster<+la(el>
ch!ice-;" value="ch!ice-;" +>
<la(el f!r="radi!-ch!ice-;">Ai8ard<+la(el>
<+fieldset>
<+div>
<fieldset data-r!le="c!ntr!l1r!u" data-t&e="h!ri8!ntal" data-
mini="true">
<le1end>Aa&!ut view:<+le1end>
<inut t&e="radi!" name="radi!-ch!ice-(" id="radi!-
ch!ice-c" value="!n" chec,ed="chec,ed" +>
<la(el f!r="radi!-ch!ice-c">Aist<+la(el>
ch!ice-d" value="!ff" +>
<la(el f!r="radi!-ch!ice-d">)rid<+la(el>
ch!ice-e" value="!ther" +>
<la(el f!r="radi!-ch!ice-e">)aller&<+la(el>
<+fieldset>
<+div>
<la(el f!r="select-ch!ice-#" class="select">Ch!!se
shiin1 meth!d:<+la(el>
<select name="select-ch!ice-#" id="select-ch!ice-#" data-
mini="true">
<!ti!n value="standard">4tandard: @
da&<+!ti!n>
<!ti!n value="rush">Bush: > da&s<+!ti!n>
<!ti!n value="e2ress">E2ress: ne2t
da&<+!ti!n>
<!ti!n value="!verni1ht">Overni1ht<+!ti!n>
<+select>
<+div>
<la(el f!r="select-ch!ice->" class="select">Y!ur
state:<+la(el>
<select name="select-ch!ice->" id="select-ch!ice->" data-
mini="true">
<!ti!n value="7A">7la(ama<+!ti!n>
<!ti!n value="7C">7las,a<+!ti!n>
<!ti!n value="7D">7ri8!na<+!ti!n>
<!ti!n value="7B">7r,ansas<+!ti!n>
<!ti!n value="C7">Calif!rnia<+!ti!n>
<!ti!n value="CO">C!l!rad!<+!ti!n>
<!ti!n value="CT">C!nnecticut<+!ti!n>
<!ti!n value="DE">Delaware<+!ti!n>
<!ti!n value="*A">*l!rida<+!ti!n>
<!ti!n value=")7">)e!r1ia<+!ti!n>
<!ti!n value="39">3awaii<+!ti!n>
<!ti!n value="9D">9dah!<+!ti!n>
<!ti!n value="9A">9llin!is<+!ti!n>
<!ti!n value="9E">9ndiana<+!ti!n>
<!ti!n value="97">9!wa<+!ti!n>
<!ti!n value="C4">Cansas<+!ti!n>
<!ti!n value="CY">Centuc,&<+!ti!n>
<!ti!n value="A7">A!uisiana<+!ti!n>
<!ti!n value="'E">'aine<+!ti!n>
<!ti!n value="'D">'ar&land<+!ti!n>
<!ti!n value="'7">'assachusetts<+!ti!n>
<!ti!n value="'9">'ichi1an<+!ti!n>
<!ti!n value="'E">'innes!ta<+!ti!n>
<!ti!n value="'4">'ississii<+!ti!n>
<!ti!n value="'O">'iss!uri<+!ti!n>
<!ti!n value="'T">'!ntana<+!ti!n>
<!ti!n value="EE">Ee(ras,a<+!ti!n>
<!ti!n value="EF">Eevada<+!ti!n>
<!ti!n value="E3">Eew 3amshire<+!ti!n>
<!ti!n value="EG">Eew Gerse&<+!ti!n>
<!ti!n value="E'">Eew 'e2ic!<+!ti!n>
<!ti!n value="EY">Eew Y!r,<+!ti!n>
<!ti!n value="EC">E!rth Car!lina<+!ti!n>
<!ti!n value="ED">E!rth Da,!ta<+!ti!n>
<!ti!n value="O3">Ohi!<+!ti!n>
<!ti!n value="OC">O,lah!ma<+!ti!n>
<!ti!n value="OB">Ore1!n<+!ti!n>
<!ti!n value="P7">Penns&lvania<+!ti!n>
<!ti!n value="B9">Bh!de 9sland<+!ti!n>
<!ti!n value="4C">4!uth Car!lina<+!ti!n>
<!ti!n value="4D">4!uth Da,!ta<+!ti!n>
<!ti!n value="TE">Tennessee<+!ti!n>
<!ti!n value="TH">Te2as<+!ti!n>
<!ti!n value="IT">Itah<+!ti!n>
<!ti!n value="FT">Ferm!nt<+!ti!n>
<!ti!n value="F7">Fir1inia<+!ti!n>
<!ti!n value="J7">Jashin1t!n<+!ti!n>
<!ti!n value="JF">Jest Fir1inia<+!ti!n>
<!ti!n value="J9">Jisc!nsin<+!ti!n>
<!ti!n value="JY">J&!min1<+!ti!n>
<+select>
<+div>
<la(el f!r="select-ch!ice-a" class="select">Ch!!se
shiin1 meth!d:<+la(el>
<select name="select-ch!ice-a" id="select-ch!ice-a" data-
native-menu="false" data-mini="true">
<!ti!n>Cust!m menu e2amle<+!ti!n>
<!ti!n value="standard">4tandard: @
da&<+!ti!n>
<!ti!n value="rush">Bush: > da&s<+!ti!n>
<!ti!n value="e2ress">E2ress: ne2t
da&<+!ti!n>
<!ti!n value="!verni1ht">Overni1ht<+!ti!n>
<+select>
<+div>
<div class="ui-(!d& ui-(!d&-(">
<fieldset class="ui-1rid-a">
<div class="ui-(l!c,-a"><(utt!n t&e="su(mit" data-
theme="d" data-mini="true">Cancel<+(utt!n><+div>
<div class="ui-(l!c,-("><(utt!n t&e="su(mit" data-
theme="a" data-mini="true">4u(mit<+(utt!n><+div>
<+fieldset>
<+div>
<+f!rm>
<+div>
<div class="c!ntent-sec!ndar&">
<div data-r!le="c!llasi(le" data-c!llased="true" data-theme="(" data-
c!ntent-theme="d">
<h>>'!re in this secti!n<+h>>
<ul data-r!le="listview" data-theme="c" data-
dividertheme="d">
<li data-r!le="list-divider">*!rm elements<+li>
<li><a href="d!cs-f!rms-html">*!rm
(asics<+a><+li>
<li><a href="f!rms-all-html">*!rm element
1aller&<+a><+li>
<li data-theme="a"><a href="f!rms-all-
mini-html">'ini f!rm element 1aller&<+a><+li>
<li><a href="te2tinuts+">Te2t inuts<+a><+li>
<li><a href="search+">4earch inuts<+a><+li>
<li><a href="slider+">4lider<+a><+li>
<li><a href="switch+">*li t!11le
switch<+a><+li>
<li><a href="radi!(utt!ns+">Badi!
(utt!ns<+a><+li>
<li><a href="chec,(!2es+">Chec,(!2es<+a><+li>
<li><a href="selects+">4elect menus<+a><+li>
<li><a href="f!rms-themes-html">Themin1
f!rms<+a><+li>
<li><a href="f!rms-all-native-html">Eative f!rm
elements<+a><+li>
<li><a href="f!rms-samle-html">4u(mittin1
f!rms<+a><+li>
<+ul>
<+div>
<+div>
<+div>
<div data-r!le="f!!ter" class="f!!ter-d!cs" data-theme="c">
<>Kc!&L 6/##-#6 The $%uer& *!undati!n<+>
<+div>
<+div>
<+(!d&>
<+html>
=un on the bro"ser and obser7ed the output:
A$#*#+ 5C
<!ample ): Form <lements "ith non AJA
<!DOCTYPE html>
<html>
<head>
<lin, rel = "sh!rtcut ic!n" href="1am(ar+l!1!-ic!" t&e="ima1e+2-ic!n"+>
<meta charset="utf-8">
<meta name="view!rt" c!ntent="width=device-width"initial-scale=#">
<lin, rel = "st&lesheet" href="+css+$.uer&-m!(ile-css">
<scrit src = "+$s+$.uer&-$s"><+scrit>
<scrit src = "+$s+$.uer&-m!(ile-$s"><+scrit>
<title>*!rm C!m!nents <+title>
<+head>
<(!d&>
<div data-r!le="a1e" id="a1e#">
<div data-r!le="header" data-theme="(" data-!siti!n="fi2ed">
<h#>C!nt!h *!rm E!n-7$a2<+h#>
<+div>
<div data-r!le ="c!ntent" data-theme="d">
<f!rm acti!n="aar-h" meth!d="PO4T" id="testf!rm" data-ajax="false">
<div data-r!le="fieldc!ntainer">
<la(el >Eama:<+la(el>
<inut t&e ="te2t" name="nama" value=""+><(r +>
<+div>

<la(el>7lamat :<+la(el>
<te2tarea name="alamat" value=""> <+te2tarea>
<+div>
<fieldset data-r!le="c!ntr!l1r!u">
<le1end>Gantina:<+le1end>
<inut t&e="radi!" name="$antina" id="$antinaA" value="A"
chec,ed="chec,ed" +>
<la(el f!r="$antinaA">Aela,i<+la(el>
<inut t&e="radi!" name="$antina" id="$antinaP" value="P" +>
<la(el f!r="$antinaP">Peremuan<+la(el>
<+fieldset>
<la(el f!r="tac">T7C :<+la(el>
<inut t&e="assw!rd" name="tac"+>
<+div>
<la(el>Ee1eri :<+la(el>
<select name="ne1eri">
<!ti!n value="/#">G!h!r<+!ti!n>
<!ti!n value="#/" selected>4elan1!r<+!ti!n>
<!ti!n value="##">Aain-lain<+!ti!n>
<+select>
<+div>
<div data-r!le="fiedlc!ntain">
<fieldset data-r!le="c!ntr!l1r!u">
<le1end>3!(i : <+le1end>
<inut t&e="chec,(!2" name="h!(iMN" value="#"
id="chec,(!2-#" chec,ed="chec,ed"+>
<la(el f!r="chec,(!2-#">'a,an<+la(el>
<inut t&e="chec,(!2" name="h!(iMN" value="6"
id="chec,(!2-6" +>
<la(el f!r="chec,(!2-6">Galan-$alan<+la(el>
<inut t&e="chec,(!2" name="h!(iMN" value=">"
id="chec,(!2->" +> <(r+>
<la(el f!r="chec,(!2->">'ain 1ame<+la(el>
<+fieldset>
<+div>
<inut t&e="su(mit" name="hantar" value="3antar 'a,lumat" +>
<div id="tr&0a$a2" st&le="f!nt-si8e":#<2L Disla&:n!ne">
Besult
<+div>
<div data-r!le="f!!ter" data-theme="(" data-!siti!n="fi2ed">
<h#>*!!ter<+h#>
<+div>
<+div>
<+(!d&>
<+html>
Another file : papar.php
<div data-r!le="header" data-theme="(" data-!siti!n="fi2ed">
<h#>C!nt!h *!rm E!n-7$a2<+h#>
<+div>
<div data-r!le ="c!ntent" data-theme="d">
<Oh
includeP"header-h"QL
ifPissetPR0PO4TM"hantar"NQQS
Rnama=R0PO4TM"nama"NL
Ralamat=R0PO4TM"alamat"NL
Rtac=R0PO4TM"ta1"NL
R$antina=R0PO4TM"$antina"NL
Rne1eri=R0PO4TM"ne1eri"NL
Rh!(i=R0PO4TM"h!(i"NL
Raar="Eama Rnama <(r> 7lamat <(r> Tac Rtac <(r> $antina R$antina<(r>
Rne1eri <(r>3!(i :<(r>"L

f!reachPRh!(i as RminatQ S
Raar-=Rminat-"<(r>"L
T
ech! RaarL
T
includeP"f!!ter-h"QL
O>
<+div>
=un on the bro"ser and obser7ed the output:
LAB Exercise 1:
In'#r"$#%n:
Ans"er all :uestions.
$otal %ar(s : /> mar(s
1. Create %obile ,age as ?U@ belo", you can add other page to ma(e it more interacti7e.
$est %obile ,age using android simulator.

A)> mar(sB

Lab Sheet5 Question

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lab Sheet5 Question

Uploaded by

Copyright:

Available Formats

POLITEKNIK TUANKU SYED SIRAJUDDIN

DEPARTMENT OF INFORMATION AND COMMUNICATION

You might also like