Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML

Selasa, 08 November 2016

Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML

    4 komentar

SCRIPT KIDDIES - Dalam pembuatan form pada HTML tentu saja terdapat beberapa atribut yang akan digunakan nantinya pada saat memproses data dengan webserver. Berikut beberapa atribut form yang digunakan saat pembuatan form pada HTML

Pada tutor sebelumnya kita sudah membahas Membuat Form Pada HTML. Sekarang kita akan melanjutkan tutorial belajar HTML penggunaan atribut pada form HTML. Berikut beberapa atribut yang digunakan pada form HTML.
  1. Atribut Value atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser. Berikut Contohnya : 
     <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 12 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
    <form>
        Nama Depan : <input type="text" name="nama" value="Nama"><br>
        Nama Belakang : <input type="text">
</body>
</html>

  2. Atribut Readonly Jika menggunakan atribut ini maka nilai value tidak dapat diubah. Berikut Contohnya :
    <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
    <form>
        Nama Depan : <input type="text" name="nama" value="Nama" readonly><br>
        Nama Belakang : <input type="text">
</body>
</html>

  3. Atribut Disabled Atribut ini digunakan mematikan inputan. Maksudnya element disabled dapat digunakan tetapi inputan tidak dapat diganti dan tidak bisa diklik. Berikut Contohnya :
    
<!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
    <form>
        Nama Depan : <input type="text" name="nama" value="Nama" disabled><br>
        Nama Belakang : <input type="text">
</body>
</html>
  4. Atribut Size Atribut ini mengatur lebar kotak inputan, Untuk lebih jelasnya perhatikan contoh berikut :
    <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
    <form>
        Nama Depan : <input type="text" name="nama" value="Nama" size="40"><br>
        Nama Belakang : <input type="text">
</body>
</html>

  5. Atribut Maxlength Atribut ini digunakan untuk menentukan jumlah inputan teks yang dibatasi. Untuk lebih jelasnya perhatikan contoh berikut :
     <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
    <form>
        Nama Depan : <input type="text" name="nama" value="Nama" maxlength="5"><br>
        Nama Belakang : <input type="text">
</body>
</html>

    Hanya Dapat Mengetik 5 Huruf
  6. Atribut List atribut ini untuk menampilkan list pada form input. Lebih jelasnya perhatikan contoh berikut :
    <!DOCTYPE html>
<html>
<head>
    <title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
    <input list="browser" name="internet">
    <datalist id="browser">
    <option value="chrome">
    <option value="mozilla">
    <option value="opera">
    </datalist>
</form>
</body>
</html>

  7. Atribut Min dan Max Atribut ini menentukan nilai minimum dan maksimum untuk element <input>. Atribut min dan max digunakan untuk jenis inputan seperti : Nomor, Kisaran, Tanggal, Date Time, Date Time Lokal, Bulan, Waktu, Minggu. Perhatikan contoh berikut :
    <!DOCTYPE html>
<html>
<head>
    <title>Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML</title>
</head>
<body>
<form>
    <input type="date" name="day" max="1979-12-31">
    <input type="date" name="day" min="2000-01-02">
</form>
</body>
</html>
  8. Placeholder Atribut . Atribut ini digunakan sebagai pengganti file dari file label field. Perhatikan contoh berikut :
    <!DOCTYPE html>
<html>
<head>
    <title>Belajar Atribut Form pada html</title>
</head>
<body>
<form>
    <input type="text" name="nama" placeholder="masukkan nama">
</form>
</body>
</html>
Itulah beberapa atribut form yang ada pada HTML untuk penerapan form menggunakan css atau php akan saya jelaskan pada waktu yang akan datang Insya'Allah . Jika ada pertanyaan silahkan berikan komentar dibawah, Sekian Terima Kasih

Kunjungi Juga : Tampan Squad
Referensi : Malas Ngoding

TUTORIAL HTML DASAR LAINYA
Belajar HTML : Mengenal Text Editor
Belajar HTML Part 1 : Mengenal HTML
Belajar HTML Part 2 : Mengenal Tag, Element, Atribut & Struktur Dasar HTML
Belajar HTML Part 3 : Mengenal Heading Pada HTML
Belajar HTML Part 4 : Format Text Pada HTML
Belajar HTML Part 5 : Membuat Paragraf Pada HTML
Belajar HTML Part 6 : Membuat Tabel Pada HTML
Belajar HTML Part 7 : Membuat Hyperlink Pada HTML
Belajar HTML Part 8 : Membuat List Pada HTML
Belajar HTML Part 9 : Membuat Format Code dan Pre Pada HTML
Belajar HTML Part 10 : Membuat Form Pada HTML 
Belajar HTML Part 11 : Mengenal Atribut Form Pada HTML

4 komentar :

Langganan: Posting Komentar ( Atom )