フォームは、ユーザーが入力したデータを受け取るための標準的な方法です。フォームにはユーザーインタラクションが不可欠であるため、これらの要素のトランジションと滑らかさは非常に重要です。
入力フィールド
テキストフィールドはユーザー入力を許可します。枠線は、ユーザーが現在編集しているフィールドをシンプルかつ明確に示すように点灯する必要があります。入力とラベルを囲む.input-field divが必要です。これは、Materializeの入力とテキストエリアのフォーム要素でのみ使用されます。
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はプレフィックスがありません。使用するものによっては、type属性セレクターを変更する必要がある場合があります。
/* 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が必要です。これは、Materializeの入力とテキストエリアのフォーム要素でのみ使用されます。
テキストエリアは、内部のテキストに合わせて自動的にサイズ変更されます。
<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()はテキストエリアにバインドされたイベントを自動的にトリガーしないため、後でautoresizeをトリガーする必要があります。
$('#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();
});