Cara Membuat Button, Text Area, Select, CheckBox Di HTML
1. Komponen Teks
Komponen
ini sering juga disebut sebagai komponen string. Syntak yang digunakan
<Input Type=“Text Name=Nama Size=20>
Input adalah kata kunci
Type
adalah jenis atau tipe input
Name
adalah nama variabel
Size adalah jumlah karakter
Coba kalian buat tampilan web
seperti dibawah ini :
<html>
<form>
<tr>
<td><H3>MENGENAL KOMPONEN
FORM</h3><BR>
</TR>
<TR>
<td>NAMA<input type="text"
name="nama"size=20">
</tr>
<tr>
<br>
<td>ALAMAT<input
Type="text" name="nama" size=30>
</tr>
<tr>
<br>
<td>KETERANGAN<input
Type="text" name="nama" size=40>
</tr>
<tr>
<br>
</form>
<html>
2. Radio Button
Radio
button adalah suatu tombol yang digunakan untuk mengambil salah satu pilihan
dari banyak pilihan yang tersedia.
Cara penggunaan perintah adl
sbb :
<Input Type=“radio”
Name=“nama” Value=“K”>
<Input Type=“radio”
Name=“nama” Value=“TK”>
Keterangan :
Input adalah kata kunci atau keyword
Type adalah
tipe input dalam hal ini Radio Button
Name adalah
definisi variable
Nama adalah
nama variable
Value adalah isi dari variable bila
dipilih.
Buatlah tampilan web berikut
ini :
<html>
<h3>RADIO
BUTTON</h3>
<p> Agama atau
kepercayaan terhadap Tuhan Yang Maha Esa :
<br>
<input
type="radio" name="Agama"
Value="I">Islam<br>
<input
type="radio" name="Agama"
value="K">Kristen<br>
<input
type="radio" name="Agama"
value="H">Hindu<br>
<input
type="radio" name="Agama"
value="B">Budha<br>
<input
type="radio" name="Agama"
value="P">Protestan<br>
</html>
3. Checked
Jika
kalian menginginkan salah satu jawaban atau pilihan dalam radio button ingin
dijadikan pilihan default gunakan checked. Artinya saat program dijalankan
diatas browser secara otomatis sudah ada jawaban yang ditandai, namun tentu
saja kalian harus memindahkanya ke jawaban yang benar.
Buatlah tampilan dibawah ini
dengan menggunakan radio button dan checked :
<html>
<h3>RADIO
BUTTON dan CHECKED</h3>
<FROM method=Post
action="Noactionyet">
Apakah kalian sudah
lulus SMP?
<br>
<input
type="radio" name="Jawaban" Value="Y“
Check>Ya<br>
<input
type="radio" name="Jawaban"
value="T">Tidak<br>
</form>
</html>
4. Check Box
Check box
sangat beda dengan radio button. Radio button berbentuk lingkaran sendangkan
check box berbentuk persegi. Pada pilihan yang ditampilkan Check Box sebenarnya
bisa diambil atau bisa juga tidak diambil tergantung kebutuhan. Jika tidak
sesuai makan jawaban bisa dikosongkan.
Syntax penulisan programnya
sbb :
<INPUT TYPE=CHECKBOX
NAME=NAMA VALUE=“K”>
Keterangan :
Input adl kata kunci atau keyword
Type
adl tipe input dalam hal ini Check Box.
Name
adl definisi variable
Nama
adl nama variabel
Value adl isi dari variable bila dipilih.
Buatlah tampilan berikut ini
:
<html>
<h3>Menggunakan
CheckBox</h3>
<p>
<form Method=post
action="noactionyet">
Microsoft Certified
System Engineer adalah ?
<br><Input
Type=checkbox name=Jawab1 Value="MCSE">MCSE
<br><Input
Type=checkbox name=Jawab2 Value="MCP">MCP
<br><Input
Type=checkbox name=Jawab3 Value="MCDBA">MCDBA
<br><Input Type=checkbox
name=Jawab4 Value="MMOUS">MMOUS
<br><Input
Type=checkbox name=Jawab5 Value="MOUS">MOUS
</form>
</html>
Apabila
salah satu jawaban dalam check box akan dijadikan pilihan default maka harus
menggunakan printah Checked. Artinya pada saat program dijalankan diatas
browser secara otomatis sudah ada jawaban yang ditandai, namun tentu saja masih
bisa menambahkan sesuai dengan pilihan.
Buatlah tampilan berikut ini
:
<html>
<h3>Menggunakan
CheckBox dan Checked</h3>
<p>
<form Method=post
action="noactionyet">
Microsoft Certified
System Engineer adalah ?
<br><Input
Type=checkbox name=Jawab1 Value="MCSE" checked>MCSE
<br><Input
Type=checkbox name=Jawab2 Value="MCP">MCP
<br><Input
Type=checkbox name=Jawab3 Value="MCDBA">MCDBA
<br><Input
Type=checkbox name=Jawab4 Value="MMOUS">MMOUS
<br><Input
Type=checkbox name=Jawab5 Value="MOUS">MOUS
</form>
</html>
5. Select dan Option
Select adalah suatu perintah yang digunakan untuk
memilih salah satu jawaban dari daftar pilihan dalam bentuk dropdown. Select ini
digunakan untuk mengidentifikasi pilihan sedangkan untuk membuat dan
menampilkan pilihan adalah dengan perintah Option.
Syntax :
<SELECT
NAME=“PENERBIT”>
<OPTION>BUKU KOMPUTER
DATAKOM
Buatlah tampilan berikut ini
:
<html>
<h3>Menggunakan
Select and option</h3>
<h4>Buku ini
diterbitkan oleh </h4>
<br>
<select
name="PENERBIT">
<Option>Fajar Corporation Jakarta
<Option Selected>Datakom Lintas Buana
Jakarta
<Option>Kucar Kacir Bogor
<Option>Angin Ribut Sukabumi
<Option>Maju Mundur Cianjur
<Option>Maju Trus Bandung
<Option>Mundur Bae Cianjur
</select>
</html>
6. Scroll Up dan Down
Buatlah tampilan spt
disamping berikut ini :
<html>
<h3>Menggunakan
Select, option Select dan Size=n</h3>
Buku ini diterbitkan
oleh
<p>
<select
name="PENERBIT" Size=7>
<Option>Fajar Corporation Jakarta
<option>Hayat Raharja
<option>Luly lala
<option>Mahardika
<option>Salam Kangen
<Option Selected>Datakom Lintas Buana
Jakarta
<Option>Kucar Kacir Bogor
<Option>Angin Ribut Sukabumi
<Option>Maju Mundur Cianjur
<Option>Maju Trus Bandung
<Option>Mundur Bae Cianjur
</select>
</html>
7. Select, Multiple
Ctrl + Klik digunakan untuk
mengambil beberapa pilihan satu persatu Shif + klik digunakan untuk mengambil
beberapa pilihan sekaligus.
8. Button
Dalam
HTML dikenal 2 jenis Button yaitu Submit dan Reset Tombol Submid digunakan
untuk mengaktifkan Action ketika sudah berhadapan dengan ASP atau CGI yang ada
pada server. Tombol Reset digunakan untuk membersihkan data yang ada dalam form
yang udah dimasukkan .
Buatlah Tampilan berikut ini
:
<html>
<h3>Menggunakan
Tombol Submid dan Reset</h3>
<form method=post
action="tampil.asp">
NAMA<input
type=text Name=Nama1 size=30><br>
ALAMAT<input
type=text Name=Nama2 size=40><br>
KOTA<input
type=text Name=Nama3 size=40><p>
<input
type=submit name=Button1
Value="Kirim">
<input type=reset
name=button2 value="hapus">
</form>
</html>
9. Menggunakan Button
Pilihan
ini digunakan apabila mendesain form yang melibatkan lebih dari dua tombol.
Jangan lupa bahwa tombol-tombol yang saya jelaskan ini hanya akan aktif jika
disimpan di server IIS telah diistall. Ada beberapa tombol yang bisa dibuat
dengan menggunakan perintah TYPE=BUTTON. Type ini umumnya digunakan bersamaan
dengan program JavaScript atau VBScript dengan menggunakan perintah EVENT.
Buatlah Tampilan berikut ini
:
<html>
<h3>Menggunakan
Type= BUtton</h3>
<form method=post
action="http://localhost/E:/SMAN3/WEB/tampil.ASP">
NAMA<input
type=text Name=Nama1 size=30><br>
ALAMAT<input
type=text Name=Nama2 size=40><br>
KOTA<input
type=text Name=Nama3 size=40><p>
<input
type=submit name=Button1 value="Kirim">
<input type=reset
name=button2 value="hapus">
<input
type=Button name=button3 value="Cari">
</form>
</html>
10. Membuat Password
Dalam
HTML pembuatan password tidak terlalu sulit karena tetap menggunakan BUTTON dan
dikombinasikan dengan perintah VALUE.
Buatlah tampilan berikut ini
:
<html>
<h3>Ketikkan
Password</h3>
<form method=post
action="http://localhost/E:/SMAN3/WEB/tampil.ASP">
Username<input
type=text name=Nama1 Size=30><br>
Password<input type=Password
name=Nama2 Size=8><p>
<input
type=submit name=Button Value="Login">
</form>
</html>
11. Text Area
Digunakan untuk memasukan
data dalam area yang lebih luas.
Syntax :
tag<textarea> ditutup
dengan tag</textarea>
Untuk jumlah baris dan kolom
dapat diatur dengan menggunakan syntax:
ROWS=n dan COLs=n, Contoh
jika 5 baris dan 6 kolom maka ditulis Rows=5 Cols=6
Buatlah tampilan berikut ini
:
<html>
<h3>Menggunakan
Text area atau Memo</h3>
<form method=post
action=noactionyet>
<textarea
name=Memo Rows=10 Cols=50>
Ketikkan Data Anda
dikolom ini!!
</textarea>
</form>
</html>
Cara diatas adalah Cara Membuat Hyperlink Atau Tautan silahkan tinggal kan komentar bila ada yang tidak dimengerti.
0 Comments