Langsung ke konten utama

Haikal PG - XI RPL 1 - PWPB Sesi 8

Assalamualaikum Warahmatullahi Wabarakatuh

 Kembali lagi dengan saya,Haikal Putra Gustiansyah. Pada sesi ke 8 ini kita akan membahas textarea, form, dan input tag. Langsung saja ke pembahasan kali ini :

Pada HTML, terdapat komponen entri teks yang fungsinya berbeda-beda salah satunya yang belum dipelajari adalah textArea. TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. Untuk menggunakannya textarea disisipkan pada tag form layaknya komponen form lain yang biasa digunakan.
Format umum pengkodean TextArea : <textarea atribute=”value">
Terdapat beberapa atribut dari text area, diantaranya row,col dan lain sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru textarea.


textArea.html
Tampilan text area
Kita buat text area seperti diatas dengan tag <textarea></textarea> dan berikan kolom juga baris dengan atribut rows dan cols didalamnya. Codenya agar lebih jelas :

<!DOCTYPE html>
<html>
<head>
<title>cek form</title>
</head>
<body>
<p>Silahkan diisi pada teks area yang tersedia</p>
<p><textarea name="papantulis" cols="40" rows="6"></textarea></p>
</body>
</html>




textAreaCols.html
Kita buat textarea dengan bentuk yang beragam seperti ini :
yang kita butuhkan adalah membuat 3 tag textarea dan membedakan attribut cols dan rows nya agar
bentuknya seperti diatas. Code nya :

<!DOCTYPE html>
<html>
<head>
<title>Haikal Putra Gustiansyah XI RPL 1 textArea dengan Cols</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>


textAreaReadOnly.html
Kita gunakan atteibut readonly agar hanya bisa di baca saja dan tidak bisa di ubah. dengan menambahkan attribut readonly didalam text area. Tampilannya jika menggunakan attribut readonly :


ini codenya : 

<!DOCTYPE html>
<html>
<head>
<title>Haikal Putra Gustiansyah XI RPL 1 textAreaReadOnly</title>
</head>
<body>
<textarea name="untukdibaca" cols="40" rows="6" readonly>
Tulisan ini tidak dapat diubah tapi bisa disalin.
</textarea>
</body>
</html>

textAreaReadDisabled.html
Attribut disabled ini bisa membuat isi text area ini tidak dapat diubah ataupun disalin. Tampilannya :
Code nya : 

<!DOCTYPE html>
<html>
<head>
<title>Haikal Putra Gustiansyah XI RPL 1 textAreaReadDisabled</title>
</head>
<body>
<textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah</textarea>
</body>
</html>

Pengkodean textfield dengan attribut password

textAreaPassword.html
kali ini kita akan membuat sebuah form seperti form pengisian sandi. Tampilannya :
Form
dengan tag <form></form> dan didalamnya terdapat <input type="password" maxlenght="6"></input>. Untuk lebih jelasnya lihat code berikut : 

textAreaHidden1.html
hidden berfungsi untuk menyembunyikan. Jika kita membuat <input type="hidden"> maka jika kita jalankan tidak akan terlihat apapun. Kita akan buat sebuah form seperti tampilan berikut :
Hidden
Code :

Jika kita perhatikan codenya ada 2 buah 3 buah input tag namun kenapa hanya ada 2 yang muncul di browser? karena hidden inilah yang menyembunyikannya.


textAreaHidden2.html
Ini adalah lanjutan dari textAreaHidden1.html. Kita coba ubah value code di textAreaHtml1 yang hidden menjadi text area. Maka tampilannya akan seperti ini : 
Codenya :
  




UploadFile.html
kita akan menggunakan tag <input type"file" accept="image/*">. type 'file' ini digunakan untuk mengupload sebuah file baik gambar sesuai keinginan. dan attribut accept ini adalah file yang harus dipenuhi seperti contoh diatas adalah image maka jika kita akan mengupload video maka tidak akan bisa. Contoh : 
Upload File
Codenya :
   


radioButton.html
Radio ini berfungsi untuk memberikan opsi/pilihan. 'radio' ini disimpan didalam tag input dan didalam attribut type seperti ini : <input type="radio"> Contoh tampilannya : 
Radio Button
Codenya :

checkBoxdanImageButton.html
Mirip dengan radio, checkbox ini memberikan opsi pilihan berbentuk 'square'/kotak. Dan kita akan mengubah tombol submit dengan sebuah image namun fungsinya tetap sama untuk men-submit. Tampilannya :
Checkbox and Submit Images

Codenya :


optionDanDataList.html
kita akan membuat menu option dropdown dengan tag form,select,option,input,datalist. Pertama kita buat dulu sebuah tag form <form> </form> dan didalamnya ada tag <select name="jurusan"> </select> dan di dalam tag select kita tambahkan tag <option value="Informatika">Informatika </option>. Untuk lebih jelas lihat codingan berikut : 


Jika kita jalankan di browser maka hasilnya akan menjadi : 

Hasilnya
PENDAFTARAN.html
kali ini kita coba buat form dengan desain menggunakan tabel dan form yang telah kita pelajari tadi. Tampilannya sepeti ini :

Codenya :  
 


Sekian pembahasan pada sesi kali ini, semoga bermanfaat
Wassalamualaikum Warahmatullahi Wabarokatuh

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 36

Assalamualaikum Warahmatullahi Wabarokatuh Halo teman-teman gimana kabarya? semoga sehat selalu ya.. . Pada sesi kali ini kita akan membahas tentang OOP (Object Oriented Programming) pada php. OOP merupakan konsep/metode programming berorientasi pada objek. Jadi didalam OOP semua digambarkan sebagai objek yang di representasikan. Terdiri dari 3 struktur diantaranya : Class, property, dan method/function. Ok kita langsung saja ke materinya. Coba teman-teman buat sebuah file bernama dan berekstensi seperti ini : HewanPeliharaan.php  nah disini kita akan membuat struktur class yang dimana hewan ini memiliki 3 property diantaranya nama, jenis, dan makanan. Untuk lebih jelasnya seperti ini: nama = $nama; $this->jenis = $jenis; $this->makanan = $makanan; } } Tag phpnya tidak perlu ditutup karena ini merupakan class dan kita tidak akan menambahkan code seperti html/js disini. __construct merupakan function yang ada di php, construct ini merupakan bagian code yang akan pertama...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 25

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya Haikal Putra Gustiansyah yang dimana pada sesi kali ini kita akan membahas array assosiatif dan media query. Array assosiatif merupakan sebuah tipe data yang memungkinkan kita menyimpan data yang memiliki tipe data yang berbeda bisa berupa string,numerik, dll. Media Query merupakan salah satu fitur CSS3 yang memungkinkan kita agar membuat halaman yang web yang responsif. Simak materi pada sesi kali ini. Array Asosiatif Array Asos iatif ad alah  array yang tidak menggunakan angka sebagai kunci di setiap nilainya. Jika tidak ditentukan kunci dari sebuah elemen di array, PHP akan otomatis memberikan kuncinya berupa angka. Perbedaanya hanya bagaimana kita mengakses data/elemen-elemen tersebut. Copykan code berikut: LatArrayAsosiatif.php 'Haikal', '1819117580' => 'Milyardin', '1819117581' => 'Steph~~'); echo $siswa['1819117579'] . ' '; ec...
Posting Komentar
Baca selengkapnya

Haikal PG - XI RPL 1 - PWPB Sesi 7

Assalamualaikum Warahmatullahi Wabarokatuh Kembali lagi dengan saya, disini saya akan membahas kembali tag-tag pada HTML. Pada HTML juga kita bisa menambahkan seperti audio, video, flash dengan tag yang akan saya bahas kali ini. Kita langsung saja mulai tutorialnya : Menambahkan Audio Di HTML kita bisa menambakan audio dengan tag <audio> </audio>. Seperti pada tag img kita juga harus memsukkan sumber lagu dengan attribut src="lagu.mp3". Ada juga attribut untuk memulai musik secara otomatis yaitu autoplay, Attribut untuk controls untuk menampilkan sebuah control spesifik audio, Attribut loop ini untuk mengulang lagu jika lagu sudah selesai. Berikut tampilannya jika di jalankan di browser : Tag audio html Codenya : Haikal Putra Gustiansyah XI RPL 1 Audio Menambahkan Video Selain menambahkan audio kita juga bisa menambahkan video dengan tag <video> </video> dan jangan lupa masukkan sumber video dengan src="". Attribut n...
Posting Komentar
Baca selengkapnya