Materialise CSS表单 _MaterializeCSS

本文概述

例子
输入控制清单

表单用作接收用户输入数据的标准方法。 Materialize CSS为表单设计提供了非常漂亮且响应迅速的CSS。这些元素的过渡和平滑度非常重要, 因为与表单关联的固有用户交互作用。

Index	Class name	Description
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.jquery.com/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 = "http://www.srcmini.com/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 = "http://www.srcmini.com/male" checked /> < label for = "male"> Male< /label> < /p> < p> < input id = "female" type = "radio" name = "gender"value = "http://www.srcmini.com/female"/> < label for = "female"> Female< /label> < /p> < p> < input id = "dontknow1" type = "radio" name = "gender"value = "http://www.srcmini.com/female" disabled /> < label for = "dontknow1"> Don't know (Disabled)< /label> < /p> < /div> < /div> < /form> < /div> < /body> < /html>

立即测试
输出

文章图片
输入控制清单 【Materialise CSS表单】Materialize CSS提供了几种类型的输入控件。以下是列表：

Index	Input types	Description
1)	select	它指定各种类型的选择输入
2)	switches	它指定各种类型的开关
3)	file	它指定各种类型的文件输入
4)	range	它指定各种类型的范围输入
4)	日期选择器	它指定日期选择器
5)	character counter	它指定字符计数器