Membuat Form Di HTML

Hai, disini saya mau memposting bagaimana caranya membuat form di HTML :D

Yang pertama, tentu saja buka terlebih dahulu aplikasi editor, lalu tulis kode standar html seperti head, title, dsb. Di dalam tag body, cukup tambahkan tag <textarea> kemudian pilih cols dan wors yang mau sebesar apa. Di dalamnya juga kita diminta untuk menambahkan nama, sebagai pembeda sekaligus pengidentifikasi antara textarea yang satu dengan yang lainnya. Berikut ini adalah kodingan saya:

 <center>
 <p>
  Silahkan isi pada teks area yang tersedia! :)
 </p>
 <textarea name="Tulisan" cols="50" rows="10">
 </textarea>
 </center>

   Anda juga bisa menambah banyak textarea dalam satu html. Berikut adalah contohnya:

 <p>Silakan isi pada kolom teks yang tersedia :D</p>
 <textarea name="Pendek" cols="30" rows="5"></textarea>
 <textarea name="Sedang" cols="30" rows="10"></textarea>
 <textarea name="Tinggi" cols="30" rows="20"></textarea>
</body>

    Textarea tidak harus selalu di isi. Textarea bisa dibuat tanpa perlu dimasukkan input, bisa hanya dibaca saja cukup dengan menambahkan tag readonly seperti ini:

 <textarea name="BacaSaja" cols="60" rows="10" readonly>
          Tulisan ini tak bisa diubah tapi bisa disalin :)
 </textarea>

Atau hanya sebagai textarea saja, tidak bisa diubah maupun disalin. Setelah di run biasanya tandanya dengan warna abu-abu di textarea nya. Cukup tambahkan tag disabled:

 <textarea name="TERLARANG" cols="60" rows="10" disabled>
  Tulisan ini tak bisa diubah ataupun disalin :)
 </textarea>

Ada juga textarea untuk password. Form ini bersifat menerima inputan password. Setiap text yang di input akan di tampilkan sebagai tanda titik(di samarkan)

 <form>
  Password: <input type="Password" name="Pswd" maxlength="6">
 </form>

Di atas adalah contoh dari form password yang sudah diisi dengan maksimal 6 karakter.




Berikut ini adalah text area hidden 1
Fungsinya untuk menyembunyikan textarea

 <form>
  Nama : <input type="textarea" name="KolomNama"><br>
  <input type="hidden" name="negara" value="Indonesia">
  <input type="submit" name="Submit">
 </form>

Berikut ini adalah text area hidden 2

 <form>
  Nama : <input type="textarea" name="KolomNama"><br>
  <input type="textarea" name="negara" value="Indonesia">
  <input type="submit" name="Submit">
 </form> 

Yang satu ini adalah form input untuk mengupload gambar.

 <font face="Comic Sans MS">Upload Foto</font>
 <form>
  <input type="file" name="pic" accept="image">
 </form>

    Yang dibawah ini adalah radiobutton, inputan ini berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan dengan menggunakan form radio. Berbeda dengan yang lain, di radio, kita diharuskan juga membuat tag value. Contoh nya adalah form pemilihan jenis kelamin dan di bawah ini.

  Tingkat Pendidikan :
  <form>
         <input type="radio" name="Pendidikan" value="SD" /> SD <br>
         <input type="radio" name="Pendidikan" value="SMP" />SMP <br>
         <input type="radio" name="Pendidikan" value="SMA" /> SMA Sederajat <br>
         <input type="radio" name="Pendidikan" value="D3" /> D3 <br>
         <input type="radio" name="Pendidikan" value="S1" />S1 <br>
  </form>

Ada juga checkbox, dimana kita bisa memilih lebih dari satu pilihan. Kita juga bisa mengubah tombol submit dengan gambar dan mengatur besar gambarnya.

  <center>
 <p>Penyakit yang Diderita</p>
 <form>
       <p>Nama Depan : <input type="text" name="namaDepan"></p>
       <p>Nama Belakang : <input type="text" name="namaBelakang"></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="anime.png" height="150" width="120" alt="Submit"></p>
 </form>
 </center>

Sedangkan option value sendiri adalah sama seperti radio button, namun ditampilkan dalam list yang akan muncul ketika ditekan. Namun jika ditambah dengan input list, maka ketika kita hendak mengetik, akan ada rekomendasi pilihan.

 <p>Pilih Jurusanmu : </p>
 <form>
  <select name="jurusan">
   <option value="IT">Informatika</option>
   <option value="MTK">Matematika</option>
  </select><br>
  <input list="browsers" name="Browser">
  <datalist id="browsers">
   <option value="Internet Explorer">
   <option value="FireFox">
  </datalist>
 </form>

Di bawah ini saya akan menulis koding hasil akhir saya yang membuat form singkat tentang biodata di dalam tabel.

<!DOCTYPE html>
<html>
<head>
 <title>AuliaAgustinaXIRPL1</title>
</head>
<body>
 <center>
 <table  background="bekgron.jpg" cellpadding="8" width=400">
 <form>
  <th align="center"><td>PENDAFTARAN</td></th>
  <tr>
   <td>Nama Pengguna</td>
   <td>: <input type=text name=Nama size=30></td>
  </tr>
  <tr>
   <td>Sandi</td>
   <td>: <input type="password" name="sandi"></td>
  </tr>
  <tr>
   <td>Jenis Kelamin</td>
   <td>:
   <input type="radio" name="jk" value="laki-laki"/> Laki-Laki
   <input type="radio" name="jk" value="perempuan"/> Perempuan</td>
  </tr>
  <tr>
   <td>Tanggal Lahir</td>
   <td>:
    <select name=Tanggal>
    <option name=Tanggal>Tanggal
    <option name=Tanggal>1
    <option name=Tanggal>2
    <option name=Tanggal>3
    <option name=Tanggal>4
    <option name=Tanggal>5
    <option name=Tanggal>6
    <option name=Tanggal>7
    <option name=Tanggal>8
    <option name=Tanggal>9
    <option name=Tanggal>10
    <option name=Tanggal>11
    <option name=Tanggal>12
    <option name=Tanggal>13
    <option name=Tanggal>14
    <option name=Tanggal>15
    <option name=Tanggal>16
    <option name=Tanggal>17
    <option name=Tanggal>18
    <option name=Tanggal>19
    <option name=Tanggal>20
    <option name=Tanggal>21
    <option name=Tanggal>22
    <option name=Tanggal>23
    <option name=Tanggal>24
    <option name=Tanggal>26
    <option name=Tanggal>27
    <option name=Tanggal>28
    <option name=Tanggal>29
    <option name=Tanggal>30
    <option name=Tanggal>31
    </select>
    <select name=Bulan>
    <option name=Bulan>Bulan
    <option name=Bulan>Januari
    <option name=Bulan>Februari
    <option name=Bulan>Maret
    <option name=Bulan>April
    <option name=Bulan>Mei
    <option name=Bulan>Juni
    <option name=Bulan>Juli
    <option name=Bulan>Agustus
    <option name=Bulan>September
    <option name=Bulan>Oktober
    <option name=Bulan>November
    <option value="Desember">Desember
    </select>
    <select name=Tahun>
    <option name=Tahun>Tahun
    <option name=Tahun>2012
    <option name=Tahun>2011
    <option name=Tahun>2010
    <option name=Tahun>2009
    <option name=Tahun>2008
    <option name=Tahun>2007
    <option name=Tahun>2006
    <option name=Tahun>2005
    <option name=Tahun>2004
    <option name=Tahun>2003
    <option name=Tahun>2002
    <option name=Tahun>2001
    <option name=Tahun>2000
    <option name=Tahun>1999
    <option name=Tahun>1998
    <option name=Tahun>1997
    </select>
  </tr>
  <tr>
   <td></td>
   <td><input type="submit" name="masukkan">  <input type="reset" name="hapus"></td>
  </tr>
 </form>
 </table>
 </center>
</body>
</html>

Berikut ini adalah hasilnya: