Belajar HTML Dasar (Text Area) -Praktikum 8

Assalamualaikum WR.WB

Kembali lagi ke blog saya,pada postingan kali ini saya akan membagikan tutorial atau cara menyajikan entri teks atau yang biasa juga dikenal dengan form menggunakan HTML.
Untuk lebih jelasnya,kita langsung ke materinya.

Text Area

Text area digunakan untuk sebuah tulisan dengan area yang khusus dan text area yang khusus dan text area ini mempunyai beberapa tipe

Coding:

Output:

Untuk membuat text area kita menggunakan tag <textarea></textarea>.kita juga mengatur colspan dan rowspan nya untuk mengatur lebar dari text area tersebut.

Coding:

Output:

Text Area ReadOnly

Salah satu dari jenis text area ada yang disebut read only(hanya bisa dibaca) artinya tidak dapat diubah maupun di salin

Coding:

Output:

Text Area Disabled

Tipe lainya dari text area yaitu disabled yang berarti tulisan tidak dapat disalin maupun di maupun diubah,Jadi hanya bisa untuk dibaca.

Coding:

Output:

Text field password

Text area juga bisa digunakan untuk password,jadi saat kita mengisi data di text area tersebut maka akan otomatis data kita disembunyikan.Kita juga bisa mengatur batas masukan data dengan menggunakan attribute maxlength="".

Coding:

Output:

Text Area Hidden

salah satu tag yang bisa digunakan yaitu tag <input> dan tag ini juga da beberapa tipe ada hidden untuk menyembunyikan teaxtarea tersebut, submit digunakan untuk tombol dimana kita akan mengirimkan data yang sudah diisi sebelumnya dan ada attribute value="" yang fungsinya untuk mengatur tulisan pada tombol tersebut.

Coding:

Output:

Upload File

Contoh penggunaan tipe input lainnya yaitu tipe file, fungsinya untuk mengupload file ke sebuah web dan ada attribute accept="" yang fungsinya yaitu untuk merincikan bahwa yang bisa di upload yaitu jenis file tertentu

Coding:

Output:

CheckbuttonAndImageButton

Codingan diatas contoh penggunaan tipe input lainnya yaitu tipe checkbox, jika yang sebelumnya hanya bisa memilih satu pilihan. Untuk yang sekarang user bisa memilih beberapa pilihan dan yang sudah dipilih biasanya ditandai dengan tanda centang.Select and Datalist

Coding:

Output:

Optionvalue And Datalist

Contoh penggunaan dari select dan datalist, keduanya mempunyai fungsi yang sama yaitu untuk memilih tulisan yang sebelumnya sudah disediakan. Perbedaanya yaitu jika select awal tampilannya yaitu pilihan pertama. Sedangkan datalist tampilan pertamanya yaitu kosong. Didalam kedua tag tersebut terdapat tag lain untuk pilihannya yaitu tag <option>

Coding:

Output:

Praktikum Tugas

Coding:

<!DOCTYPE html>
<html>
<head>
 <title>Ammar taradifa XI RPL 3</title>
</head>
<body bgcolor="gainsboro">
  <form>
   <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="text" name="password"></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>
      </select>
      <select name="BulanLahir">
       <option value="bulan1">Januari</option>
       <option value="bulan2">Februari</option>
       <option value="bulan3">Maret</option>
      </select>
      <select name="TahunLahir">
       <option value="2000">2000</option>
       <option value="2001">2001</option>
       <option value="2002">2002</option>
      </select>
      </td></p>
</tr>
<tr>
     <td></td>
     <td><input type="submit" value="Simpan">
         <input type="submit" value="Batal">
     </td>
    </tr>
</table>
</form>
</body>
</html>

Output:

Nah,cukup sekian dulu postingan kali ini,semoga postingan ini bermanfaat bagi kita semua.Sampai berjumpa lagi di postingan selanjutnya.

Cari Blog Ini

Tamvan Bloggers

Belajar HTML Dasar (Text Area) -Praktikum 8

Assalamualaikum WR.WB

Komentar

Posting Komentar

Postingan populer dari blog ini

Laravel : Create Data, Validation, dan Old Input

Belajar PHP (Nested Looping) -Praktikum 24

Program Menentukan Hari Menggunakan If Dan Switch Case dan