以下表單最好加入 name 屬性，上傳到後端才方便辨識。
本範例因限篇幅而省略。

按鈕



<input type="button" value="ok">

<input type="button" value="Click me" onclick="alert('哎呀~你按到我了XD')">
複選框

        使用 checked="checked" 或checked="true" 做為預設值。 		<label style="vertical-align:middle;">
      高麗菜 <input type="checkbox" name="xx" style="width:15pt;height:15pt;">
<label valign="middle">&nbsp; &nbsp;
      波菜 <input type="checkbox" name="xx" checked="true" style="width:15pt;height:15pt;">
</label>&nbsp; &nbsp;
<label>
      紅蘿蔔 <input type="checkbox" name="xx" style="width:15pt;height:15pt;">
</label>
單選框

       

使用同個 name 即可單選。 		<label>
      <input type="radio" name="yy" checked="true" style="width:15pt;height:15pt;"> 國文
</label> &nbsp; &nbsp;
<label>
      <input type="radio" name="yy" style="width:15pt;height:15pt;"> 英文
</label> &nbsp; &nbsp;
<label>
      <input type="radio" name="yy" style="width:15pt;height:15pt;"> 數學
</label>
密碼



可見最長 6 個字
<input type="password" size="6">

提示字及輸入最長 4 個字
<input type="password" placeholder="Enter your password" maxlength="4">
範圍



<input type="range">

指定範圍 -50 至 50，初值 15
<input type="range" min="-50" max="50" value="15">
文字





<input type="text">

指定初值及提示字
<input type="text" value="John" placeholder="Enter your name">

可見長度 8 與最大輸入長度 6(中文一字長度為 2)
<input type="text" size="8" maxlength="6">
檔案對話框





<input type="file">

指定開啟檔案類型為圖像檔
<input type="file" accept="image/*"><br><br>

指定開啟檔案類型 .txt 與 .pdf
<input type="file" accept=".pdf, .txt">
日期對話框





<input type="date">

指定日期 2000-01-01 至 2028-06-30 且初值 2023-11-28
<input type="date" min="2000-01-01" max="2028-06-30" value="2023-11-28">

下面 javaScript 程式碼可以指定使用者開啟網頁的日期
<script>
      document.addEventListener('DOMContentLoaded', function() {
            // 取得今天的日期
            var dd = new Date();
            // 格式化日期為 YYYY-MM-DD
            var formateDate = dd.getFullYear() + '-' + ('0' + (dd.getMonth() + 1)).slice(-2) + '-' + ('0' + dd.getDate()).slice(-2);
            // 將值設定為今天的日期
            document.getElementById('tday').value = formateDate;
      });
</script>
時間對話框



<input type="time">

指定時間為 8:00 至 18:00 起初值為 11:32 步進值 60 秒(1分鐘)為單位
<input type="time" min="08:00" max="18:00" value="11:32" step="60">
日期時間對話框



<input type="datetime-local">

指定日期時間為 1963-07-01 00:00" 至 2053-12-31 24:00 且初值為 2023-12-03T09:45 步進值 600 秒(10分鐘)
<input type="datetime-local" value="2023-12-03T09:45" min="1963-07-01T00:00" max="2053-12-31T24:00" step="600">
星期對話框



<input type="week">

指定週數為 2020 年第 10 週至 2024 年第 52 週且初值為 2022 年第 38 週
<input type="week" min="2020-W10" max="2024-W52" value="2022-W38">
顏色對話框



<input type="color">

指定顏色初值為色碼 #EF9614
<input type="color" value="#EF9614">
影像


<input type="image" src="images/image-1.png">

指定載入圖片 images 資料夾下的 image-1.png，呈現出來為原圖的寬 80%、高80%，無圖時顯示 往右快轉的按鈕。
<input type="image" src="images/image-1.png" alt="往右快轉的按鈕" width="%80" height="%80">
數字



<input type="number">

指定數值從 2 到 20，步進值為 2 初值為 10
<input type="number" min="2" max="20" step="2" value="10">
表單重設



<input type="reset">
表單提交



<input type="submit">
電子郵件



<input type="email">
電話

使用率低，類似 text


<input type="tel">
隱藏欄

開發階段後送資料


<input type="hidden">
搜尋欄

搜尋 類似 text


<input type="search">
網址欄

 網址資料

類似 text


<input type="url">