Puisi

BAB 5. FORM

Ø Form digunakan sebagai fasilitas untuk memasukkan data. Cara menggunakan form adalah dengan menambahkan elemen <form> yang diikuti beberapa atribut setelah tag pembukan <form>.

v Atribut Form

No	Atribut	Keterangan
1.	Action	Menjelaskan apa yang terjadi dengan data ketika form di submit. Biasanya value (nilai) dari atribut ini adalah halaman atau program yang akan menerima informasi.
2.	Method	Metode ini yang akan digunakan untuk pengiriman data form ke server. Ada 2 cara pengiriman sesuai dengan metode http: 1. Get 2. Post
3.	Id	Digunakan untuk mengidentifikasi elemen form,nilai dari atribut ini harus unik. Misal : id=formlogin,id=formtamu
4.	Name	Digunakan untuk mengidentifikasi form. Sama seprti atribut id,umumnya tidak digunakan lagi jika sudah menggunakan id. Cara penggunaannya sama seperti id.
5.	Onsubmit	Untuk menjalankan event script client side ketika form di submit. Biasanya script yang ditulis dalam javascript.
6.	Onreset	Untuk menjalankan event script client side ketika form di reset. Biasanya script yang ditulis dalam javascript.
7.	Enctype	Menetukan bagaimana metode pengkodean yang dilakukan browser sebelum data dikirim ke server. Biasanya browser cenderung mendukung 2 jenis pengkodean,yaitu : Ø Application/x-www-form-urlencoded : metode sekitar kebanyakan form. Metode ini digunakan browser karena beberapa karakter seperti spasi dan lainnya tidak dapat dikirim ke server. Ø Multipart/form-data : memungkinkan form mengirimkan dat dalam bagian-bagian.
8.	Target	Menunjukkan frame atau halaman yang akan dimuat ketika form disubmit. Biasanya dipadukan bersama elemen<a>

Ø Check Box

Control ini digunakan untuk membuat kotak cek (checkbox). Pembuatan kontrol ini juga menggunakan elemen <input>,tetapi value dari atribut type adalah “checkbox”.

Ø Radio Buttons

Hampir sama dengan checkbox,hanya saja pilihan yang tercek tidak dapat lebih dari satu. Value dari atribut type yang digunakan adalah radio.

Ø Select Boxes

Membuat isian pilihan berupa menu drop down. Untuk membuat select boxes,digunakan elemen <select>,dimana untuk membuat pilihan yang ada didalamnya digunaka elemen <option>

Contoh :

<html>

<head>

<title>Formulir</title>

</head>

<body>

<center><b>Form Data Diri</b></center>

<hr>

<table>

<tr><td>Nama : <input type=text name="nama"

size="20"> <te><td>Alamat<td> : <input type=text name="alamat"size="30">

<tr><td>Kota : <input type=text name="kota"

size="22">

<tr><td>Telp : <input type=text name="telp"

size="15">

<tr><td>Jenis Kelamin : <input type="radio"

name="kelamin">Pria<input type="radio" name

="kelamin">Wanita

<tr><td>Hobby : <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>Hindu</option>

<option>Budha</option>

</select>

<tr><td>Asal Sekolah<td> : <input type="text"

name="asalsma"size="35"

<tr><td>Jurusan : <input type="text"

name="jurusan"size="35"

</table>

</form>

<hr>

<input type="submit"value=Kirim><input type="reset">

</body>

</html>
tampilan output script diatas sebagai berikut :

SELAMAT MQENCOBA :):)

IMAGE,AUDIO,VIDEO

1. Image

a. Anda membutuhkan tag <img>. Tag <img> tidak membutuhkan penutup dan disertai tag src yang fungsinya untuk mengambil gambar dqari satu alamat tertentu.

i. IMG : tag ini berfungsi untuk memberitahu browser bahwa ada gambar yang dimasukkan kedalam situs tersebut.

ii. SRC : kode ini memberitahu kepada browser dimana letak file gambar tersebut. Perlu diperhatikan dalam penulisan nama gambar karen dianggap bersifat case sensitive,artinya huruf besar dan kecil dianggap berbeda.

iii. WIDTH/HEIGHT : tag ini menjelaskan ukuran gambar,berapa pixel tinggi dan lebar gambar.

iv. ALT : tag ini berfungsi memberitahukan tanda atau nama gambar menjadi text

v. BORDER : merupakan garis yang berada ditepi gambar

vi. HSPACE/VSPACE : berfungsi memberikan spasi atau jarak gambar dari garis table.

Contoh 1 :

<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"

xml:lang="en">

<head>

<title>image</title>

</head>

<body>

<img src="13082712_1025956937485847_8102439917117640047_n.jpg" alt="wrox logo"

width="120" height ="120" />

</body>

</html>

Contoh 2:

<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"

xml:lang="en">

<head>

<title>the align attribute</title>

</head>

<body>

<h1>no align</h1>

<p>

text 1.<br />

<img src="1919097_992292364185638_1425660359600318799_n.jpg" alt="css"width="250"height="150" />

text 2 <br />

<h1>align left</h1>

<p>

text 3. <br />

<img src="12321711_1005384106209797_6065374703358492859_n.jpg" alt="css"width="250"height="150" align="left" />

text 4 <br />

</p>

<h1>align right</h1>

<p>

text 5. <br />

<img src="12438983_959539437460931_1289919849445904287_n.jpg" alt="css"width="250"height="150" align="right" />

text 6. <br />

</p>

</body>

</html>

Contoh 3 :

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">

<head>

<title> image as a link</title>

</head>

<body>

<a href="http://www.wrox.com"><img src="13082712_1025956937485847_8102439917117640047_n.jpg" alt="wrox logo" width="500"height="250" /></a>

</body>

</html>

Ø Script dan Image yang dipilih harus dalam satu folder.

BAB 3.PENJELASAN DAN SCRIPT MEMBUAT IMAGE,AUDIO,DAN VIDEO DENGAN HTML :)

IMAGE,AUDIO,VIDEO

1. Image

a. Anda membutuhkan tag <img>. Tag <img> tidak membutuhkan penutup dan disertai tag src yang fungsinya untuk mengambil gambar dqari satu alamat tertentu.

i. IMG : tag ini berfungsi untuk memberitahu browser bahwa ada gambar yang dimasukkan kedalam situs tersebut.

iii. WIDTH/HEIGHT : tag ini menjelaskan ukuran gambar,berapa pixel tinggi dan lebar gambar.

iv. ALT : tag ini berfungsi memberitahukan tanda atau nama gambar menjadi text

v. BORDER : merupakan garis yang berada ditepi gambar

vi. HSPACE/VSPACE : berfungsi memberikan spasi atau jarak gambar dari garis table.

Contoh 1 :

<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"

xml:lang="en">

<head>

<title>image</title>

</head>

<body>

<img src="13082712_1025956937485847_8102439917117640047_n.jpg" alt="wrox logo"

width="120" height ="120" />

</body>

</html>

Contoh 2:

<html xmlns="http://www.w3.orgg/1999/xhtml" lang="en"

xml:lang="en">

<head>

<title>the align attribute</title>

</head>

<body>

<h1>no align</h1>

<p>

text 1.<br />

<img src="1919097_992292364185638_1425660359600318799_n.jpg" alt="css"width="250"height="150" />

text 2 <br />

<h1>align left</h1>

<p>

text 3. <br />

<img src="12321711_1005384106209797_6065374703358492859_n.jpg" alt="css"width="250"height="150" align="left" />

text 4 <br />

</p>

<h1>align right</h1>

<p>

text 5. <br />

<img src="12438983_959539437460931_1289919849445904287_n.jpg" alt="css"width="250"height="150" align="right" />

text 6. <br />

</p>

</body>

</html>

Contoh 3 :

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"xml : lang="en">

<head>

<title> image as a link</title>

</head>

<body>

<a href="http://www.wrox.com"><img src="13082712_1025956937485847_8102439917117640047_n.jpg" alt="wrox logo" width="500"height="250" /></a>

</body>

</html>

Ø Script dan Image yang dipilih harus dalam satu folder.
> outputnya sebagai berikut :

Kamis, 10 November 2016

BAB 5. FORM

SELAMAT MQENCOBA :):)

BAB 3.PENJELASAN DAN SCRIPT MEMBUAT IMAGE,AUDIO,DAN VIDEO DENGAN HTML :)