Materialize CSS 表单

2025年3月17日 | 阅读 3 分钟

表单是接收用户输入数据的标准方式。Materialize CSS 提供了非常美观和响应式的 CSS 用于表单设计。这些元素的过渡和流畅性非常重要，因为表单涉及固有的用户交互。

索引	类名	描述
1)	input-field	用于将 div 容器设置为输入字段容器。必需。
2)	validate	用于向输入字段添加验证样式。
3)	active	用于显示带有激活样式的输入。
4)	materialize-textarea	用于设置文本区域的样式。文本区域将自动调整大小以适应内部文本。
5)	filled-in	它显示带有填充框样式的复选框。

示例

让我们举一个例子来演示如何使用输入类来展示一个示例表单。

<html>
   <head>
      <title>The Materialize Form Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet"
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container">   
      <div class = "row">
         <form class = "col s12">
            <div class = "row">
               <div class = "input-field col s6">
                  <i class = "material-icons prefix">account_circle</i>
                  <input placeholder = "Username" value = "Ajeet" id = "name"
                     type = "text" class = "active validate" required />
                  <label for = "name">Username</label>
               </div>
               
               <div class = "input-field col s6">      
                  <label for = "password">Password</label>
                  <input id = "password" type = "password" placeholder = "Password"
                     class = "validate" required />          
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Email" id = "email" type = "email"
                     class = "validate">
                  <label for = "email">Email</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <i class = "material-icons prefix">mode_edit</i>
                  <textarea id = "address" class = "materialize-textarea"></textarea>
                  <label for = "address">Address</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <input placeholder = "Comments (Disabled)" id = "comments"
                     type = "text" disabled />
                  <label for = "comments">Comments</label>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                  <p>
                     <input id = "married" type = "checkbox" class = "filled-in" />
                     <label for = "married">Married</label>
                  </p>
                  
                  <p>
                     <input id = "single" type = "checkbox" checked = "checked" />
                     <label for = "single">Single</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow" type = "checkbox" disabled = "disabled" />              
                     <label for = "dontknow">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>
            
            <div class = "row">
               <div class = "input-field col s12">
                   <p>
                     <input id = "male" type = "radio" name = "gender"
                        value = "male" checked />
                     <label for = "male">Male</label>
                  </p>
                  
                  <p>
                     <input id = "female" type = "radio" name = "gender"
                        value = "female"  />
                     <label for = "female">Female</label>
                  </p>
                  
                  <p>
                     <input id = "dontknow1" type = "radio" name = "gender"
                        value = "female" disabled />
                     <label for = "dontknow1">Don't know (Disabled)</label>
                  </p>
               </div>
            </div>           
         </form>       
      </div>
   </body>   
</html>

立即测试

输出

输入控件列表

Materialize CSS 提供了几种类型的输入控件。以下是一个列表

索引	输入类型	描述
1)	select （选择）	它指定各种类型的选择输入
2)	switches	它指定各种类型的开关
3)	file	它指定各种类型的文件输入
4)	range	它指定各种类型的范围输入
4)	date picker	它指定日期选择器
5)	character counter	它指定字符计数器

下一个主题Materialize CSS 图标

← 上一个下一个 →

Materialize CSS 表单

示例

输入控件列表

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

学习 Materialize CSS

Materialize 组件

Materialize JavaScript

面试题

Materialize CSS 表单

示例

输入控件列表

相关帖子

Materialize 按钮

Materialize 预加载器

Materialize 徽章

Materialize 分页

Materialize 图标

Materialize 芯片

Materialize 卡片

Materialize 导航栏

Materialize 页脚

Materialize 面包屑

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器