Elemen input atau tag input HTML 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> Tutorial sebelumnya : Form Elemen
Tutorial setelahnya : Atribut Tag Input
Semua Tutorial HTML : Tutorial HTML