7.1 文本字段
HTML 提供了多種表單元素輸入類型，允許用戶以不同格式輸入數據，例如文本、電子郵件、日期等等。我們將詳細討論不同類型的輸入及其使用。
元素 <input type="text"> 用於輸入單行文本。這是最基本和常用的輸入類型。
使用範例：
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
屬性
maxlength: 限制最大字符數placeholder: 占位文本，當用戶尚未輸入數據時顯示在輸入框內required: 指定此字段為必填項
帶屬性的範例：
<label for="username">用戶名:</label>
<input type="text" id="username" name="username" maxlength="20" placeholder="輸入用戶名" required>
7.2 數字字段
元素 <input type="number"> 用於輸入數字值。它允許僅以數字形式輸入，並且可以包括增減值的箭頭。
使用範例：
<label for="quantity">數量:</label>
<input type="number" id="quantity" name="quantity" min="1" max="10" step="1" value="1">
屬性
min: 設定最小允許值max: 設定最大允許值step: 定義值變化的步長value: 設定初始值
7.3 電子郵件字段
元素 <input type="email"> 用於輸入電子郵件地址。它檢查輸入的文本是否符合電子郵件地址格式。
使用範例：
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">
屬性
multiple: 允許輸入多個用逗號分隔的電子郵件地址pattern: 設定正則表達式，用於額外檢查輸入數據
帶屬性的範例：
<label for="emails">Email 地址 (用逗號分隔):</label>
<input type="email" id="emails" name="emails" multiple placeholder="example1@example.com, example2@example.com">
7.4 電話號碼字段
元素 <input type="tel"> 用於輸入電話號碼。它不檢查號碼格式，但可以通過 pattern 屬性設置輸入格式。
使用範例：
<label for="phone">電話:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (XXX) XXX-XX-XX">
屬性
pattern: 設定正則表達式，用於檢查輸入的號碼格式。
帶屬性的範例：
<label for="phone">電話:</label>
<input type="tel" id="phone" name="phone" pattern="[+][0-9]{1,3} [0-9]{1,4} [0-9]{3,4} [0-9]{4}" placeholder="+1 123 456 7890">
7.5 日期字段
元素 <input type="date"> 用於輸入日期。在支援的瀏覽器中，會顯示一個日曆小工具以方便選擇日期。
使用範例：
<label for="birthday">生日:</label>
<input type="date" id="birthday" name="birthday">
屬性
min: 設定最小允許日期max: 設定最大允許日期
帶屬性的範例：
<label for="appointment">會議日期:</label>
<input type="date" id="appointment" name="appointment" min="2023-01-01" max="2024-12-31">
7.6 時間字段
元素 <input type="time"> 用於輸入時間。在支援的瀏覽器中，會顯示一個時間選擇小工具。
使用範例：
<label for="meeting_time">會議時間:</label>
<input type="time" id="meeting_time" name="meeting_time">
屬性
min: 設定最小允許時間max: 設定最大允許時間step: 定義時間變化的步長
帶屬性的範例：
<label for="alarm">鬧鐘:</label>
<input type="time" id="alarm" name="alarm" min="06:00" max="22:00" step="300">
7.7 URL 輸入字段
元素 <input type="url"> 用於輸入網頁地址 (URL)。它檢查輸入的文本是否符合 URL 格式。
使用範例：
<label for="website">網站:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
屬性
pattern: 設定正則表達式，用於額外檢查輸入數據。
帶屬性的範例：
<label for="personal_website">個人網站:</label>
<input type="url" id="personal_website" name="personal_website" pattern="https://.*" placeholder="https://example.com">
7.8 密碼字段
元素 <input type="password"> 用於輸入密碼。輸入的數據會被隱藏，顯示為符號（如星號或圓點）。
使用範例：
<label for="password">密碼:</label>
<input type="password" id="password" name="password">
屬性
maxlength: 限制最大字符數placeholder: 占位文本required: 指定此字段為必填項
帶屬性的範例：
<label for="new-password">新密碼:</label>
<input type="password" id="new_password" name="new_password" maxlength="20" placeholder="輸入密碼" required>
7.9 範圍輸入字段
元素 <input type="range"> 用於在指定範圍內輸入值。它顯示為滑塊。
使用範例：
<label for="volume">音量:</label>
<input type="range" id="volume" name="volume">
屬性
min: 設定最小允許值max: 設定最大允許值step: 定義值變化的步長value: 設定初始值
帶屬性的範例：
<label for="brightness">亮度:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" step="1" value="75">
7.10 顏色選擇字段
元素 <input type="color"> 用於選擇顏色。在支援的瀏覽器中，會顯示顏色選擇小工具。
使用範例：
<label for="favcolor">選擇你最喜歡的顏色:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">
屬性
value: 設定初始顏色。
7.11 搜索字段
元素 <input type="search"> 用於輸入搜索查詢。在大多數瀏覽器中，具有內建的樣式和清除輸入文本的功能。
使用範例：
<label for="search">搜索:</label>
<input type="search" id="search" name="search" placeholder="輸入搜索查詢">
GO TO FULL VERSION