表单是接收用户输入数据的标准方式。这些元素的过渡和流畅性非常重要，因为表单与固有的用户交互相关。
输入字段
文本字段允许用户输入。边框应清晰地亮起，指示用户当前正在编辑哪个字段。你必须有一个 .input-field div 来包装你的输入和标签。这仅用于我们的输入和文本区域表单元素。
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">First Name</label>
</div>
<div class="input-field col s6">
<input id="last_name" type="text" class="validate">
<label for="last_name">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">Disabled</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="password" type="password" class="validate">
<label for="password">Password</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="col s12">
This is an inline input field:
<div class="input-field inline">
<input id="email_inline" type="email" class="validate">
<label for="email_inline">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</span>
</div>
</div>
</div>
</form>
</div>
预填充文本输入
如果你在标签与预填充内容重叠时遇到问题，请尝试向标签添加 class="active"。
你还可以调用函数 M.updateTextFields(); 来重新初始化页面上的所有 Materialize 标签，如果你正在动态添加输入。
<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">First Name</label>
</div>
</div>
$(document).ready(function() {
M.updateTextFields();
});
图标前缀
你可以添加一个图标前缀来使表单输入标签更加清晰。只需在输入和标签之前添加一个带有类 prefix 的图标。
<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">Email</label>
<span class="helper-text" data-error="wrong" data-success="right">Helper text</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 包装。这仅用于我们的输入和文本区域表单元素。
文本区域将自动调整为内部文本的大小。
<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">Textarea</label>
</div>
</div>
</form>
</div>
高级说明：当使用 jQuery 的 .val() 等方法动态更改文本区域的值时，您必须在之后触发其自动调整，因为 .val() 不会自动触发我们已绑定到文本区域的事件。
$('#textarea1').val('New Text');
M.textareaAutoResize($('#textarea1'));
图标前缀
你可以添加一个图标前缀来使表单输入标签更加清晰。只需在输入和标签之前添加一个带有类 prefix 的图标。
<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>File</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="Upload one or more files">
</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">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">Textarea</label>
</div>
</div>
</form>
</div>
初始化
此插件没有选项，但如果您动态添加这些选项，可以使用此插件对其进行初始化。
$(document).ready(function() {
$('input#input_text, textarea#textarea2').characterCounter();
});