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
  • Tag Input HTML

Tag Input HTML

Daftar Isi
  • Input Text
  • Input Password
  • Input Submit
  • Input Reset
  • Input Radio Button
  • Input Checkbox
  • Input Button
  • Input Color
  • Input Date
  • Input Email
  • Input File
  • Input Number
  • Input Range
  • Input Tel
  • Input Time

Elemen input atau tag input adalah jenis form elemen yang paling banyak jenisnya. Tutorial ini akan membahas beberapa jenis elemen input yang paling banyak digunakan.

Input Text #

Input text menerima data input berupa text dalam satu baris.

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

Input Password #

Input password menerima data input password yang dimasking.

<form>
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username"><br>
  <label for="pwd">Password:</label><br>
  <input type="password" id="pwd" name="pwd">
</form> 

Input Submit #

Input submit digunakan untuk membuat tombol submit pada form.

<form action="/tutorial/html/action_page.html">
  <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"><br><br>
  <input type="submit" value="Submit">
</form> 

Atribut value digunakan untuk membuat text pada tombol.

Input Reset #

Input reset berguna untuk membuat tombol yang bisa menghapus atau mereset semua data input pada tag lain dalam suatu form.

<form action="/tutorial/html/action_page.html">
  <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"><br><br>
  <input type="submit" value="Submit">
  <input type="reset">
</form> 

Input Radio Button #

Input radio button berguna untuk membuat pilihan input dalam bentuk radio button. Hanya satu pilihan yang dapat dipilih dalam satu waktu.

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form> 

Input Checkbox #

Input checkbox berguna untuk membuat pilihan input dalam bentuk drop down. Checkbox memungkinkan memilih satu atau lebih pilihan input.

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form> 

Input Button #

Input button berguna untuk membuat tombol yang bisa diklik.

 <input type="button" onclick="alert('Hello World!')" value="Click Me!"> 

Input Color #

Input color berguna untuk membuat pilihan warna.

<form>
  <label for="favcolor">Select your favorite color:</label>
  <input type="color" id="favcolor" name="favcolor">
</form> 

Input Date #

Input date berguna untuk membuat pilihan tanggal.

<form>
  <label for="birthday">Birthday:</label>
  <input type="date" id="birthday" name="birthday">
</form> 

Input Email #

Input email berguna untuk menerima data input berupa alamat email.

<form>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email">
</form> 

Input File #

Input file berguna untuk menerima input berupa file. Pengguna dapat memilih file yang akan diupload ke server.

<form>
  <label for="myfile">Select a file:</label>
  <input type="file" id="myfile" name="myfile">
</form> 

Input Number #

Input number berguna untuk menerima data berupa angka. Gunakan atribut min dan max untuk menentukan angka terendah dan tertinggi yang bisa diinput.

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

Input Range #

Input range digunakan untuk membuat slider yang bisa digeser untuk menerima data range berupa angka.

<form>
  <label for="vol">Volume (between 0 and 50):</label>
  <input type="range" id="vol" name="vol" min="0" max="50">
</form> 

Input Tel #

Input tel berguna untuk menerima data berupa nomor telephone.

<form>
  <label for="phone">Enter your phone number:</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form> 

Input Time #

Input time berguna untuk menerima data berupa waktu.

<form>
  <label for="appt">Select a time:</label>
  <input type="time" id="appt" name="appt">
</form> 

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

Tinggalkan Balasan

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

Daftar Isi
  • Input Text
  • Input Password
  • Input Submit
  • Input Reset
  • Input Radio Button
  • Input Checkbox
  • Input Button
  • Input Color
  • Input Date
  • Input Email
  • Input File
  • Input Number
  • Input Range
  • Input Tel
  • Input Time

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.