Iklan bawah header

Belajar HTML Part 13 - Atribut Form Pada HTML

Pada tutorial sebelumnya kita telah membahas tentang bagaimana cara membuat form di HTML. Kali ini kita akan mempelajari bagaimana penggunaan atribut pada form HTML. Dalam membuat form HTML tentunya akan ada beberapa atribut yang akan digunakan nantinya pada saat memproses data dengan webserver.

Berikut beberapa atribut yang akan digunakan pada form html.

  1. atribut value merupakan nilai awal yang nantinya akan ditampilkan pada saat dijalankan di browser.
    Contoh:
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama"><br/>
    Nama Belakang :<input type="text">
    </form>
    </body>
    </html>

    atribut value
  2. atribut readonly digunakan untuk membuat nilai pada atribut value tidak bisa diubah.
    Berikut contoh penggunaanya.
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama" readonly><br/>
    Nama Belakang :<input type="text">
    </form>
    </body>
    </html>

    atribut readonly
  3. atribut disabled digunakan untuk menonaktifkan inputan.
    Contoh:
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama" disabled><br/>
    Nama Belakang :<input type="text">
    </form>
    </body>
    </html>

    atribut disabled
  4. atribut size digunakan untuk mengatur lebar pada kotak input.
    Contohnya
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama" size="70"><br/>
    Nama Belakang :<input type="text" size="50">
    </form>
    </body>
    </html>

    atribut size
  5. atribut maxlength digunakan untuk menentukan batas jumlah teks yang bisa di input.
    Contoh:
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama" maxlength="10"><br/>
    Nama Belakang :<input type="text">
    </form>
    </body>
    </html>

    atribut maxlength
  6. atribut list digunakan untuk menampilkan jenis item pada form inputan.
    Contoh
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    <input list="browser" name="internet">
    <datalist id="browser">
    <option value="chrome">
    <option value="opera">
    <option value="mozilla"gt;
    </datalist>
    </form>
    </body>
    </html>

    atribut list
  7. atribut min dan max digunakan untuk menentukan nilai minimum dan maksimum untuk elemen <input>.
    Contoh
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="date" name="day" max="1980-12-31"><br/>
    Nama Belakang :<input type="date" name="day" min="2001-01-02">
    </form>
    </body>
    </html>

    atribut min dan max
  8. atribut placeholder digunakan sebagai pengganti dari label field.
    Contoh
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Form Pada HTML</title>
    </head>
    <body>
    <form>
    Nama Depan :<input type="text" value="nama" placeholder="masukan nama"><br/>
    Nama Belakang :<input type="text">
    </form>
    </body>
    </html>

    atribut placeholder

Selanjutnya

Untuk tutorial HTML lainnya, silahkan cek di List tutorial HTML

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel