PERTEMUAN
KETIGA
MATERI => TATA CARA MEMBUAT FORM UNTUK HTML
Apakah kita tau form
itu apa?
Form adalah suatu bentuk shapes (bentuk kotak-kotak) yang
bisa di isikan tulisan atau gambar
Kita langsung saja ke contoh
Contoh 1
Langkah-langkah
1.
Kita buka notepad
2.
Kita ketikkan
kode html
3.
Lalu kita simpan
dengan nama yang kita inginkan misal (longin.html), bisa disimpan di
sembarangan tempat
Kita dapat mengetikkan contoh
kode seperti di bawah pada halaman notepad
|
<html>
|
|
<head>
|
|
<title>
|
|
belajar membuat formulir
|
|
</title>
|
|
<style>
|
|
body{
|
|
background-color :white;
|
|
color : blue;
|
|
width: 20%;
|
|
}
|
|
input{background-color :white;
|
|
font-color :red;
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
formulir mahasiswa
|
|
<form>
|
|
<table>
|
|
<tr>
|
|
<td colspan=3>
longin</td>
|
|
</tr>
|
|
<tr>
|
|
<td>user name</td>
|
|
<td>:</td>
|
|
<td><input type = text
size=20 nama = txtuser><br></td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>password</td>
|
|
<td>:</td>
|
|
<td><input type =
password size=20 nama=txtpass><br></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan=3>
|
|
<input type = submit value =
proses color=red>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</body>
|
|
</html>
|
|
dari hasil kode html di atan maka akan tampil seperti gambar di bawah ini
Contoh 2 => membuat form untuk mengimput biodata
Langkah-langkah
1.
Kita buka notepad
2.
Lalu kita simpan
dengan nama yang kita inginkan misal (input biodata.html), bisa disimpan di
sembarangan tempat
3.
Kita ketikkan
kode html seperti contoh di bawah ini
|
<html>
|
|
<head>
|
|
<title> BIODATA </title>
|
|
<style>
|
|
body{ background-color :gold;}
|
|
form{
|
|
background-color :gold;
|
|
color : blue;
|
|
width: 50%;
|
|
font-family: verdana;
|
|
font-size: 12 pt;
|
|
border : 5px solid red;
|
|
border-collapse : collapse;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<form>
|
|
<table>
|
|
|
|
<tr>
|
|
<td colspan=3> INPUT
BIODATA</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td> NIM</td>
|
|
<td>:</td>
|
|
<td><input type=text
name=txtnim size =8></td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td> NAMA</td>
|
|
<td>:</td>
|
|
<td><input type=text name=txtnama
size =30 ></td>
|
|
</tr>
|
|
<tr>
|
|
<td> TEMPAT / TGL.
LAHIR</td>
|
|
<td>:</td>
|
|
<td>
|
|
<input type=text
name=txtntempat size=20>
|
|
|
|
<select name=slttgl>
|
|
|
|
<option>1</option><option>2</option>
|
|
<option>3</option><option>4</option>
|
|
<option>5</option><option>6</option>
|
|
<option>7</option><option>8</option>
|
|
<option>9</option><option>10</option>
|
|
|
|
|
|
</select>
|
|
|
|
<select name=sltbln>
|
|
|
|
<option>1</option><option>2</option>
|
|
<option>3</option><option>4</option>
|
|
<option>5</option><option>6</option>
|
|
<option>7</option><option>8</option>
|
|
<option>9</option><option>10</option>
|
|
<option>11</option><option>12</option>
|
|
|
|
|
|
</select>
|
|
<select name=sltthn>
|
|
|
|
<option>2000</option><option>2001</option>
|
|
<option>2002</option><option>2003</option>
|
|
<option>2004</option><option>2005</option>
|
|
<option>2006</option><option>2007</option>
|
|
<option>2008</option><option>2009</option>
|
|
<option>2010</option><option>2011</option>
|
|
|
|
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td> JENIAS KELAMIN
</td>
|
|
<td>:</td>
|
|
<td><input type=radio
name=jenkel>Laki-Laki
|
|
<input type=radio
name=jenkel>Perempuan
|
|
<td>
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>AGAMA</td>
|
|
<td>:</td>
|
|
<td>
|
|
<select name=sltagama>
|
|
<option>Kristen</option>
|
|
<option>Katolik</option>
|
|
<option>Islam</option>
|
|
<option>Buddha</option>
|
|
<option>Hindu</option>
|
|
<option>Konhucu</option>
|
|
</tr>
|
|
|
|
<tr>
|
|
<td>ALAMAT</td>
|
|
<td>:</td>
|
|
<td><input type=text
name=txtalamat></td>
|
|
</tr>
|
|
<tr>
|
|
<td>HOBBY</td>
|
|
<td>:</td>
|
|
<td><input
type=checkbox>Bola
|
|
<input type=checkbox>Voli
Ball
|
|
<input
type=checkbox>Futsal
|
|
<input
type=checkbox>Renang
|
|
</tr>
|
|
<tr>
|
|
<td>foto</td>
|
|
<td>:</td>
|
|
<td><input type =
file></td>
|
|
</tr>
|
|
<tr>
|
|
<td>keterangan</td>
|
|
<td>:</td>
|
|
<td><textarea cols=40
rows=5></textarea>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan =3
align=center>
|
|
<input type= submit value =
simpan>
|
|
<input type= reset value =
batal>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</form>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
Dari hasil kode html di atas
maka akan tampil seperti gambar di bawah ini
Sekian contoh sederhana untuk membuat form semoga bermanfaat bagi kita
yang membutahkan ,jika ada kesalahan sebelumnya saya minta maaf, mohon di kasih
saran untuk lebih baik lagi
NAMA : GIRALDO SILITONGA
NPM : 180840009
PRODI : TEHNIK INFORMATIKA
DOSEN PENGAMPU : WASIT GINTING S.KOM ,M.KOM
Tidak ada komentar:
Posting Komentar