Beranda
  • Beranda
  • Kursus Programming
  • Karir
  • Layanan Kami
    • IT Outsourcing
    • Jasa Pembuatan Software
    • Jasa Programmer
    • Jasa Pembuatan Website
      • Jasa Pembuatan Website Toko Online
      • Jasa Pembuatan Website Company Profile
      • Jasa Pembuatan Website Rental Mobil
      • Jasa Pembuatan Website Pribadi
      • Jasa Pembuatan Website Marketplace
  • Tutorial IT
    • Tutorial HTML
    • Tutorial JavaScript
    • Tutorial JQuery
    • Tutorial SQL
    • Tutorial Java
    • Tutorial CSS
    • Tutorial Dart
    • Tutorial PHP
    • Tutorial Flutter
  • Blog

Tutorial HTML

  • Tutorial Belajar HTML
  • Apa Itu HTML ?
  • Contoh Coding HTML Website
  • Tag Tag HTML
  • Cara Membuat Heading Di HTML
  • Cara Membuat Paragraf Di HTML
  • Atribut HTML
  • Css Inline HTML
  • Membuat Komentar Di HTML
  • Format Text HTML
  • Cara Membuat Link Di HTML
  • Cara Menambahkan Gambar Di HTML
  • Cara Membuat List Di HTML
  • Cara Membuat Tabel Di HTML
  • Membuat Halaman Web Dengan HTML Dan CSS
  • Tampilan Block Dan Inline
  • Atribut Class
  • Atribut Id
  • HTML Head
  • Cara Membuat Form HTML
  • Atribut Form HTML
  • Form Elemen
  • Tag Input HTML
  • Atribut Tag Input
  • Beranda
  • Tutorial
  • Atribut Tag Input

Atribut Tag Input

Daftar Isi
  • Atribut value
  • Atribut readonly
  • Atribut disabled
  • Atribut size
  • Atribut maxlength
  • Atribut min dan max
  • Atribut multiple
  • Atribut placeholder
  • Atribut required

Elemen atau tag input pada form HTML memiliki beberapa atribut penting.

Atribut value #

Atribut value memberikan nilai awal pada tag input.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form> 

Data awal ini dapat diganti oleh pengguna.

Atribut readonly #

Atribut readonly membuat tag menjadi tidak bisa melakukan proses input data. Tag dengan atribut readonly tidak bisa diganti nilainya.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form> 

Atribut disabled #

Atribut disabled membuat tag menjadi tidak bisa diakses sama sekali, tidak bisa diklik, tidak bisa difokus dan tidak bisa melakukan proses input data. Tag dengan atribut disabled nilainya tidak akan dikirimkan ke server apabila form disubmit.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" disabled><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe">
</form> 

Atribut size #

Atribut size menentukan lebar suatu tag ditampilkan. Atribut size hanya bisa dipakai pada input text, tel, email dan password.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" size="4">
</form> 

Atribut maxlength #

Atribut maxlength menentukan jumlah karakter yang bisa diinput pada suatu tag input.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" size="50"><br>
  <label for="pin">PIN:</label><br>
  <input type="text" id="pin" name="pin" maxlength="4" size="4">
</form> 

Atribut min dan max #

Atribut min dan max berguna untuk menentukan nilai minimum dan nilai maksimum yang bisa dimasukkan ke dalam suatu tag input. Atribut min dan max bisa dipakai pada input number, range, date dan time.

<form>
  <label for="datemax">Enter a date before 1980-01-01:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31"><br><br>

  <label for="datemin">Enter a date after 2000-01-01:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02"><br><br>

  <label for="quantity">Quantity (between 1 and 5):</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5">
</form> 

Atribut multiple #

Atribut multiple berguna untuk membuat input tag dapat menerima lebih dari satu input. Atribut multiple bisa dipakai pada input email dan file.

<form>
  <label for="files">Select files:</label>
  <input type="file" id="files" name="files" multiple>
</form> 

Atribut placeholder #

Atribut placeholder berguna untuk menampilkan deskripsi dalam bentuk text pada suatu tag input. Deskripsi ini dapat digunakan untuk menjelaskan banyak hal kepada pengguna. Sebagai contoh menjelaskan data apa yang harus dimasukkan pengguna, format data yang harus dipakai dan lain sebagainya. Atribut placeholder bisa dipakai pada input text, tel, email dan password.

<form>
  <label for="phone">Enter a phone number:</label>
  <input type="tel" id="phone" name="phone"
  placeholder="Phone format : 123-45-678">
</form> 

Atribut required #

Atribut required membuat tag pada form harus diisi sebelum form tersebut disubmit. Apabila tag tersebut masih kosong atau belum dipilih maka proses submit akan gagal. Atribut required bisa dipakai pada input text, tel, email, password, date pickers, number, checkbox, radio dan file.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>
</form> 

What are your Feelings
Share This Article :
  • Facebook
  • Twitter
  • LinkedIn
  • Pinterest
Tag Input HTML

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Daftar Isi
  • Atribut value
  • Atribut readonly
  • Atribut disabled
  • Atribut size
  • Atribut maxlength
  • Atribut min dan max
  • Atribut multiple
  • Atribut placeholder
  • Atribut required

Marketing Office

Epicentrum Walk Office Suite 529A, Jl. HR. Rasuna Said, Jakarta Selatan 12940

Workshop

Nextgen Training Center, Jl. Raya Tanah Baru no 3, Pancoran Mas, Depok

Email

sales@nextgen.co.id

@2020 PT Nextgen Inovasi Indonesia

PT. Nextgen Inovasi Indonesia

PT Nextgen Inovasi Indonesia adalah perusahaan IT yang didirikan pada tahun 2015. Lini bisnis kami adalah inovasi dalam cara belajar teknologi informasi dengan cepat dan efisien.