Macam – macam type input html

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 :

&lt;input type="button" value="button">

&lt;legend>fiture:&lt;/legend>
    &lt;div>
      &lt;input type="checkbox" id="scales" name="scales" checked>
      &lt;label for="scales">Scales&lt;/label>
    &lt;/div>
    &lt;div>
      &lt;input type="checkbox" id="horns" name="horns">
      &lt;label for="horns">Horns&lt;/label>
    &lt;/div>

&lt;p>Choose colors:&lt;/p>
&lt;div>
    &lt;input type="color" id="head" name="head" value="#e66465">
    &lt;label for="head">Head&lt;/label>
&lt;/div>


&lt;legend for="start">Start date:&lt;/legend>
&lt;input type="date" id="start" name="trip-start" 
value="2022-12-01" min="2000-01-01" max="2023-12-31">

&lt;label for="meeting-time">Choose a time :&lt;/label>
&lt;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">

&lt;label for="email">Enter your email:&lt;/label>
&lt;input type="email" id="email" pattern=".+@globex\.com" size="30" required>

&lt;input type="file" id="avatar" name="avatar"
       accept="image/png, image/jpeg">

&lt;input type="hidden" >

&lt;input type="image" id="image" alt="Login"
       src="/media/examples/login-button.png">

&lt;input type="month" id="start" name="start"
       min="2018-03" value="2018-05">

&lt;input type="number" id="tentacles" name="tentacles"
       min="10" max="100">

&lt;input type="password" id="pass" name="password"
           minlength="8" required>

&lt;legend>Choose Gender:&lt;/legend>
    &lt;div>
      &lt;input type="radio" id="male" name="gender" value="male"
             checked>
      &lt;label for="male">Male&lt;/label>
    &lt;/div>

    &lt;div>
      &lt;input type="radio" id="female" name="gender" value="female">
      &lt;label for="female">Female&lt;/label>
    &lt;/div>

&lt;div>
  &lt;input type="range" id="volume" name="volume"
         min="0" max="11">
  &lt;label for="volume">Volume&lt;/label>
&lt;/div>

&lt;input type="reset" value="Reset">

&lt;label for="site-search">Search the site:&lt;/label>
&lt;input type="search" id="site-search" name="q">

&lt;input type="submit" value="Send Request" />

&lt;label for="phone">Enter your phone number:&lt;/label>
&lt;input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>
&lt;br>
&lt;small>Format: 123-456-7890&lt;/small>

&lt;label for="name">Name (4 to 8 characters):&lt;/label>
&lt;input type="text" id="name" name="name" required
       minlength="4" maxlength="8" size="10">

&lt;label for="appt">Choose a time for your meeting:&lt;/label>
&lt;input type="time" id="appt" name="appt"
       min="09:00" max="18:00" required>
&lt;small>Office hours are 9am to 6pm&lt;/small>

&lt;input type="url" name="url" id="url"
       placeholder="https://example.com"
       pattern="https://.*" 
       required>

&lt;input type="week" name="week" id="camp-week"
       min="2018-W18" max="2018-W26" required>

Sumber artikel ini : link

sekian terimakasih.

Zainurrohman Hery Firmansyah
Zainurrohman Hery Firmansyah
Articles: 63

Leave a Reply

Your email address will not be published. Required fields are marked *

Home
Produk
Tutorial
Search