引入Materialize框架后，使用input-field容器和validate类可快速创建带浮动标签和验证的输入框；2. 通过select配合label并调用M.FormSelect.init()实现样式统一的下拉选择；3. 复选框与单选按钮需用label包裹input和span，确保点击文字可触发选择；4. 使用switch类包裹checkbox和lever滑块创建开/关切换按钮；5. 所有组件均依赖Materialize预设类，无需额外CSS即可实现美观响应式表单。
想快速做出好看又响应式的表单？Materialize 提供了一套现成的 CSS 类，让你无需写额外样式就能把普通的 HTML 表单变得整洁美观。只要引入 Materialize 框架，再用它定义好的类名，就能立刻提升表单的视觉效果和交互体验。
输入框（Input Fields）
Materialize 对文本输入框做了默认美化，使用 input 和 label 配合即可实现浮动标签效果。
基本写法：
<div class="input-field"> <input id="name" type="text" class="validate"> <label for="name">你的名字</label> </div>
input-field 是关键容器类，label 会自动浮动到输入框上方。加上 validate 类后，还能在失去焦点时验证输入内容，显示错误或成功状态。
立即学习“前端免费学习笔记（深入）”；
选择框（Selects）
原生 select 在不同浏览器中样式不一，Materialize 能统一美化。
步骤如下：
- 外层包裹 input-field
- 给 select 添加 initialized 不需要手动初始化
<div class="input-field">
<select>
<option value="" disabled selected>选择一个选项</option>
<option value="1">选项一</option>
<option value="2">选项二</option>
</select>
<label>下拉选择</label>
</div>
记得在页面加载后调用 M.FormSelect.init() 启用 JavaScript 功能，或者使用自动初始化方式。
复选框与单选按钮（Checkboxes & Radio Buttons）
Materialize 替换了原生控件，用图标模拟更清晰的视觉反馈。
复选框示例：
<p>
<label>
<input type="checkbox" />
<span>记住我</span>
</label>
</p>
单选按钮类似，只需改 type 为 radio，并确保 name 相同：
<p>
<label>
<input name="group1" type="radio" checked />
<span>男</span>
</label>
</p>
<p>
<label>
<input name="group1" type="radio" />
<span>女</span>
</label>
</p>
label 包裹整个结构，点击文字也能触发选择。
开关按钮（Toggle Switches）
想要现代感更强的开关控件，可以用 switch 类。
<div class="switch">
<label>
关
<input type="checkbox">
<span class="lever"></span>
开
</label>
</div>
lever 是滑块部分，配合 label 内的文字实现“开/关”状态切换，视觉效果很直观。
基本上就这些常用控件。Materialize 的设计让表单既美观又易用，适合快速搭建管理后台或用户注册页。只要按结构写 HTML，样式自动生效，省时省力。
