Assalamualaikum Wr. WB
Yooo... Balik lagi ya dengan mimin, jangan bosen ya, apalagi kalo kangen mah wuahahaha. Yaudah daripada banyak basa-basi mending kita langsung ke topik pembahasan hari ini yaitu Komponen Entri Teks. Ada apa aja sih di pembahasan kali ini cekidot..> Teks Area
> Radio button
> Check box
> Option value
> Part Bonus
Kita langsung ke pembahasan pertama yaitu:
1. Text Area
HTML
<textarea> element merepresentasikan input control yang memiliki area teks lebih dari satu baris. Untuk mengatur tinggi dan lebar dari area teks tersebut dapat digunakan attribute rows(untuk baris) dan cols (untuk kolom), atau lebih baik lagi dengan CSS height dan widthproperty.
Teks yang ditulis didalam element <textarea> merupakan teks dasar dengan karakter tanpa batas. teks tersebut dapat disisipkan secara langsung diantara tag pembuka (
<textarea) dan tag penutup (</textarea>) sebagai awal konten.
Attribut dari teks area:
Nah mau tau contoh kodingannya ini dia:
<!DOCTYPE html>
<html>
<head>
<title>Cek form</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Silahkan diisi pada teks area yang tersedia</p>
<p><textarea name="papantulis" cols=40 rows="6"></textarea></p>
</body>
</html>
<html>
<head>
<title>Cek form</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Silahkan diisi pada teks area yang tersedia</p>
<p><textarea name="papantulis" cols=40 rows="6"></textarea></p>
</body>
</html>
Hasilnya akan jadi seperti ini gengs:
> Ada juga contoh teks area dengan atribut kolom ini dia
<!DOCTYPE html>
<html>
<head>
<title>Text Area dengan cols</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Silahkan diisi pada teks area yang tersedia</p>
<textarea name="rendah" cols="30" rows="5"></textarea>
<textarea name="sedang" cols="30" rows="10"></textarea>
<textarea name="tinggi" cols="30" rows="20"></textarea>
</body>
</html>
<html>
<head>
<title>Text Area dengan cols</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Silahkan diisi pada teks area yang tersedia</p>
<textarea name="rendah" cols="30" rows="5"></textarea>
<textarea name="sedang" cols="30" rows="10"></textarea>
<textarea name="tinggi" cols="30" rows="20"></textarea>
</body>
</html>
Hasilnya nih gengs:
> Ada lagi contoh text area readonly(Hanya dapat dilihat,tapi bisa disalin) contoh nih:
<!DOCTYPE html>
<html>
<head>
<title>Cek Form</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<textarea name="untukdibaca" cols="40" rows="6" readonly>Tulisan ini tidak dapat diubah tapi bisa disalin.
</textarea>
</body>
</html>
<html>
<head>
<title>Cek Form</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<textarea name="untukdibaca" cols="40" rows="6" readonly>Tulisan ini tidak dapat diubah tapi bisa disalin.
</textarea>
</body>
</html>
Hasilnya akan jadi:
<!DOCTYPE html>
<html>
<head>
<title>Text area disable</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah</textarea>
</body>
</html>
<html>
<head>
<title>Text area disable</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah</textarea>
</body>
</html>
Hasilnya akan jadi:
<!DOCTYPE html>
<html>
<head>
<title>Penulisan password</title>
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
Password : <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
<html>
<head>
<title>Penulisan password</title>
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
Password : <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>
Hasilnya gengs:
<!DOCTYPE html>
<html>
<head>
<title>Hidden input file</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
Nama : <input type="textarea" name="fnama"><br>
<input type="textarea" name="negara" value="Indonesia">
<input type="submit" value="Submit">
</form>
</body>
</html>
<html>
<head>
<title>Hidden input file</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
Nama : <input type="textarea" name="fnama"><br>
<input type="textarea" name="negara" value="Indonesia">
<input type="submit" value="Submit">
</form>
</body>
</html>
Hasilnya guys:
<!DOCTYPE html>
<html>
<head>
<title>Input file atau foto</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<font face="Tw Cen Mt">
Upload foto
</font>
<form>
<input type="file" name="pio" accept="image/*">
</form>
</body>
</html>
<html>
<head>
<title>Input file atau foto</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<font face="Tw Cen Mt">
Upload foto
</font>
<form>
<input type="file" name="pio" accept="image/*">
</form>
</body>
</html>
Hasilnya:
2. Radio Button
Radio button adalah salah satu elemen form dasar dalam dunia html. Mereka biasa digunakan pada saat ada 2 atau lebih pilihan yang eksklusif, dan user diharuskan dan hanya diperbolehkan untuk memilih hanya salah satu dari pilihan tersebut.
Dengan kata lain, Jika memilih salah satu pilihan dalam form radio button tersebut, maka secara otomatis akan mengeliminasi pilihan lain yang mungkin dipilih sebelumnya.
Fungsi dari button ini sangatlah membantu dalam tujuan menghindarkan user memasukan data yang rentan salah, karena dalam form tersebut hanya ditampilkan pilihan yang valid.
Contoh kodingannya:
<!DOCTYPE html>
<html>
<head>
<title>Radio button</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
<input type="radio" name="pendidikan1">SD <br>
<input type="radio" name="pendidikan2">SMP <br>
<input type="radio" name="pendidikan3">SMA sederajat <br>
<input type="radio" name="pendidikan4">D3 <br>
<input type="radio" name="pendidikan5">S1 <br>
</form>
</body>
</html>
<html>
<head>
<title>Radio button</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<form>
<input type="radio" name="pendidikan1">SD <br>
<input type="radio" name="pendidikan2">SMP <br>
<input type="radio" name="pendidikan3">SMA sederajat <br>
<input type="radio" name="pendidikan4">D3 <br>
<input type="radio" name="pendidikan5">S1 <br>
</form>
</body>
</html>
Hasilnya:
3. Check box
Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.
Dalam penggunaan checkbox HTML, kita hanya memerlukan tag input dengan sebuah atributtype=”checkbox”. Berikut contoh checkbox dalam HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cek Kesehatan</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<b><p>Penyakit yang diderita :</p></b>
<form>
<p>Nama depan : <input type="text" name="fname"></p>
<p>Nama belakang : <input type="text" name="1name"></p>
<input type="checkbox" name="checkbox1">Darah tinggi</input><br>
<input type="checkbox" name="checkbox2">Asam urat</input><br>
<input type="checkbox" name="checkbox3">Maag</input><br>
<p><input type="image" src="Bahan/tombol.gif" alt="Submit" width="100"></p>
</form>
</body>
</html>
<html>
<head>
<title>Cek Kesehatan</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<b><p>Penyakit yang diderita :</p></b>
<form>
<p>Nama depan : <input type="text" name="fname"></p>
<p>Nama belakang : <input type="text" name="1name"></p>
<input type="checkbox" name="checkbox1">Darah tinggi</input><br>
<input type="checkbox" name="checkbox2">Asam urat</input><br>
<input type="checkbox" name="checkbox3">Maag</input><br>
<p><input type="image" src="Bahan/tombol.gif" alt="Submit" width="100"></p>
</form>
</body>
</html>
Hasilnya jeng jeng..
4. option value
HTML
<option> element merepresentasikan sebuah opsi (pilihan dari daftar alternatif). Jadi, opsi ditulis lebih dari satu sebagai daftar untuk memilih pilihan yang diinginkan oleh user.<option> element ditulis sebagai anak element dari <select>, <datalist> dan <optgroup>.
Contoh kodingannya:
<!DOCTYPE html>
<html>
<head>
<title>Browser favorit</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Pilih jurusanmu : </p>
<form>
<select name="jurusan">
<option value="informatika">informatika</option>
<option value="matematika">matematika</option>
</select><br>
<input list="browsers" name="browser">
<datalist id="browsers" name="browser">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
<input type="submit">
</form>
</body>
</html>
<html>
<head>
<title>Browser favorit</title>
<link rel="stylesheet" href="">
</head>
<body>
<h2>Create by : Annisa Rahayu</h2>
<h2>Kelas : XI-RPL1</h2>
<p>Pilih jurusanmu : </p>
<form>
<select name="jurusan">
<option value="informatika">informatika</option>
<option value="matematika">matematika</option>
</select><br>
<input list="browsers" name="browser">
<datalist id="browsers" name="browser">
<option value="Internet Explorer">
<option value="Firefox">
</datalist>
<input type="submit">
</form>
</body>
</html>
Hasilnya yuhuu:
5. Part bonus
Nah disini mimin mau ngeliatin hasil karya mimin membuat sebuah form geng,so penasaran kan ini dia:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="">
</head>
<!--bagian font,table,bg!-->
<body background="bahan/bokeh.jpg">
<font face="Tw Cen Mt">
<br><br><br><br><br><br>
<table border="0" cellspacing="5" align="center" width="400" height="490">
<!--Tabel pendaftaran-->
<tr>
<td bgcolor="#3A76BB"><font color="white" size="+4">
<center>Pendaftaran</td></font></center>
</tr>
<!--bagian isi/baris kedua-->
<tr>
<td bgcolor="#E5E5D7">
<form>
<dd>
<b>Nama pengguna :</b><br> <!--username-->
<input type="text" name="fname" size="40"><br><br>
<b>Kata sandi :</b><br> <!--sandi-->
<input type="password" name="pwd" size="40"><br><br>
<b>Email :</b><br> <!--email-->
<input type="text" name="email" size="40"><br><br>
<b>Tanggal lahir :</b><br> <!--tanggal lahir-->
<input list="hari" name="hari" size="3">
<input list="bulan" name="bulan" size="8">
<input list="tahun" name="tahun" size="5">
<datalist id="hari"> <!--list hari-->
<option value="01">
<option value="02">
<option value="03">
<option value="04">
<option value="05">
<option value="06">
<option value="07">
<option value="08">
<option value="09">
<option value="10">
<option value="11">
<option value="12">
<option value="13">
<option value="14">
<option value="15">
<option value="16">
<option value="17">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
<option value="23">
<option value="24">
<option value="25">
<option value="26">
<option value="27">
<option value="28">
<option value="29">
<option value="30">
<option value="31">
</datalist>
<datalist id="bulan"><!--list buat bulan-->
<option value="Januari">
<option value="Februari">
<option value="Maret">
<option value="April">
<option value="Mei">
<option value="Juni">
<option value="Juli">
<option value="Agustus">
<option value="September">
<option value="Oktober">
<option value="November">
<option value="Desember">
</datalist>
<datalist id="tahun"><!--list buat tahun-->
<option value="2010">
<option value="2009">
<option value="2008">
<option value="2007">
<option value="2006">
<option value="2005">
<option value="2004">
<option value="2003">
<option value="2002">
<option value="2001">
<option value="2000">
<option value="1999">
<option value="1998">
<option value="1997">
<option value="1996">
<option value="1995">
<option value="1994">
<option value="1993">
<option value="1992">
<option value="1991">
<option value="1990">
</datalist>
<!--penggunaan radio button-->
</select><br><br>
<b>Jenis Kelamin :</b><br>
<input type="radio">Pria
<input type="radio">Wanita<br>
<!--Button menggunakan gambar-->
<hr width="210" align="left" color="black">
<input type="image" src="Bahan/simpan.jpg" alt="Submit" width="100">
 <input type="image" src="Bahan/batal.jpg" alt="Submit" width="100"><br>
<!--copyright-->
<hr width="100" align="left" color="black"> By: Annisarhy ♥
</form>
</dd>
</td>
</tr>
</font>
</table>
</body>
</html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" href="">
</head>
<!--bagian font,table,bg!-->
<body background="bahan/bokeh.jpg">
<font face="Tw Cen Mt">
<br><br><br><br><br><br>
<table border="0" cellspacing="5" align="center" width="400" height="490">
<!--Tabel pendaftaran-->
<tr>
<td bgcolor="#3A76BB"><font color="white" size="+4">
<center>Pendaftaran</td></font></center>
</tr>
<!--bagian isi/baris kedua-->
<tr>
<td bgcolor="#E5E5D7">
<form>
<dd>
<b>Nama pengguna :</b><br> <!--username-->
<input type="text" name="fname" size="40"><br><br>
<b>Kata sandi :</b><br> <!--sandi-->
<input type="password" name="pwd" size="40"><br><br>
<b>Email :</b><br> <!--email-->
<input type="text" name="email" size="40"><br><br>
<b>Tanggal lahir :</b><br> <!--tanggal lahir-->
<input list="hari" name="hari" size="3">
<input list="bulan" name="bulan" size="8">
<input list="tahun" name="tahun" size="5">
<datalist id="hari"> <!--list hari-->
<option value="01">
<option value="02">
<option value="03">
<option value="04">
<option value="05">
<option value="06">
<option value="07">
<option value="08">
<option value="09">
<option value="10">
<option value="11">
<option value="12">
<option value="13">
<option value="14">
<option value="15">
<option value="16">
<option value="17">
<option value="18">
<option value="19">
<option value="20">
<option value="21">
<option value="22">
<option value="23">
<option value="24">
<option value="25">
<option value="26">
<option value="27">
<option value="28">
<option value="29">
<option value="30">
<option value="31">
</datalist>
<datalist id="bulan"><!--list buat bulan-->
<option value="Januari">
<option value="Februari">
<option value="Maret">
<option value="April">
<option value="Mei">
<option value="Juni">
<option value="Juli">
<option value="Agustus">
<option value="September">
<option value="Oktober">
<option value="November">
<option value="Desember">
</datalist>
<datalist id="tahun"><!--list buat tahun-->
<option value="2010">
<option value="2009">
<option value="2008">
<option value="2007">
<option value="2006">
<option value="2005">
<option value="2004">
<option value="2003">
<option value="2002">
<option value="2001">
<option value="2000">
<option value="1999">
<option value="1998">
<option value="1997">
<option value="1996">
<option value="1995">
<option value="1994">
<option value="1993">
<option value="1992">
<option value="1991">
<option value="1990">
</datalist>
<!--penggunaan radio button-->
</select><br><br>
<b>Jenis Kelamin :</b><br>
<input type="radio">Pria
<input type="radio">Wanita<br>
<!--Button menggunakan gambar-->
<hr width="210" align="left" color="black">
<input type="image" src="Bahan/simpan.jpg" alt="Submit" width="100">
 <input type="image" src="Bahan/batal.jpg" alt="Submit" width="100"><br>
<!--copyright-->
<hr width="100" align="left" color="black"> By: Annisarhy ♥
</form>
</dd>
</td>
</tr>
</font>
</table>
</body>
</html>
Hasilnya akan menjadi:
Seperti memakai css ya geng, padahal mimin cuman mainin tabel nya aja... nah mungkin itu saja yang bisa dibahas oleh mimin di pertemuan kali ini.. See you in the next time ya guyss.. Mohon maaf bila ada typo karena mimin hanya manusia biasa.
Hargailah sebuah proses, Karena tanpa proses sebuah hasil tidak akan jadi
0 Komentar