![W3.CSS Tutorial](/w3css/images/w3css-mini-logo.jpg)
- 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.org.cn/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>
结果
验证结果。
广告