2.1 元素 <input>
表單是網頁的重要組成部分，讓用戶可以輸入和提交數據。
表單的主要元素有 <input>、<textarea> 和 <button>。
這些元素讓用戶可以輸入文字、選擇選項、上傳文件等操作。
元素 <input> 是最常用的表單元素之一。它支持
許多類型的數據輸入，可以用於不同的目的，例如輸入文字、選擇文件、指定日期等。
一般語法：
HTML
<input type="type" name="name" id="id" value="value" placeholder="placeholder" required>
<input> 的屬性
type: 定義輸入類型name: 表單元素的名字，用於在伺服器識別數據id: 元素的唯一識別符value: 元素的初始值placeholder: 在輸入數據前顯示的占位文本required: 指明此元素為必填
<input> 範例
input-text允許輸入單行文本。
HTML
<input type="text" name="username" id="username" placeholder="輸入用戶名" required>
2.2 元素 <textarea>
元素 <textarea> 用於輸入多行文本。它和
<input type="text"> 不同，允許輸入包含多行的文本，並可以調整大小。
一般語法：
HTML
<textarea name="name"
id="id"
rows="rows" cols="cols"
placeholder="placeholder" required>
</textarea>
<textarea> 的屬性
name: 表單元素的名字，用於在伺服器識別數據id: 元素的唯一識別符rows: 文本的行數cols: 一行中的字符數placeholder: 在輸入數據前顯示的占位文本required: 指明此元素為必填
使用範例：
HTML
<label for="comments">評論：</label>
<textarea name="comments"
id="comments"
rows="5"
cols="40"
placeholder="在這裡輸入你的評論..."
required>
</textarea>
<textarea> 的樣式
元素 <textarea> 可以使用 CSS 進行樣式化，以改善外觀和用戶體驗。
樣式範例：
CSS
textarea {
width: 75%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical; /* 只允許垂直調整大小 */
}
HTML
<label for="comments">評論：</label>
<textarea name="comments"
id="comments"
rows="5" placeholder="在這裡輸入你的評論..." required>
</textarea>
2.3 元素 <button>
元素 <button> 用於在表單中創建按鈕。與
<input type="button"> 不同，<button> 元素更靈活，可以插入
各類 HTML 元素如文本、圖片等。
一般語法：
HTML
<button type="type" name="name" id="id" value="value">按鈕文字</button>
使用範例：
HTML
<button type="submit">提交</button>
<button type="reset">重設</button>
<button type="button" onclick="alert('按鈕被點擊!')">點擊我</button>
<button> 的屬性
-
type:定義按鈕的行為。可選值：submit: 提交表單（默認值）reset: 重設表單button: 自定義按鈕，不會執行預設動作
name: 表單元素的名字，用於在伺服器識別數據。id: 元素的唯一識別符。value: 提交表單時發送到伺服器的值。
<button> 的嵌入 HTML
元素 <button> 允許在內嵌入各類 HTML 元素以創建更複雜的按鈕。
含嵌入 HTML 的範例：
HTML
<button type="type" name="name" id="id" value="value">
📨發送
</button>
HTML
<button type="type" name="name" id="id" value="value">
<img src="submit_icon.png" alt="發送">
發送
</button>
<button> 的樣式
元素 <button> 可以使用 CSS 進行樣式化，以改善外觀和用戶體驗。
樣式範例：
CSS
button {
background-color: #4CAF50; /* 綠色背景 */
color: white; /* 白色文字 */
padding: 15px 20px; /* 內部間距 */
border: none; /* 無邊框 */
border-radius: 4px; /* 圓角 */
cursor: pointer; /* 指針 */
}
button:hover {
background-color: #45a049; /* 懸停時的深綠背景 */
}
HTML
<button type="submit">發送</button>
GO TO FULL VERSION