- W3.CSS 教程
- W3.CSS - 主頁
- W3.CSS - 概述
- W3.CSS - 環境設定
- W3.CSS - 容器
- W3.CSS - 程式碼著色
- W3.CSS - 卡片
- W3.CSS - 響應式設計
- W3.CSS - 網格
- W3.CSS - 表單
- W3.CSS - 按鈕
- W3.CSS - 工具提示
- W3.CSS - 模態對話方塊
- W3.CSS - 表格
- W3.CSS - 列表
- W3.CSS - 影像
- W3.CSS - 圖示
- W3.CSS - 顏色
- W3.CSS - 導航
- W3.CSS - 實用程式
- W3.CSS 實用資源
- W3.CSS - 快速指南
- W3.CSS - 實用資源
- W3.CSS - 討論
W3.CSS - 表單
W3.CSS 有用於表單設計的非常漂亮和響應式的 CSS。使用以下 CSS −
| 序號 | 類名和說明 |
|---|---|
| 1 | w3-group 表示帶邊框的容器。可用於對標籤和輸入進行分組。 |
| 2 | w3-input 美化輸入控制元件。 |
| 3 | w3-label 美化標籤。 |
| 4 | w3-checkbox w3-checkmark 美化複選框/單選按鈕。 |
示例
w3css_forms.htm
<html>
<head>
<title>The W3.CSS Forms</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://w3schools.tw/lib/w3.css">
</head>
<body>
<form class = "w3-container w3-card-8">
<div class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">User Name</label>
</div>
<div class = "w3-group">
<input class = "w3-input" type = "text" style = "width:90%" required>
<label class = "w3-label">Email</label>
</div>
<div class = "w3-group">
<textarea class = "w3-input" style = "width:90%" required></textarea>
<label class = "w3-label">Comments</label>
</div>
<div class = "w3-row">
<div class = "w3-half">
<label class = "w3-checkbox">
<input type = "checkbox" checked = "checked">
<div class = "w3-checkmark"></div> Married
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox">
<div class = "w3-checkmark"></div> Single
</label>
<br>
<label class = "w3-checkbox">
<input type = "checkbox" disabled>
<div class = "w3-checkmark"></div> Don't know (Disabled)
</label>
<br>
<br>
</div>
<div class = "w3-half">
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "male" checked>
<div class = "w3-checkmark"></div> Male
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female">
<div class = "w3-checkmark"></div> Female
</label>
<br>
<label class = "w3-checkbox">
<input type = "radio" name = "gender" value = "female" disabled>
<div class = "w3-checkmark"></div> Don't know (Disabled)
</label>
</div>
</div>
</form>
</body>
</html>
結果
驗證結果。
廣告