PWPB - Pertemuan 8

Assalamu'alaikum Wr.Wb

Salam sejahtera bagi kita semua...
Balik lagi di SekolahQue, kali ini kita akan membuat sebuah codingan form pada Html. Perhatikan dengan seksama tag-tag yang ada pada codingan di bawah ini.

(Untuk mengetahui setiap codingan HTML-nya mohon untuk klik setiap judul tugas yang diberi warna biru).

• TextArea.html

    Apa itu TextArea? TextArea adalah sebuah area atau form yang dimana kita bisa menginput sebuah teks di dalamnya. Tag <textarea> memiliki attribute antara lain:

• cols (Menentukan lebar text area ).
• rows (Menentukan tinggi text area). 
• disabled (Text area dapat diubah)
• maxlength(Menentukan panjang karakter pada text  area ).
• readonly(Text area bersifat read-only ).
• name (nama dari text area).
• autofocus (Area tertentu pada text area, dimana kursor y otomatis mengarah ke daerah  tersebut ketika halaman web diload).
• form (Satu atau lebih form pada text area ).
• Placeholder (Memberikan  gambaran singkat tentang  nilai pada tex tarea ).
• Wrap (Menentukan bagaimana cara teks  dikemas dalam text area sebelum teks  tersebut dikirimkan ).

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Silahkan diisi pada teks area yang tersedia

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

• TextAreaCols.html

    Nahh...TextAreaCols disini hampir sama dengan text area biasa. Bedanya disini adalah sebuah textarea dengan menggunakan attribut cols dan rows yang fungsinya cols untuk menentukan lebar textarea sedangkan rows untuk menentukan tinggi textarea. Kalian bisa atur lebar atau tinggi text area sesuai dengan apa yang kalian inginkan di cols dan rows. perhatikan codingan dibawah:

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Silahkan diisi pada teks area yang tersedia

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

• TextAreaReadOnly.html

    Text Area disini hampir sama dengan text area di atas, perbedaannya adalah di text area menggunakan attribut readonly hanya bisa dibaca dan disalin tetapi tidak bisa menginput teks yang diinginkan. perhatikan codingan di bawah ini...

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Tulisan ini tidak dapat dirubah tapi bisa disalin

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

• TextAreaReadDisabled.html

    TextArea menggunakan attribute disabled berbeda dengan menggunakan attribute readonly. Read disabled hanya bisa dibaca tetapi tidak bisa di input ataupun disalin. Perhatikan codingan di bawah ini...

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Tulisan ini tidak dapat di salin maupun dirubah

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

• TextAreaPassword.html

    Nahhh....buat kalian yang ingin membuat form log-in atau pendaftaran bisa menggunakan contoh Textarea ini. Fungsi dari tag<input> adalah sebagai bahasa kepada komputer untuk menginput teks atau kata pada html. Dan di contoh screen shot-an terdapat attribute type itu berfungsi untuk menentukan type input apa yang akan digunakan misalnya input berupa password atau username. sedangkan name adalah nama dari sebuah text area dan maxlength berfungsi untuk menentukkan panjang karakter pada text area.

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Password:

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

• TextAreaHidden1.html

     TextArea hidden ini adalah sebuah text area input yang dimana ketika kita mengetik sebuah teks pada text area akan muncul riwayat kata yang sebelumnya pernah kita ketik. Fungsi attribute value adalah untuk menamai sebuah input submit. misalnya <input type="submit" value="accept"> maka kotak yang tadinya memiliki bacaan "submit" menjadi "accept".

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

NAMA:

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

Contoh penjelasan di atas seperti ini. Jadi, bisa kalian simpulkan bahwa yang di maksud text area hidden adalah seperti di bawah ini.

• TextAreaHidden2.html

      Text area hidden ini hampir sama dan tidak jauh beda dengan text area hidden 1. Perhatikan codingan di bawah ini...

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Nama:

SCREEN SHOT

Dibawah ini adalah hasil outpunya:

• UploadFile.html

     Nahh...disini kita akan belajar form html untuk mengupload sebuah foto atau bisa berupa file. Tetapi, pada codingan ini hanya belajar untuk mengupload sebuah picture atau foto. Pada attribute value="image/*" artinya bahwa kita bisa mengupload atau memilih gambar sesuai yang kita inginkan. Perhatikan codingan di bawah ini...

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

upload foto

SCREEN SHOT

 Dibawah ini adalah outputnya:

• RadioButton.html

     Radio button adalah sebuah tombol dimana kita akan memilih sebuah keterangan contohnya memilih jenis kelamin, jurusan, kelas atau pendidikan. Perhatikan contoh codingan di bawah ini:

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Tingkat pendidikan:

SD
SMP
SMA Sederajat
D3
S1

SCREEN SHOT

 Dibawah ini adalah outputnya:

• CheckboxdanImagebutton.html

     Nahh...Check box itu berbeda dengan radio button. Bentuk dari radio button bulat sedangkan check box itu kotak dan jika kita klik maka akan muncul tanda ceklis sedangkan radio button hanya bulat hitam.

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Penyakit yang di derita

Nama Depan :
Nama Belakang :
Darah Tinggi
Asam Urat
Maag

SCREEN SHOT

Dibawah ini adalah outputnya:

• OptionAndValueDataList.html

     Digunakan untuk mempresentasikan daftar opsi (pilihan) yang diberikan pada sebuah input control.

tag <option> berfungsi sebagai sebuah pilihan seperti memilih tanggal lahir dan sebagainya. Sedangkan tag<datalist> berfungsi sebagai pilihan pada sebuah input control. Perhatikan codingan di bawah ini...

      SekolahQue || ADRIAN SATRIA PUTRA XI-RPL3
    

Pilih Jurusanmu :

Informatika Matematika

SCREEN SHOT
Dibawah ini adalah outputnya:

Dapat kita simpulkan bahwa datalist adalah sebuah pilihan pada sebuah input control.

• TugasPraktikum8.html

    Nahh...di akhir praktikum 8 ini kita akan mencoba membuat form pendaftaran. Perhatikan baik-baik setiap tag html yang di gunakan dan pelajari...

SCREEN SHOT

Dibawah ini adalah hasil outputnya:

Sekiann dulu yaa...
Semoga bisa terus bermanfaat dan bisa menjadi referensi untuk kalian.
Doakan terus agar SekolahQue bisa terus berkarya dan menjadi blog favorit kalian...

Assalamu'alaikum Wr.Wb