表单是接收用户输入数据的标准方式。由于与表单相关联的固有用户交互，这些元素的过渡和平滑非常重要。
输入框
文本框允许用户输入，输入框的边框必须简单明了，能让用户一眼看出输入位置。 你要设置一个使用.input-field的div包裹着input和label标签。这只用于我们的Input和Textarea表单元素中。
这个validate类会替换HTML5的验证，并相应地添加一个valid和invalid的类。如果您不想要绿色和红色的验证状态，只需从输入框中删除validate类即可。
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input placeholder="Placeholder" id="first_name" type="text" class="validate">
<label for="first_name">姓</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">名</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled value="I am not editable" id="disabled" type="text" class="validate">
<label for="disabled">禁用</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">密码</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">邮箱</label>
</div>
</div>
<div class="row">
<div class="col s12">
这是一个行内输入字段:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">邮箱</label>
<span class="helper-text" data-error="wrong" data-success="right">帮助文本</span>
</div>
</div>
</div>
</form>
</div>
文本预填充
如果在带标签的文本框中填充文本有麻烦，尝试增加class="active"到label标签中
你可以调用一个方法M.updateTextFields();来重新初始化页面上所有的Materializee标签如果你是动态的增加到input标签中。
<div class="row">
<div class="input-field col s6">
<input value="Alvin" id="first_name2" type="text" class="validate">
<label class="active" for="first_name2">姓</label>
</div>
</div>
$(document).ready(function() {
M.updateTextFields();
});
图标前缀
你可以增加图标前缀来使你的输入框更加的清晰。 只要增加一个图标带prefix在input和label标签之前。
<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 id="icon_prefix" type="text" class="validate">
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate">
<label for="icon_telephone">Telephone</label>
</div>
</div>
</form>
</div>
自定义错误与成功信息
你可以增加一个通用的验证信息通过添加data-error或data-success属性到你的输入框标签中。
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">邮箱</label>
<span class="helper-text" data-error="wrong" data-success="right">帮助文本</span>
</div>
</div>
</form>
</div>
改变颜色
这个CSS模板可以改变输入框的颜色在CSS中。使用Sass你只要改变一个变量。只需更改一个变量就可以实现这一点。下面显示的CSS是不固定的。根据您使用的内容，您可能需要更改类型属性选择器。
/* label color */
.input-field label {
color: #000;
}
/* label focus color */
.input-field input[type=text]:focus + label {
color: #000;
}
/* label underline focus color */
.input-field input[type=text]:focus {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* valid color */
.input-field input[type=text].valid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* invalid color */
.input-field input[type=text].invalid {
border-bottom: 1px solid #000;
box-shadow: 0 1px 0 0 #000;
}
/* icon prefix focus color */
.input-field .prefix.active {
color: #000;
}
文本域
文本域可以极大的扩展用户的输入。边框应该简单清晰地显示出用户当前正在编辑的字段。你必须使用有.input-field的div包裹你的input和label标签。 这有助于我们jquey的动态标签。这仅仅用于我们的input和textarea标签元素。
文本域会根据文本内容自动调整大小。
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">文本域</label>
</div>
</div>
</form>
</div>
特别注意:当你动态的改变文本域的值时，比如使用jQuery的 .val()方法，你必须触发一个自动调整大小的方法在后面。因为.val()方法不能自动触发这个事件。
$('#textarea1').val('新内容');
M.textareaAutoResize($('#textarea1'));
图标前缀
你可以增加图标前缀来使你的输入框更加的清晰。 只要增加一个图标带prefix在input和label标签前.
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<i class="material-icons prefix">mode_edit</i>
<textarea id="icon_prefix2" class="materialize-textarea"></textarea>
<label for="icon_prefix2">First Name</label>
</div>
</div>
</form>
</div>
文件上传
如果你想有一个带路径显示的输入框和输入按钮的文件上传组件，你可以使用我们提供的这个结构。
<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>文件</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</form>
你也可以使用multiple属性实现多文件上传。
<form action="#">
<div class="file-field input-field">
<div class="btn">
<span>File</span>
<input type="file" multiple>
</div>
<div class="file-path-wrapper">
<input class="file-path validate" type="text" placeholder="上传一个或多个">
</div>
</div>
</form>
字符计数器
在一个字符限制的文本框中使用字符计数器。
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6">
<input id="input_text" type="text" data-length="10">
<label for="input_text">文本输入</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea2" class="materialize-textarea" data-length="120"></textarea>
<label for="textarea2">文本域</label>
</div>
</div>
</form>
</div>
初始化
这个插件没有任何选项，但如果你是动态添加这些选项，你可以使用它来初始化它们。
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});