HTML Dasar : Textarea

by Unknown Agustus 18, 2018 0 Comments

Assalamu'alaikum Warahmatullahi Wabarakatuh,


Baik Sob, mungkin kalian bosen sama intro yang gitu-gitu aja, Wkwkwkwkwkwkwk
Makanya Mimin langsung buka aja, kali ini kita bakalan baca komik Sob.....
Ngga lah kali ini kita bakalan belajar tentang textarea pada HTML, ini Mimim singkatin aja dan ini menurut pendapat pribadi Mimin sendiri tentang apa itu textarea. Textarea nerupakan text yang berada pada suatu area, Bingung? jadi intinya textarea itu kotak yang bisa kita isi sama teks yang kita mau Sob, jadi kaya semacam Papan Tulis tapi Online Sob. Nah ngerti kan?
jadi Textarea ini sama kok kaya Tag Tag HTML yang lainnya. Textarea bisa dibuat dengan menambahkan tag "<textarea></textrarea>".Nah atribut apa aja sih yang bisa gunain di tag ini ? lebih jelasnya bisa lihat tabel ini Sob,

Nah itu Sob penjelasan tentang atribut yang ada pada textarea, cuman disini juga ada beberapa pembahasan lainnya nih Sob,tapi sebelum itu ada beberapa contoh pengunaan dari textarea nih Sob,

Ini Kodingannya Sob :
<!-- Text Area -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<p>Silahkan diisi pada teks area yang tersedia</p>
<p><textarea name="papantulis" cols="40" rows="6"></textarea></p>
</body>
</html>
Dan ini adalah hasilnya :


Selain itu kita juga bisa ngatur berapa jumlah baris dan kolomnya juga nih Sob^^:
<!-- Text Area Cols -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<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>
Dan ini adalah hasilnya :

Buat yang ini kita cuman bisa aja Sob, kita ngga bisa ngubah isi dari textareanya :
<!-- Text Area Read Only -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<textarea name="untukdibaca" cols="40" rows="6" readonly>Septian Ricky Maulana
XI RPL 1</textarea>
</body>
</html>
Dan ini adalah hasilnya :

Nah kalau yang ini kita ngga bisa ubah + ngga bisa nyalin juga apa yang ada di dalemnya :
<!-- Text Area Read Disabled -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana Xi-RPL 1</title>
</head>
<body>
<textarea name="terlarang" cols="40" rows="6" disabled>Septian Ricky Maulana
XI RPL 1</textarea>
</body>
</html>
Dan ini adalah hasilnya :

Kalau yang ini textarea yang bisa kita isi, tapi bentuknya password Sob :
<!-- Text Area Password -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<form>
Password: <input type="Password" name="pwd" maxlength="6">
</form>
</body>
</html>
Dan ini adalah hasilnya :

Coba sobat liat, ketika kita tambahan typenya "Hidden" maka ngga bakal tampil Sob :
<!-- Text Area Hidden -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<form>
Nama : <input type="textarea" name="fnama"><br>
<input type="Hidden" name="negara" value="Indonesia">
<input type="submit" name="submit">
</form>
</body>
</html>
Dan ini adalah hasilnya :

1) Radio Button
Digunakan untuk memilih satu opsi diantara beberapa opsi. Hampir sama dengan select box, tapi perbedaan di Radio Button adalah semua opsinya terlihat.Radio Button akan efektif jika opsinya kurang dari 6 atau 5. Jika opsinya terlalu banyak maka gunakan Select Box.

Ini kodingannya Sob:
<!-- Radio Button -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<p>Tingkat Pendidikan :
<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>
</p>
</body>
</html>
Ini hasilnya Sob :


2) Checkbox
Komponen form yang selanjutnya adalah Check Box. Check box ini memiliki tampilan yang hampir mirip dengan Radio Button, namun di Check Box ini kita dapat memilih lebih dari satu pilihan yang tersedia. Penggunaanya dapat ditemui di isian Hobby,dll dalam sebuah form pendaftaran

Ini Kodingannya Sob :
<!-- Checkbox dan Image Button -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<p>Penyakit yang diderita :</p>
<form>
<p>Nama Depan :<input type="text" name="fname"></p>
<p>Nama Belakang : <input type="text" name="lname"></p>
<input type="Checkbox" name="Checkbox1">Darah Tinggi <br>
<input type="Checkbox" name="Checkbox2">Asam Urat <br>
<input type="Checkbox" name="Checkbox3">Maag <br>
<p><input type="Image" src="image/submit.jpg" alt="Submit"></p>
</form>
</body>
</html>
Ini hasilnya Sob :

 3) 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>.

Ini kodingannya Sob :
<!-- Option Value dan Data List -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<form>
<select name="Jurusan">
<option value="Informatika">Informatika</option>
<option value="Matematika">Matematika</option>
</select><br>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Exploler"></option>
<option value="Firefox"></option>
</datalist>
<input type="submit">
</form>
</body>
</html>
Ini hasilnya Sob :
Nah Ini ada salah satu contoh tambahan Sob, selain kita bisa nambahin textarea dan yang lainnya kita juga bisa nambahin tombol buat Upload File Sob, caranya kaya gini Sob :

<!-- Upload File -->
<!DOCTYPE html>
<html>
<head>
<title>Septian Ricky Maulana XI-RPL 1</title>
</head>
<body>
<font face="Courier New, Courier, mono">Upload Foto</font>
<form>
<input type="file" name="pic" accept="image/*">
</form>
</body>
</html>
Ini hasilnya Sob :
Untuk kali ini, hanya seperti ini adanya Sob, maklum karena Mimin pake kartu Dhuafa jadi suka Kezel kalau Upload Wkwkwkwkwkwkwk XD, Maaf yah Sob karena Mimin pun selama ini masih belajar kok, Makasih yah Sob :D

  Wassalamu'alaikum Warahmatullahi Wabarakatuh

0 Komentar