Format Text Area Dalam HTML (Peretmuan 8)

Assalamu'alaikum Wr. Wb.

Hello Guys, bertemu lagi dengan saya Salman Fauzan di postingan terbaru ini. Kali ini kita masih akan melanjutkan pembahasan seputar html, namun kali ini pasti akan lebih menarik karena kita pembahasan kita kali ini kita akan membuat tampilan sebuah web registrasi yang dapat meng-upload sebuah file/foto. Langsung aja kita mulai pembahasan kta kali ini.

1. Text Area
Text Area adalah sebuah tag yang digunakan untuk menampilkan sebuah kolom yang berisikan "Commentar" atau hal-hal penting yang ingin disampaikan, yang dapat memudahkan kita untuk meng-copy seluruh text yang berada dalam Text Area tersebut.

Text Area Editable

Text Area Editable adalah sebuah Text Area yang isinya dapat dirubah oleh siapa pun dan juga dapat di-copy. Untuk contohnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Text Area </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
<b>
    <p>
Silahkan Diisi Pada Teks Area Yang Tersedia </p>
<p>
<textarea Name="papantulis" Cols = 40 Rows = 6>
    </textareaa></p>
</b></center>
</body>
</html>

Hasilnya akan menjadi seperti ini :

Kalian juga dapat mengatur ukuran Text Area nya sesuai selera kalian masing-masing dengan cara mengganti jumlah Cols / Rows pada codingannya atau juga kalian dapat mengaturnya dengan cara menarik ujung kanan bawah text area sesuai selera kalian masing-masing. Untuk contoh ukuran dari Text Area dapat dilihat dari codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Text Area Cols </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
<b>
    <p>
Silahkan Diisi Pada Tekx Area Yang Tersedia </p>
<textarea Name = "Rendah" Cols = 30 Rows = 5></textareaa>
    <textarea Name = "Sedang" Cols = 30 Rows = 10></textareaa>
    <textarea Name = "Tinggi" Cols = 30 Rows = 20></textareaa>
    </b><center>
   </body>
</html>

Hasilnya pun tidak jauh beda dengan yang pertama, hanya saja ukurannya yang berbeda,. Oh ya saya juga menggunakan Text area untuk menampilkan codingan ini. Hasilnya akan menjadi seperti ini :

Text Area Read Only

Text Area Read Only adalah sebuah Text Area yang isinya tidak dapat diubah oleh siapapun kecuali pemiliknya, terdapat 2 jenis Text Area Read Only, yang pertama adalah Text Area Red Only yang dapat di-copy dan yang kedua adalah Text Area yang tidak dapat di-copy. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Text Area Read Only </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
<b>
    <textarea Name = "untukdibaca" Cols = 40 Rows = 6 Readonly>
    Tulisan ini tidak dapat diubah tapi bisa disalin.
    </textareaa>
    </b></center>
</body>
</html>

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Text Area Disabled </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
<b>
    <textarea Name = "terlarang" Cols = 40 Rows = 6 Disabled>
    Tulisan ini tidak dapat disalin maupun diubah.
    </textareaa>
    </b></center>
</body>
</html>

Untuk hasilnya tidak jauh berbeda dengan Text Area Editable. Oh ya Guys, kita tidak dapat membuat Text Area dalam Text Area, sebagai contohnya adalah Codingan Text Area ini, oleh karena itu saya menambahkan satu kata didalam Tag penutup codingan Text Area diatas agar dapat menampilkan seluruh codingannya. Hasilnya akan menjadi seperti ini :

2. Pembuatan Menu Username Password
Kita juga dapat membuat Menu yang dapat kita inputkan sendiri salah satu nya adalah Menu untuk meng-input Username dan Password. Untuk password apabila ingin dibatasi batas max penginputannya kalian dapat mengubah nya dalam maxlength yang terdapat dalam Tag <form> tersebut, apabila tidak akan membatasi jumlah inputan kalian dapat menghapus Attribute maxlength tersebut. Untuk lebih jelas kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Penulisan Password </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
<b>
    <form>
    Password : <input type ="Password" name "pwd" maxlength = "6">
    </form>
</b><center>
   </body>
</html>

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Hidden Input File </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form>
    <b>
    Nama : <input type ="textarea" name = "fnama"> <br>
    <input type = "hidden" name = "negara" value = "Indonesia">
    <input type = "submit" value = "Submit">
    </form>
</b>
   </body>
</html>

Untuk hasilnya kalian dapat melihat gambar dibawah ini :

Kita juga dapat menggabungkan keduanya menjadi sebuah format seperti contoh codingan ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Hidden Input File </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form>
    <b>
    Nama : <input type ="textarea" name = "fnama"> <br>
    <input type = "hidden" name = "negara" value = "Indonesia">
    <input type = "submit" value = "Submit">
    </form>
</b>
   </body>
</html>

Hasilnya akan menjadi Kolom dengan format yang dapat kita isi sesuai nama kolom yang tersedia. Type hidden digunakan untuk menyembunyikan suatu kalimat, Attribute value digunakan untuk menampilkan sebuah isian, dalam codingan diatas apabila kita menambahkan Type hidden dan Attribute value maka hasilnya akan menampilkan sebuah kalimat yang otomatis tertera dalam kolom tersebut, tetapi kita juga dapat merubahnya jika tidak sesuai keinginan kita. Type submit digunakan untuk membuat tombol submit. Untuk lebih jelasnya kalian dapat melihat gambar dibawah ini :

3. Menampilkan / Memasukan File
Kita juga dapat men-upload sebuah gambar kedalam web kita, caranya dengan nenambahkan Attribute type = "file" untuk memunculkan menu Choose File, name = "pic" untuk menampilkan nama gambar sesudah dipilih, accept = "image/*" mencari file dengan format default image. Untuk lebih jelas kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Input File / Foto </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<center>
    <form>
    <input type = "file" name = "pic" accept = "image/*">
    </form>
</center>
</body>
</html>

Hasilnya dapat dilihat pada gambar dibawah ini :

4. Membuat Menu Pilihan

Kalian juga dapat menambahkan beberapa Pilihan kedalam kalimat yang dibuat, Untuk menambahkan pilihan kalian dapat menggunakan Attribute type = "radio" untuk menambahkan pilihan yang hanya bisa memilih satu pilihan saja, type = "checkbox" untuk menambahkan pilihan yang dapat memilih beberapa pilihan, atau juga pilihan yang terdapat berbagai pilihan tetapi hanya dapat memilih satu pilihan saja dengan menggunakan Tag <option> dan Attribute Value. Untuk lebih jelasnya kalian dapat melihat codingan dibawah ini :

Radio Button

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Tingkat Pendidikan </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<b>
     <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>
</b>
   </body>
</html>

Hasilnya yang pertama adalah penggunaan pilihan yang hanya dapat memilih satu pilihan saja, kalian dapat melihat gambar dibawah ini untuk lebih jelasnya :

Check Box & Image Button

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Cek Kesehatan </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<b>
    <p>
Penyakit yang Diderita : </p>
<form>
      <p>
Nama Depan : <input type = "text" name = "fname"> </p>
<p>
Nama Belakang : <input type = "text" name = "fname"> </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 = "" alt = "Submit" > </p>
</p>
</form>
</b>
   </body>
</html>

Hasilnya yang kedua adalah penggunaan pilihan yang dapat memilih beberapa pilihan yang terdapat dalam menu pilihan, untuk lebih jelasnya kalian dapat melihat gambar dibawah ini :

Option Value & Data List

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Form Jurusan </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<b>
     <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" >
      <option value = "Internet Explorer" >
      <option value = "Firefox" >
     </datalist>
     <input type = "Submit">
    </form>
</b>
   </body>
</html>

Hasil yang ketiga adalah penggunaan pilihan yang menyediakan beberapa pilihan yang hanya dapat memilih satu pilihan saja. Untuk lebih jelasnya kalian dapat melihat gambar dibawah ini :

Kalian juga dapat membuat Form Registrasi dengan menggunakan Attribute yang telah dijelaskan diatas, sebagai contoh saya akan membuat Form Registrasi yang menggunakan Attribute diatas. Kalian dapat melihat codingan dibawah ini :

<html>
 <head>
  <title>Salman Fauzan Fahri Aulia - XI RPL 3 - Form Registrasi </title>
 </head>
   <body Background = "1.png" width = "100%" height = "100%" >
    <p align = "Right">
<font face = "Impact" color = "Darkorange" >
     <big><i>Salman Fauzan Fahri Aulia XI-RPL 3</i></big>
     </font>
    </p>
<form>
     <center>
<table>
<tr>
       <th colspan="2"><p>
<center>
<b>PENDAFTARAN</b></center>
</p>
</th>
      </tr>
<tr>
       <p>
<td>Nama Pengguna</td>
       <td> : <input type="text" name="name"></td></p>
</tr>
<tr>
       <p>
<td>Sandi</td>
       <td> : <input type="password" name="pwd"></td></p>
</tr>
<tr>
       <p>
<td>Jenis Kelamin</td>
       <td> : <input type="Radio" name="Pria">Pria<input type="Radio" name="Wanita">Wanita</td></p>
</tr>
<tr>
       <p>
<td>Tanggal Lahir</td>
       <td> :  <select name="TanggalLahir"> <option value="1">1</option>
                 <option value="2">2</option>
                 <option value="3">3</option>
                 <option value="3">4</option>
                 <option value="3">5</option>
                 <option value="3">6</option>
                 <option value="3">7</option>
                 <option value="3">8</option>
                 <option value="3">9</option>
                 <option value="3">10</option>
         </select>
         <select name="BulanLahir">  <option value="bulan1">Januari</option>
                   <option value="bulan2">Februari</option>
                                                                <option value="bulan3">Maret</option>
                   <option value="bulan3">April</option>
                   <option value="bulan3">Mei</option>
                   <option value="bulan3">Juni</option>
                   <option value="bulan3">Juli</option>
                   <option value="bulan3">Agustus</option>
                   <option value="bulan3">September</option>
                   <option value="bulan3">Oktober</option>
                   <option value="bulan3">November</option>
                   <option value="bulan3">Desember</option>
         </select>
         <select name="TahunLahir">  <option value="2000">1999</option>
                <option value="2001">2000</option>
                <option value="2002">2001</option>
                <option value="2002">2002</option>
                <option value="2002">2003</option>
                <option value="2002">2004</option>
                <option value="2002">2005</option>
                <option value="2002">2006</option>
                <option value="2002">2007</option>
                <option value="2002">2008</option>
                <option value="2002">2009</option>
         </select>
       </td></p>
</tr>
<tr>
       <td></td>
       <td><input type="submit" value="Simpan"> <input type="submit" value="Batal"></td>
      </tr>
</table>
</center>
</form>
</body>
</html>

Hasilnya kalian dapat melihat Form Registrasi yang telah saya isi pada gambar dibawah ini :

Sampai disini dulu ya Guys pembahasan kita kali ini. Mohon maaf bila ada kesalahan pada penyampaian maupun pengetikan. See you Next!

Wassalamu'alaikum Wr. Wb.

Cyber Information Cafe

Cari Blog Ini

Format Text Area Dalam HTML (Peretmuan 8)

Komentar

Posting Komentar