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.
Tutorial sebelumnya : Form Elemen
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> Tutorial selanjutnya : Atribut Tag Input
Daftar tutorial : Tutorial Belajar HTML
