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 :

<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.

Leave a Reply

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