Dalam membangun sebuah formulir html khususnya membuat sebuah formulir form html diperlukan sebuah element <input> , di dalam element <input> sendiri ternyata memiliki banyak type, berikut adalah macam – macam type input html :
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">pada perkembangan dunia web, banyak dari type input di atas merupakan type input baru, dan mungkin akan bertambah terus seiring perkembangan.
Catatan : terkaradang tidak semua browser support untuk beberapa type inputan di atas.
Implementasi type input html :
<input type="button" value="button">
<legend>fiture:</legend>
<div>
<input type="checkbox" id="scales" name="scales" checked>
<label for="scales">Scales</label>
</div>
<div>
<input type="checkbox" id="horns" name="horns">
<label for="horns">Horns</label>
</div>
<p>Choose colors:</p>
<div>
<input type="color" id="head" name="head" value="#e66465">
<label for="head">Head</label>
</div>
<legend for="start">Start date:</legend>
<input type="date" id="start" name="trip-start"
value="2022-12-01" min="2000-01-01" max="2023-12-31">
<label for="meeting-time">Choose a time :</label>
<input type="datetime-local" id="meeting-time" name="meeting-time"
value="2018-06-12T19:30" min="2018-06-07T00:00"
max="2018-06-14T00:00">
<label for="email">Enter your email:</label>
<input type="email" id="email" pattern=".+@globex\.com" size="30" required>
<input type="file" id="avatar" name="avatar"
accept="image/png, image/jpeg">
<input type="hidden" >
<input type="image" id="image" alt="Login"
src="/media/examples/login-button.png">
<input type="month" id="start" name="start"
min="2018-03" value="2018-05">
<input type="number" id="tentacles" name="tentacles"
min="10" max="100">
<input type="password" id="pass" name="password"
minlength="8" required>
<legend>Choose Gender:</legend>
<div>
<input type="radio" id="male" name="gender" value="male"
checked>
<label for="male">Male</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</div>
<div>
<input type="range" id="volume" name="volume"
min="0" max="11">
<label for="volume">Volume</label>
</div>
<input type="reset" value="Reset">
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q">
<input type="submit" value="Send Request" />
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required>
<br>
<small>Format: 123-456-7890</small>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<label for="appt">Choose a time for your meeting:</label>
<input type="time" id="appt" name="appt"
min="09:00" max="18:00" required>
<small>Office hours are 9am to 6pm</small>
<input type="url" name="url" id="url"
placeholder="https://example.com"
pattern="https://.*"
required>
<input type="week" name="week" id="camp-week"
min="2018-W18" max="2018-W26" required>
Sumber artikel ini : link
sekian terimakasih.
