HTML input要素の型

input要素のtype属性の型
ボタン
(input type button)		 
<input type="button" value="ボタン" />
ファイル
(input type file)		 
<input type="file">

form要素には「method=”post”」と「enctype=”multipart/form-data”」の指定をしておくようにします。
input type fileの記述の後にaccept属性をつけると選択できるファイル形式の指定ができます。
jpegなら「accept=”image/jpeg”」というようにします。 


        <form method="post" action="#" enctype="multipart/form-data">
        <p>JPEGファイル：<input type="file" name="example" accept="image/jpeg"></p>
        <p><input type="submit" value="送信する"></p>
        </form>

隠しデータ
(input type hidden)		 
<input type="hidden" name="example" value="サンプル">
画像送信ボタン
(input type image)		 
<input type="image" src="example.png" alt="送信">
チェックボックス
(input type checkbox)		 
<input type="checkbox">
パスワード
(input type password)		 
<input type="password" name="example">
ラジオボタン
(input type radio)		 
<input type="radio">
リセットボタン
(input type reset)		 
<input type="reset" value="リセッシュ">
送信ボタン
(input type submit)		 
<input type="submit" name="submit" value="送信する">
一行テキスト
(input type text)		 
<input type="text" value="一行テキスト">
HTML5で追加されたinput要素の型
検索フォーム
(input type search)		 
<input type="search">
電話番号
(input type tel)		 
<input type="tel" name="tel" placeholder="00-0000-0000">
URL
(input type url)		 
<input type="url">
メール
(input type email)		 
<input type="email">
日付：年月日
(input type date)		 
<input type="date" name="example" min="2019-08-01" max="2019-12-31" value="2019-08-01">
日付：年月
(input type month)		 
<input type="month">
日付：年と週 (input type week) 
<input type="week">
時間
(input type time)		 
<input type="time">

minで最小時間の指定ができて、maxで最大時間を指定して時間の入力範囲を指定できます。
時間フィールドで秒まで入力できるようにしたいときは、例えば「step="1″」とすると１秒単位になり、10にすると10秒刻みでコントロールできます。 

<input type="time" name="example" min="10:00" max="19:00" step="1" value="10:00:00">
年月日と時間
(input type datetime-local)		 
<input type="datetime-local">
番号
(input type number)		 
<input type="number">
スライダー
(input type range)		 
<input type="range">
カラー
(input type color)		 
<input type="color" value="#aab1ff">

色の候補を作成して表示することもできます。

<input id="color-list" type="color" value="#aab1ff" list="colors">

      <datalist id="colors">
        <option value="#776dff">
        <option value="#ff7555">
        <option value="#ff67c5">
      </datalist>