Tag Input HTML

Tag Input HTML

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> 

Tinggalkan Balasan

Keranjang Belanja0
Keranjang belanja kosong ...
0