BAB
5
FROM
5,1 PENGENALAM FROM
From digunakan sebagai fasitilas untuk
memasukan data.data yang ditampung di dalam from akan dip roses kelanjutan dari
server.proses inilah yang disebut action.ccara mengunakan from adalah dengan menambah elemen
<from> yang diikuti beberapa atribut setelah tag pembuka<from>.contoh
<rfom
name=”koment”method=”post”action=”komp.php”> isi </from>
5.2 ATRIBUT FROM
1
.ACTION:menjelaskan apa yang terjadi
dengan data ketika from di submit.
2.
METHOD: ada dua cara untuk mengirim sesuai dengan metode htpp
1.get
2.
pos
3.
NAME: Digunakan mengandifitasi from sama seperti atribut id ,umumnya tidak di gunakan lagi
jika sudah mengunakan id.
4.
ID: digunakan mendefinasi elemen from
nilai dari atribut ini harus unik
5.
ONSUBMIT : untuk menjalani event script client side ketika from di –submit.
6.
ONRESET: untuk menjalani event script client side ketika from di reset
7.
ENCTYPE: menentukan bagaimana metode pengkodean yang di lakukan browser sebelum data dikirim ke server
8.TARGET
: Menunjukan frame atau halaman yang akan dimuat ketika from di submit
5.3KOMPONEN
FROM
A.Input
Text
Ada
3 jenis kotak input teks yang digunakan
pada from:
1.
Single –line teks input control.
Contoh: <input type=”text”name=”txtcari”value=”cari”
size=”20”maxlegth=”64”/>
2.
Password input control
Contoh: <input
type=”password”name=”txtpass”value=”size=”20”maxlegth=”20”>
3.
Muti-line text input
control
Berikut contoh muti-line text input
<textarea name=”txtfeedback”rows=”20”
cols=”50”ketik saran disini.</textarea>
B.TOMBOL
Control ini digunakan untuk membuat tombol.untuk
control ini ,kita juga mengunakan elemen<input> , hanya pada atribut type
saja yang di bedakan.ada3 nilai pada
atribut type yang sering digunakan
1.
Submit; melaksanakan
perintah submit from pada saat ditekan.
2.
Reset;me
reset(menggosokan)semua isian yang ada di dalam from.
3.
Button;tombol biasanya menjalankan perintah yang telah
disiapkan
C . CEK BOX
Control ini digunakan untuk membuat kotqa
cek(checkbox).
Contoh checkbox: <input type=”checkbox”
name=”chskill” value=”xhtml”/>XHTML </br>
<input type=”checkbox “
name=”chksill”value=”CSS”/>CSS </br>
<input type=”checkbox” name=”chskill”
value=”javascript”/>java <br>
D. RADIO
BUTTONS
Hamper sama seperti checkbox ,hanya saja pilihan yang
ter-cek tidak dapat lebih dari satu.value dari antribut type yang di gunakan
adalah radio”.
E.SELECT
BOXES
Membuat
isian pilihan berupa menu drop down.
<select
name=”pilwarna”multiple=”muttiple’><option selected=”selected”
value=””> pilih warna </option>
<option
value=”merah”>merah</option>
<option
value=”hijau”>hijau</option>
<option
value=”biru”>biru</option>
</select>
F. FILE SELECT BOXES (FILE FIELD)
Digunakan untuk membuat kotak pilihan untuk mengambil file dari dalam computer yang
leb ih sering di kenal dengan sebutan upload file.
Contoh : <input type =”file”
name=”fileupload”
Accept=”image/*”/>
G. HIDDEN KONTROL (hideen field)
Digunakan untuk komponen yang bersembunyi
.
Contoh script: <input type “name= halamantersembunyi”
Value=”home page”/>
<input type=”submit”value=”Click jika
ini halaman favorit dalam web kami.”/>
H <FIELDSET>dan<LEGEND>
Elemen <fieldset> digunakan membuat
bingkai dari komponen from yang di grup untuk memperlihatkan bahwa mereka memiliki hubungan.
Elemen <legend> digunakan untuk
membuust judul dari bingkai yang dirancang dengan mengunakan <fieldset>
I.
“DISBLED”DAN “READONLY”
Reandonly
digunakan untuk memcegah perubahan nilai pada komponen control from.
LATIHAN 1
<html xinlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en"xml : lang="en">
<head>
<title>creating a file upload control </title>
</head>
<body>
<form action="http://www.example.com/imageUpload.asp"methood="post"
name="froImageUpload" enctype="multipart/form-data">
<input type="file" name="fileupload"
accept="image/*" />
<br /><br /><input type="submit" value="submit" />
</form>
</body>
</html>
OUTPUTNYA:
LATIHAN 2
<html>
<head>
<title>formulir</title>
</head>
<body>
<center><br>form data diri</b> </center>
<hr>
<table>
<tr><td>nama<td> : <input type=text name="nama"size="20"> <tr><td>Alamat<td> : <input type=text name="alamat" size="30">
<tr><td>kota<td> : <input type=text name="kota"size="22">
<tr><td>telp<td> : <input type=text name="telp"size="15">
<tr><td>jenis kelamin<td> : <input type=text name="radio"name="kelamin">Pria<input type="radio"
name="kelamin">Wanita
<tr><td>hoby<td> : <input type="checkbox" name="musik">musik<input type="checkbox"
name="olahraga">Olahraga<input type="checkbox"name="jalan">jalan
<tr><td>agama<td> : <select size="1" name="agama">
<option>Islam</option>
<option>kristen</option>
<option>katolik</option>
<option>hindu</option>
<option>budha</option>
</select>
<tr><td>Asal Sekolah<td> : <input type="text"name=asalsma" size="35">
<tr><td>jurusan<td> : <input type="text"
name="jurusan" size="20">
</table>
</form>
<hr>
<input type="submit" value=kirim><input type="reset">
</body>
</html>
OUTPUTNYA:
LATIHAN 3
<html xinlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en"xml : lang="en">
<head>
<title>creating groups of options with a disabled option</title>
</head>
<body>
<form action="http://www.example.org/info.asp"methood="get" name="frminfo">
please select the product you are interested in:<br/>
<select name="selinformation">
<option disabled="disabled" value="">-- hardware--</option>
<option value="desktop">desktop computers</option>
</optgroup>
<optgroup label="software">
<optional value="officesoftware">office software</option>
<option value="games">games</option>
</optgroup>
<optgroup label="peripherals">
<option value ="monitors">monitor</option>
<option value ="input devices">input devices</option>
<option value ="storage">storage</option>
</select>
<br /><br /><input type="submit" value="submit" />
</form>
</body>
</html>
OUTPUTNYA:
LATIHAN 4
<html xinlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">
<head>
<title>Select boxes with the &1t;optgroup>element</title>
</head>
<body>
<form action="http://www.example.org/info.asp"methood="get" name="frminfo">
please select the product you are interested in:<br/>
<select name="selinformation">
<optgroup label="hardware">
<option value="desktop">desktop computers</option>
<option value="laptop">laptop computers</option>
</optgroup>
<optgroup label="software">
<optional value="officesoftware">office software</option>
<option value="games">games</option>
</optgroup>
<optgroup label="peripherals">
<option value ="monitors">monitor</option>
<option value ="input devices">input devices</option>
<option value ="storage">storage</option>
</optgroup>
</select>
<br /><br /><input type="submit" value="submit" />
</form>
</body>
</html>
OUTPUTNYA:
LATIHAN 5
<html xinlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en"xml : lang="en">
<head>
<title>contact Us</title>
</head>
<body>
<h1>contact Us</h1>
<form action="contact.aspx" method="post"
name="frmRespondToAd">
<fieldset>
<legend>your message:</legend>
<table>
<tr>
<td><label for="emailTo">To</label></td>
<td><input type="text" name="txtTo"
readonly="readonly" id="emailTo" size="20" tabindex="2"></textarea></td>
</tr>
</table>
</fieldset>
<legend>how you found us:</legend>
<table>
<tr>
<td><label for="emailbody">how did you hean of us </label></d>
<td>
<select name="selReferrer">
<option value="google">google</option>
<option value="ad">Local newspaper
ad</option>
<option value="friend">friend</option>
<option value="other">other</option>
</select>
</td>
</tr>
<tr>
<td><label
for="newsletterSignup">Newsletter</label></td>
<td><input type="checkbox" name="chkbody"
id="newsletterSignup" checked="checked" /> Ensure this box is checked if you would like to recive email updates</td>
</tr>
</tabel>
</fieldset>
<input type="submit"value="send message"/>
</form>
</body>
</html>
OUTPUTNYA:
LATIHAN 6
<html xinlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">
<head>
<title>voting</title>
</head>
<body>
<style type="text/css">td {width:100; text-align:center;}</style>
</head>
</body>
<h2>Register your opinion</h2>
<p>How well do you rate the information on this site
(where 1 is very poor, and 5 is very good) ?</p>
<form action="http://www.example.com/ads/respond.aspx"
method="get" name="frmRespondToAD">
<table>
<tr>
<td><input type="radio"name="radVote"value="1"
id="vpoor" /></td>
<td><input type="radio"name="radVote"value="2"
id="poor" /></td>
<td><input type="radio"name="radVote"value="3"
id="avarage" checked="checked /></td>
<td><input type="radio"name="radVote"value="4"
id="good" /></td>
<td><input type="radio"name="radVote"value="5"
id="vgood" /></td>
</tr>
<tr>
<td><label for="vpoor">1 <br />very poor</label></td>
<td><label for="poor">2 <br />poor</label></td>
<td><label for="avarage">3 <br
/>avarage</label></td>
<td><label for="good">4 <br />good</label></td>
<td><label for="vgood">5 <br />very good</label></td>
</tr>
</table>
<input type="submit"value="Vote now"/>
</form>
</body>
</html>
OUTPUTNYA:
SEKIAN BAB 5 DARI SAYA, SEMOGA BERMANFAAT
THANK'S :)
