Header Ads

Syntax Belajar HTML Part 6 - Lanjutan Membuat Form

November 26, 2023 , ,

Halo temen-temen!

Kembali lagi bersama saya di blog ini. Kali ini kita akan belajar membuat form menggunakan HTML. Apa aja sih yang akan kita pelajari? Ok yang pertama kita akan belajar membuat form dengan tipe inputan color. Kedua, membuat form dengan tipe inputan datetime. Ketiga, membuat form dengan tipe inputan time. Keempat, membuat form dengan tipe inputan file. Kelima, membuat form dengan tipe inputan hidden. Keenam, membuat form dengan tipe inputan number, Ketujuh, membuat form dengan tipe inputan password. Kedelapan, membuat form dengan tipe inputan range. Baik, selanjutnya kita akan langsung ke syntax htmlnya.



I. Input Color  

    Dalam tipe inputan color ini, kita dapat memilih warna. Biasanya, kode warna pada tipe inputan warna     menggunakan kode hexadecimal. 

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Color</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Color</h2>
      <table>
        <tr>
          <td>
            <label for="color">Pilih Warna</label>
            <input type="color" name="color" id="color" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

   

II. Input DateTime

    Dalam tipe inputan DateTime ini kita akan mendapatkan value yang berisi tanggal dan waktu. Disini kita menggunakan input type Datetime-local.

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type DateTime</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type DateTime</h2>
      <table>
        <tr>
          <td>
            <label for="date">Tanggal</label>
            <input type="datetime-local" name="date" id="date" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>



III. Input Time

    Dalam tipe inputan time ini, kita akan mendapatkan value berupa waktu, yaitu jam dan menit atau HH:MM.

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Time</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Time</h2>
      <table>
        <tr>
          <td>
            <label for="time">Jam Masuk</label>
            <input type="time" name="time" id="time" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>


IV. Input File

    Dalam tipe inputan file ini, kita bisa mendapatkan value berupa file, seperti gambar, dokumen, dll. Didalam tipe inputan file biasanya membutuhkan atribute enctype="multipart/form-data" pada tag formnya.

Synatx
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type File</title>
  </head>
  <body>
    <form action="file.html" method="get" enctype="multipart/form-data">
      <h2>Belajar Membuat Input Type File</h2>
      <table>
        <tr>
          <td>
            <label for="file">Pilih Dokumen</label>
            <input type="file" name="file" id="file" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>


V. Input Hidden

    Dalam tipe inputan hidden biasanya value dari type input ini tidak dapat dilihat ataupun di modifikasi oleh user.

Synatx
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Hidden</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Hidden</h2>
      <table>
        <tr>
          <td>
            <input type="hidden" name="username" id="username" value="arigatou" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="name">Nama</label>
            <input type="text" name="name" id="name" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="address">Alamat</label>
            <input type="text" name="address" id="address" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

 

VI. Input Number

    Dalam tipe inputan number atau angka ini berisi value angka-angka, dari bilangan positif hingga negatif.

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Number</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Number</h2>
      <table>
        <tr>
          <td>
            <label for="amount">Total</label>
            <input type="number" name="amount" id="amount" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>


VII. Input Password

    Dalam tipe inputan password akan menampilkan value berupa karakter ataupun angka yang mana value tersebut dapat disembunyikan ataupun dilihat.

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Password</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Password</h2>
      <table>
        <tr>
          <td>
            <label for="username">Username</label>
            <input type="text" name="username" id="username" />
          </td>
        </tr>
        <tr>
          <td>
            <label for="password">Password</label>
            <input type="password" name="password" id="password" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>


VIII. Input Range

    Dalam tipe inputan range ini biasanya digunakan untuk volume. Value input type range secara default antara 0 sampai 100.

Syntax
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Input Type Range</title>
  </head>
  <body>
    <form action="">
      <h2>Belajar Membuat Input Type Range</h2>
      <table>
        <tr>
          <td>
            <label for="volume">Volume</label>
            <input type="range" name="volume" id="volume" min="0" max="100" />
          </td>
        </tr>
        <tr>
          <td>
            <input type="submit" value="Submit" />
          </td>
        </tr>
      </table>
    </form>
  </body>
</html>

                

Sekian tutorial mengenai belajar HTML lanjutan membuat form. Semoga bermanfaat dan kurang lebihnya saya minta maaf. Terima kasih telah berkunjung di blog saya. See you when i see you!!!


Video Tutorial Part 6 - Belajar HTML Lanjutan Membuat Form


Post a Comment

No comments

Subscribe to: Post Comments ( Atom )
Powered by Blogger.